Showing posts with label webdesign. Show all posts
Showing posts with label webdesign. Show all posts

6 ways to work social media into WebDesign

Friday, April 15, 2016



Social media is everywhere and seems to be affecting everything from the way marketers advertise and sell their products to how websites look. The world of the Internet has significantly been impacted by the social media platforms. Businesses need to come up with a social media strategy if they wish to succeed. One area that most people don’t pay much attention to is how the social media has impacted web design.

Impact on Website’s Design

Almost every business has a presence on social media and there is no better ways of letting customers know this than through the home page. It is for this reason that almost every website being created today has icons of the different social media sites the company has a presence on. Upon clicking on these icons, a visitor is directed to the social media page of that company.

The use of icons to show which social networking sites a company is on is becoming more and more important for websites today. All in all, for this strategy to work for you, you must make sure the links are working and that your social media page is active and has important information to help visitors.

Attractive designs for social media pages

The social media has become the most interactive marketplace on the Internet. The best thing today is that you can customize how your social media page looks so as to match your voice.

Facebook fan pages can be designed to match your business. You get the opportunity to match your social media page with your web design. The same can be done for other platforms like Twitter. This makes it possible to achieve consistency in how you promote your business. You can now customize your profile so that it grabs the attention of your viewers with an immediate effect.

Impressive designs for Ads on Social Media

More and more people are joining the social media sites as the sites’ popularity continues to increase with each passing day. Facebook, for example, is forcing companies to use it because of its massive number of active users that stands at more than 1.41 billion. More companies are hence driving their ads to social media and the main focus is perfect designs for the ads.

The reason for creating impressive ads is to gain more clicks or increase effectiveness. The design of the ads affects the number of leads gathers and subsequently the revenue earned. Moreover, impressive designs are needed to create other materials such as banners and memes.

Interactive Designs

Following the success of social media sites, the platform has impacted the web designs in a great way. Social media web design has inspired the design of most websites because it is more interactive and interesting. Web designers shape websites in such a way that the website is loads smoothly on any screen and in a way that it is interactive.

The purpose of creating interactive web designs is so as to attract more interaction from prospects and existing customers.

Using Images

Some social networking sites like Facebook and Instagram were developed with the aim of making it easy for users to share images. Most websites are following in the footsteps of these social media sites by creating websites that contain more images.

Pictures speak a thousand words. They are the best communication components hence the increased use of images in website designs.

Ways to Add Social Media to Your Web Design

Now that you understand how social media is influencing website designs, it is time to look at some of the ways you can add social media to your web design. There are several ways of doing this.
  1. Let your customers know which social media sites you are on
    This is one of the most straightforward ways of adding social media to your design. In your web design, place icons of the social media sites you are on. Although placing these icons on the home page is recommended, if you can place the icons on all pages the better.

    The general rule is to make sure the social buttons are visible. The more visible the icons are, the more users will interact with them. Do not forget to add a call-to-action that asks your visitors to ‘like’ or ‘follow’ your brand.

  2. Allow social logins
    Allowing for social logins will make it easier for your visitors to connect with you. You can add a login feature only this time your users will login in using their social media details such as Twitter or Facebook. This will help create an internal community and will also be a great way to share specialized content as well as connect with your users.

    Skip the process of filling forms by asking your users to register or login with their social media details. This will lead to increased conversion rate because of higher user registrations.

  3. Make your website design social media friendly
    Designing your entire site, from code to content, in a manner that complements social media user experience will boost your success. Replace the static homepage content with variable content that feeds from multiple sources like blog feeds or social media feeds.
     
  4. Make your content sharable
    When people love something, they almost always want to share it. Make it easy for your visitors to do this by embedding the ability to share on all your pages. Make sure there are social sharing buttons on all your content and product pages.
     
  5. Incorporate Facebook reviews
    User reviews have a great impact on the decisions of new clients. Featuring some of the reviews from your social networking sites will help build great testimonials. However, there will always be negative reviews so keep an eye on what users are posting and moderate the comments that appear on your website and social media page.
     
  6. Embed YouTube videos
    YouTube videos will boost your search engine ranking more so if the videos you use have more reviews.
  7.   
The bottom line is, you just can't create a web design that DOESN'T include social if you want to stay competitive. While emphasizing social media friendly web designs, remember to keep a focus on your business needs as well.


(Courtesy of memeburn)

11 of the Best #Microsite Examples Online

Friday, March 4, 2016



They say the best things often come in small packages. Think about it: jewelry, Snapchats, books, the keys to a brand new car ... all of these things support this notion.

And with our attention spans shrinking below that of a goldfish, it should come as no surprise that we're beginning to crave more focused content at a smaller scale, too.

Enter the rise of microsites. Unlike regular websites, microsites tend to be rather simplistic and easier to navigate. This isn't to say they won't make you want to poke around for a while, though. In fact, the really great ones do just that.

Ready to see a few use cases? Check out the list below for some great examples of microsites in action.

Note: There is profanity in example seven, so scroll on by if that's not your cup of tea.

What Is a Microsite?

A microsite is an individual web page or small cluster of web pages that act as a separate entity for a brand. A microsite typically lives on its own domain, but some exist as a subdomain.

Microsites can be used to help brands achieve a number of things. For example, some companies have used them to highlight a specific campaign or target specific buyer personas. Others have used them to tell a short story, or to inspire a specific call-to-action.

11 Examples of Ingenious Microsites

1) YearInMusic.Spotify.com | Spotify

Aside from serving as a painful reminder of how many Justin Bieber song I listened to on repeat last year, Spotify's Year in Music has proven to be one of the most well executed microsites we've ever seen.
spotify-year-in-music.png
Commonly referred to a "celebration" of the music that carried us through the year prior, Spotify's interactive site is personalized especially for you, based on your listening habits.

What exactly does that mean? Well, the tool makes it easy for you to create a personalized recap that incorporates details such as your first played song, top artists by season, and how much time you spent listening. The experience is unique to the user, making it fun for them to share and compare their synopsis with their friends.

And when it comes to sharing, the microsite makes it really easy. Every stat that the site pulls for you can be shared on social media thanks to a handy button at the bottom right of the screen.

2) DangersOfFracking.com | Linda Dong

In an effort to gain support for the FRAC Act (Fracturing Responsibility and Awareness of Chemicals Act), Interaction and Industrial Designer Linda Dong designed a beautiful microsite that uses parallax design to tell the story about the dangers of hydraulic fracturing.
microsite-fracact
The story starts with a water droplet falling from a cloud, and as you scroll down through the site, you follow the water droplet as it's taken from truck to fracturing site, turned into tracking fluid, and sent down a gas well into the ground. Along the way, you encounter floating facts and statistics about the dangers of fracking until you encounter two simple calls-to-action at the very end: "Contact your local officials" and "Join or support your local organization."

microsite-fracact2
Microsites like this one are heavily focused on using directional cues (in this case, the parallax movement) to drive users to complete a certain call-to-action -- so any other distraction or navigation bar is removed entirely.

If your microsite focuses on one or two calls-to-action, make sure they are concise and actionable like this one is, and that you set them apart visually from the rest of the site by making the font color pop or putting the copy in a button.

3) UrWhatUPost.com | Bolthouse Farms

"Why should junk food get all the glory?"

You're asked this question when you first arrive to BoltHouse Farms' microsite, UrWhatUPost.com. BoltHouse Farms created the site to show people how many social media conversations were happening about healthy foods versus unhealthy foods. To do this, they collected #UrWhatUPost hashtags and tracked the kinds of foods we share on social media, then pit the healthy stuff, like #grapes, against the unhealthy stuff, like #icecream. The goal of the website is aligned with their overall company mission: To change the way people think (and post) about healthy food.

microsite-foodpornindex
Bolthouse Farms proves microsites don't have to be minimalist. The pages on the site are colorful and animated, with words and moving numbers turning into dangling carrots and swinging pomegranates. Click on a food item and magic happens -- every food item is different. Click on a pomegranate and you can "hit" it with your clicker like a piñata. Click on a melon and you're taken to a "melon meditation" page, kind of akin to the iTunes Visualizer.

4) Dominosdxp.com | Domino's Pizza

Last year, Domino's announced their new Chevy Spark pizza delivery cars, known as DXPs. The cars were purposefully re-engineered for pizza delivery, and as a result, they boast a ton of awesome features -- like an oven where the left door should be, space for up to 80 pizzas, custom storage for sauces and drinks.

To show off this awesomeness, they recently launched a dedicated microsite detailing all things DXP.
dominos-microsite.png
The site is heavily interactive website enables visitors to zoom in each of the features to gain a better understanding of the purpose and level of thought that went into each addition. The entire site is also skillfully animated, making it really interesting to learn about each feature.

If nothing else, this is a great example of how to take a fairly complex product or idea and promote and explain it in a way that's both fun and easily digestible. But don't just take our word for it ... visit the website to explore for yourself.

5) EmojiTracker.com | Matthew Rothenberg

There is no "point" to emojitracker.com -- it was created by Matthew Rothenberg, former Head of Product at Flickr and Bitly, as an experiment in real-time tracking of all emojis used on Twitter.
Screen_Shot_2014-08-19_at_3.37.13_PM
The only calls-to-action on the site are the tweet and follow buttons at the very bottom. Otherwise, it's just for pure interest. With no navigation bar or way to get to another site, it might actually be confusing to some people.

Technically, it breaks the rules of good user interface design, but it goes to show that microsites don't need to have complicated designs. Keep it simple to keep people on the page without taking up too much of their time.

6) Fu2016.com | House of Cards

Step aside, Donald Trump. There's a new presidential candidate taking the internet by storm with this impressive, interactive microsite.

If you're not familiar with the Netflix series "House of Cards," the program follows a man named Francis Underwood, a ruthless politician with a hidden agenda. As the series enters season four, they're promoted the premiere with a clever microsite that pokes fun at politics. Talk about perfect timing, amirite?

frank-underwood-microsite.png
The microsite invites visitors to join Underwood's movement and rally support for "important" issues such as inequality, dishonesty, and entitlement. But jokes aside, what we love most about this microsite is the design. In fact, you could easily argue that the site functions better than those of actual presidential candidates. From Underwoods attention-grabbing, shifty eyes (visit the website to see for yourself) to the high-quality videos, the microsite draws you in and provides good reasons for you to stick around and engage with the content.

FU_2016.png

 

7) WhatTheF*ckShouldIMakeForDinner.com | Zach Golden

Don't have a big budget? Take a hint from Zach Golden, author of What The F*ck Should I Make For Dinner?, who created a microsite to promote the book.
What_The_Fuck_Should_I_Make_For_Dinner_.png 
>Earmuffs, kids.

The site has a very simple layout: A rotating "purpose of the recipe" line, a rotating recipe from the book, and three links that let you kind of "choose your own journey." It has a black-and-white, minimalist theme; uses all caps; and places a small call-to-action in the corner that promotes his book. That's it.

Media company Digiday took a cue from Golden and used his microsite template to conduct an experiment of their own. They created the microsite WhatTheF*ckIsMyTwitterBio.com -- with zero media budget -- to see if the content would go viral and help build their brand.

"Thanks to the open-source WTFEngine by Justin Windle, some cheap Web hosting and a $12 domain registration, WhatTheF*ckIsMyTwitterBio.com was up and running in under two hours," reads Digiday's press release. "Step two was populating the site with content, which took [two hours]."
What_The_Fuck_Is_My_Twitter_Bio_.png
Their biggest takeaway? That good copy works. "We didn't spend a dime promoting the site, and it reached nearly 100,000 unique users 'organically.'"

8) ElfYourself.com | OfficeMax

You didn't think I could write a blog post about microsites and not include ElfYourself, did you? Of course not. The screenshot below shows what the website looks like right now, but come the holiday season, expect your inbox to be rife with ElfYourself animations again this year because ElfYourself isn't going away.

Screen_Shot_2016-03-02_at_3.01.52_PM.png
What made the site so popular? Other than being hilarious, it's also easily shareable, has a single call-to-action, and makes the users the stars.

"It brought the brand to life for consumers," wrote Kenneth Hein in Forbes"and for the business-to-business crowd it provided a human face for the big box retailer."

In other words, Office Max used the microsite to be creative and let their freak flag fly, and it worked like a charm. They focused the campaign on the consumers, not the brand -- but the sales tie-in came at the end of the ElfYourself videos in the form of coupons and promos.

9) TasteTheFeeling.Coca-Cola.com | Coca-Cola

Let's face it: We all love GIFs. And the folks at Coca-Cola have tapped into this inevitable admiration by creating a immersive online experience in the shape of the "Taste the Feeling" microsite.

Coca_Cola_Taste_The_Feeling.png
Here's how it works: When users land on the page, they're met with a two-minute music video set to the sounds of a custom campaign anthem from Avicii and Conrad Sewell. The video is made up of looping, three-second GIFs that depict the many emotions felt by Coca-Cola drinkers. As you watch, you can select an emotion by clicking on one of the 32 emotion-based icons, or enter your own emotion to pull up a corresponding GIF.

All of the GIFs are easily sharable on social media, which serves as a great way to draw people back to the site to engage with the content.

This microsite also serves as a great example for those interested in globalizing their campaign assets, as it's available in more than 20 different languages.

10) Inside.Chanel.com | Chanel

Inside Chanel is a microsite that "works to inform consumers about the house’s history and heritage through video and multimedia content," according to Luxury Daily. The site houses a ton of short, social videos that chronicle the people, places, things, and events that have contributed to continued success of this iconic fashion brand.

The purpose? "The strategy behind this microsite is to create some accessibility of Chanel’s history, but more importantly, their success throughout the years,” explains Dalia Strum, president of Dalia Inc.

Inside_CHANEL.png
We love their video-centric approach to visual storytelling. Each of the videos aims to pull back the curtain and give visitors an exclusive look at behind the scenes photos and stories, as they pertain to different aspects of the brand -- color, couture, and so on.

It's important to note that this site isn't Chanel's first stab at microsite creation. In fact, the brand has experimented with multiple microsite formats, including the editorial-style site Chanel News:

Chanel_News.png

 

11) BurgerBff.com | Mellow Mushroom

This microsite from the folks at Mellow Mushroom -- a pizzeria franchise established in Atlanta, Georgia -- was created to support their recent "Burger BFF" campaign. The campaign was launched to create buzz for their new menu items: Herb (a vegetarian burger) and Carnie (a beef burger).

The menu items have been adapted into cartoon BFFs for the sake of the campaign ... and the result is pretty lovable.

BFF_Burger.png

Mellow Mushroom uses the microsite as a way to promote a contest for a chance to win a round trip to Denver or Seattle with their bestie. And it does so in a number of really fun and interesting ways. For example, one section of the site invites visitors to use the hashtag #BurgerBFF to enter the contest and show off their best burger shots on Instagram:

BurgerBFF_Campaign.png

But that's not all: The site also offers visitors several other engaging, interactive ways to enter the contest, including quizzes and a Mad Libs-style storytelling generator.
  

(Article courtesy of HubSpot)

How to choose between adaptive and responsive webdesign

Wednesday, March 2, 2016


The choice between adopting adaptive and responsive website design is best determined when designers consider their unique time and talent requirements. Adaptive design has intense time, cost and resource demands to create multiple layout templates, while responsive design involves a greater commitment to coding to maintain a proper user experience and visual hierarchy.

Responsive web design Vs Adaptive web design: which should you choose? In our multi-device, multifaceted user society, we face increasing pressure to keep users happy (and connected), all the time: no matter where they are or what they’re doing. Luckily, we have a variety of tools at our disposal that help us to keep on top of this. But with all the options out there, it can sometimes get a bit overwhelming. The design concepts of Responsive and Adaptive are quite different, so how do you pick the most suitable? Well, it totally depends on you and your business, of course. Why not try finding your solution through prototyping, where you can test both of the designs out early on.

It seems that sometimes we interact from different planes of understanding and we get lost in the specifics. So, let’s take things one step at a time. First things first: let’s agree that responsive sites and adaptive sites are similar in that they both change appearance based on the browser environment they are being viewed on—they both intend to make your web page look good on multiple devices (desktops and mobile devices alike). But, let’s be clearer: whilst responsive websites respond to the size of the browser by fluidly adjusting the placement of elements on a web page to best fit the available space, adaptive websites adapt to the width of the browser at specific points, based on the size and capabilities of each device. Responsive Vs Adaptive: this debate keeps coming up in web design conversation, but there is no straightforward answer. Let’s take a look for ourselves.

The origins of Responsive

Responsive web design (RWD), accredited to Ethan Marcote, describes a website’s content and layout appropriately designed to fit the screen of given devices. This design type is achieved by using CSS media queries and HTML to resize, hide, shrink, enlarge, and/or move the content to make it look good on any screen. RWD features include fluid grids, flexible media, and breakpoints with a fluid layout between them.



We’re living in the days of mobile-first, and we can’t always anticipate which device our users are going to use. As a result, a staggering number of today’s newer sites use responsive web design in order to cater to the multitude of users of today. The implementation of RWD has been made easier for less experienced designers and developers, thanks to the availability of themes accessible through CMS systems such as WordPress, Joomla and Drupal. But why should you use responsive?
  • Readability: Responsive delivers a single design that has slight variances from device to device. The intention is to offer an overall universal look and feel without users having to zoom in and out of differently sized screens on their various devices.
  • Fluidity: in Responsive design, all components buttons, menus bars, images etc. are automatically scaled downed in order to respond suitably to the design features of each device. This feature makes for an unchanging experience no matter which device you’re viewing a design on.
  • Consistent and complete experience: we know that it’s no longer enough to simply make sure your web content fits on a small screen—’mobile first’ is the way forward, so let’s keep it classy. With Responsive web design, the content, like the layout, remains consistent through all devices. Users are lazy, so we need to bring the information to them. When users can access all the information, across all mediums if and when possible, they get the bigger picture: a consistent and complete user experience. Additionally, as users are able to share their web content more easily from any of their devices, shared expectations will increase.
  • And with that consistent approach, let’s talk about a really cool feature of RWD: the singular URL. Responsive design means that you only need to have one URL that can be used on all devices, which means that Search Engine Optimization (SEO) only needs to be managed once because content will not be changed from device to device. So what does this mean for users? Well, imagine if your information was consistent from device to device and easy to read! Lower bounce rate anyone?
  • Responsive web design is cost effective, in comparison with Adaptive: RWD has a long life span, does not require constant rework and it’s easier to set up for rebuilds.
 

Responsive: what’s the catch?

Here’s the thing: Responsive requires more work. In order to ensure that the webpage fits each and every screen that users will access, you will need a substantial amount of programming and coding. You should, of course, also consider the effects on the user experience. RWD shuffles content around in order to fluidly fit the size and shape of the device’s window, so you’ll need to pay particular attention to the visual hierarchy of the design as it shifts around, as well as whether all that content is suitable for mobile devices! Oh, and be prepared for longer page load times and incompatibility with older browsers. Responsive web design is essentially like solving a puzzle—developers need to know how to reorganize elements on larger pages to fit more angular pages or vice versa.

A word of caution: ensuring that elements fit within a page is not enough. For Responsive wed design to be successful, the design must also be compatible with all screen resolutions, sizes and layouts—and this of course makes the process rather complex.

Design thinking with Adaptive

Adaptive web design (AWD), the term coined by Aaron Gustafson, describes content authored and layout designed for distribution across multiple channels, media, products and interfaces. This design is achieved through progressive enhancement, detecting the device, and static layouts based on breakpoints which don’t respond once they’re initially loaded.



AWD works to detect the screen size and load the appropriate layout for it—generally you would design an adaptive site for six common screen widths: 320, 480, 760, 960, 1200, and 1600. Adaptive is useful for retrofitting an existing site in order to make it more mobile friendly as it allows you to take control of the design and develop for specific, multiple viewports. Let’s take a look at how this design type could work for you:
  • Adaptive web design offers a tailored UX, as each device will be treated as an individual medium, with a unique design: ‘device-first’. The “magic” is in that the device and device-specific features are detected and a website’s original layout and content are served to the user based on that information. The result is a website custom-made for the user’s device.
  • Fast page loads are common in AWD because only the essential elements are loaded on mobile devices.
  • Existing sites don’t need alteration, the layout is already set up!

The downside of Adaptive

As Adaptive web design requires advanced knowledge of web development for implementation, preparing multiple page-layout templates and testing across target, can can be a rather costly and time consuming concept to work with, as well as resource demanding. Making enhancements and modifications to multiple layout templates can be uneconomical, and the structure can be difficult to manage when it comes to multiple views. Due to the need to manually prep each design on each device, Adaptive web design can sometimes result in a less consistent cross-device experience, than say with Responsive design.

Nevertheless, however complex and expensive Adaptive can be, it’s a much more effective way to reach the broadest mobile audience.

The best of both worlds

Sometimes simple terms can represent complex concepts, so let’s try not to get confused.  There are no shortcuts to whichever web design technique you decide to use—both require the work that comes with creating a site that’s essentially one-size-fits-all. Responsive doesn’t offer as much control as Adaptive, but generally takes much less work to both build and maintain. Responsive layouts are fluid and whilst Adaptive uses percentages to give a more fluid feel when scaling.
 
 
(Courtesy of JustInMind)