Due to minimalism’s sparse elements, it may seem easy to replicate the style. The truth, though, is the exact opposite — because designers only have a few elements to work with, designing a minimalist site requires more thought and effort.

In this article, we’ll explain how to use minimalism to take full advantage of it. We’ll start with a quick examination over whether the style is right for your site, then dive into the best practices, because discussing how minimalism cooperates with other techniques.

Will Minimalism Work for Your Site?

Minimalism is not the best choice for every site. While the technique works great for straightforward businesses like agency sites and creative portfolios, it becomes trickier for more complex sites.

Let’s look at some common problems sites run into when applying minimalism:

• Too much content — Sites like eBay or Amazon need a detailed interface to support content categories, so a minimalist interface isn’t the most appropriate. However, even these sites apply some of the principles of minimalism, such as hiding content until needed.
• Too many ads — In general, external ads and minimalism do not go well together. Minimalism is precise and meticulous, so if you can’t control what comes from the ad server, your entire design could be upset by something trivial like the ad’s color. Even if the ad is preset, it’s still one more element in a scheme designed for as few elements as possible.
• Children and young adult sites — The short attention spans of younger audiences make minimalism come across as boring. They’d prefer sites with more visual (perhaps even audio) stimulation.

Especially in comparison to other styles, minimalism has a very particular set of criteria in order for it to work. Think carefully before applying it.

Minimalism Best Practices

Take a look at these valuable guidelines for minimalism:

1. Landing page only — The lack of elements can be harmful to certain content-rich sites. In these cases, a better option might be to create a minimalist landing page that leads to a more intricate site.
2. Crisp copy — While “omitting needless words” is great writing advice in general, in minimalism, it’s even more useful. Think like Hemingway when writing your copy.
3. Top-heavy — In accordance to user browsing habits, place high-level content with ample negative space at the top of the screen, then increase the content density as the scroll deepens.
4. Keep it interesting — Boredom is a constant threat with minimalism, so change up your layouts just to further engage your user. Alternating layouts along the Z-shaped reading pattern can help.
5. One concept per page — In the spirit of simplicity, each page/screen should focus on only one concept, centered around a single visual.
6. Five or fewer sections — Content should be prioritized in no more than five sections. If there’s more, trim the fat.
7. Start simple — A helpful way to design is to start with a black and white wireframe, then add flourishes like color later. This helps keep you grounded in what’s necessary, and what’s not.

If you’re new to applying minimalism, what to keep and what to toss can be a tough choice. Below we’ve made a quick list for beginners:

• Essentials — logo, navigation options, body content, contact information.
• Throw-aways — social media links/icons, footers, widgets (especially lists, i.e., “Top Posts”).

On the bright side, the more you work in minimalism, the more you develop your instincts about what can be cut. Separating what’s necessary and what’s extra is a skill that can be translated to all styles of design.

Minimalism with Other Styles

Part of the beauty of minimalism is how well it works together with other styles.

Think of minimalism as an attribute that can be added or combined with other styles and techniques to accent strengths or mitigate weaknesses.

Especially with today’s prevalence of mobile devices and heavy-loading animations, minimalism offers a way to reduce a site’s maintenance without reducing its quality. For this reason and others, minimalism is often used in conjunction with these other styles:

1. Flat Design

Minimalism and flat design go exceptionally well together, given their shared emphasis on simplicity.

Both forego design tricks to draw attention to content, and the basic style of flat design is, on its own, minimalistic.

Quotes Magazine

2. Hero Headers & Images

Stepping away from the stark world of flat design, realistic photos and images on a large scale are increasing in popularity.

With these massive and attractive images naturally taking the screen’s attention, coupling them with minimalism makes sense to avoid competing for your user’s focus.

Art Directors Club of Europe

3. Simple Navigation

In other words, you can simplify navigation with a single button like the hamburger icon, which reveals the full navigation menu only when clicked or hovered over.

While the strategy is the fastest way to go full-throttle minimalistic, it’s not recommended for every site — such oversimplification reduces the discoverability of navigation items, so it won’t work in luring users to new or unfamiliar pages.

ETQ Amsterdam

4. Dramatic Typography

Since words are almost always part of the essentials on a minimalist screen, typography takes on a whole new importance. It becomes one of the few ways left for a minimalist site to depict its personality and create atmosphere.

The Outpost

Conclusion

With all the practical benefits that come along with minimalism, such as reduced loading times and easier responsive design, minimalism is a style that’s at least worth looking into.

If your site satisfies all the criteria we mentioned above, try reimagining your site with less, even if just as an exercise. You may find that all those elements you once thought were essential really wouldn’t be missed if you got rid of them.

The post Taking Full Advantage of Minimalism in Web Design appeared first on Speckyboy Design Magazine.

Throughout the last few years, however, it’s been evolving to satisfy the shifting tastes of users and to implement advancements in technology.

Flat design in its current state (what Ryan Allen calls “Flat 2.0”) is a style different than, but similar to, what it was in the past.

Influenced by Swiss/international design and artistic minimalism, flat design uses techniques from various mediums and eras and draws them together in something all its own.

In this article, we’ll look at seven of the most recognizable traits of the most modern version of the style.

These traits can be used individually for their specific benefits, or combined for a strong flat look. But before you start “flattening” your design, it’s important to consider the style’s pros and cons.

Advantages and Disadvantages of Flat Design

Take a look at our short analysis below to see if a flat design can help your site.

Advantages:

• Conducive to responsive design
• Easy for users to learn the system and navigate
• Structured layout and crisp visuals create visual maturity
• Speedy loading times
• Simple typography promotes readability

Disadvantages:

• Deceptively difficult to do well
• Simplistic style can weaken the signifiers
• High risk of appearing boring
• Lack of individuality due to its popularity

Now that you know what the style has to offer, let’s look at seven techniques for using it.

Shading

Part of Flat 2.0, shading adds a depth and complexity without sacrificing the minimalistic elements that make flat design appealing. This is a new addition to flat design, as the older versions avoided such flourishes.

While past years saw the trend of longer, more noir-ish shadows, lately, the trend has been moving towards subtlety. In the above example from Duffy & Partners, the product’s shadow (and reflection) are slight and unobtrusive, but still add a little extra visual interest.

Dynamic Colors

To make up for the sparse visual effects, flat design embraces dynamic color, especially bright hues. The energizing colors contrasted with one another keep a page of few elements from appearing dull.

The lively colors of flat design have, from the beginning, been one of its most identifiable characteristics. The above site for the CSS Conference uses a traditional flat palette with soft and happy hues.

Because color usage is so crucial, the site Flat UI Colors has collected some of the most effective of these patterns.

Simple Typography

True to form, the typography in flat design stays simple and easy to read — which equates to sans serif and a uniform stroke width.

In the above example from Intercom, the font does not draw attention to itself, and the words are easy to read. This puts the focus more on the graphics, which are quite interesting.

With its emphasis on readability, the popularization of flat typography is even infiltrating other, less minimalist styles of design. We see this flat style of text used with hero headers, oversized typography or type-only websites.

Ghost Buttons

One of the trendiest elements in web design lately, the ghost button fits in equally well with the photo hero backgrounds as it does with flat design, and for the same reason: it doesn’t draw too much attention to itself, but is still recognizable as a button.

The basic typography within the buttons furthers the effects of deflecting too much attention. The minimal distraction of ghost buttons suits flat design’s classic sparsity, and makes it one of flat design’s most noticeable features.

As opposed to some other traits on this list, the ghost button can easily be used with almost any style.

Minimalism

Flat design and minimalism go hand-in-hand, sharing many of the same principles, like usability and simplicity.

Image Source: Pelican Books

While it may seem like the easy way out, minimalism is actually harder to apply than it looks. Fewer elements mean you have to use the available ones with more care.

Iconography

With only the essential elements on the screen, icons need more detail and flair to keep things interesting.

Icons are growing in size to incorporate more detail and as such, becoming more of a mainstay artistic element for a site’s expression. Notice how with the Stash Flat Icons above, each icon features the flat style within itself. Bright colors, cartoony designs, and just enough detail.

Accent Colors

The traditional bright color palettes of flat design will never fully go out of style. Flat design does, however, appear to be shifting to more standard color palettes with bright colors used only as accents.

Image Source: C2s

Contrasting the bright colors against dryer backgrounds and surrounding elements gives the designer more control over what’s seen and what’s not. This works especially well with the basic colors, particularly black and white, which make flat’s bright colors stand out even more.

Conclusion

Flat design characteristics are slowly seeping into other styles of web design, and hybrid designs are becoming just as common as purebreds.

Don’t be hesitant about only using one or two of the above traits if you don’t want to fully commit to a flat design — these tactics can often succeed on their own, and may be the initial inspiration for a more innovative style all your own.

The post The Rise of the Almost-Flat Design Web Trend appeared first on Speckyboy Design Magazine.

That truism explains the rise of long scrolling: with mobile browsing overtaking desktop browsing, the popularity of small screens has urged designers to rethink their outdated “above the fold” mentality.

Long-scrolling creates plenty of new opportunities for storytelling, navigation, creative visuals, and a more immersive overall experience. As a result, we find several common techniques and strategies start to emerge:

• Parallax Graphics – Borrowed from the video game industry, this strategy of moving the backgrounds at different speeds creates a 3D effect and stimulating visuals that are more enjoyable to interact with.
• Screens as Pages – An important way to organize information on a single page, differentiating concepts into screen-sized sections, usually by changing the background, makes sites more cohesive.
• Sticky Navigation – One of the biggest drawbacks of long scrolling is disorienting the user, so having a navigation system that always stays in the same place on the screen gives users control and security to prevent getting lost.
• Animated Interactivity – Scroll-triggered animations add a fun level of interactivity that engages the user to a point where they enjoy scrolling regardless of the content.
• Atypical Direction – Due to the recent trendiness of long scrolling, sites can set themselves apart by scrolling left, right, or upwards.
• Indicators – Some users will not think to scroll on their own, so quick instructions like “scroll down” or another indicator avoids confusion – just be sure to distinguish these from other links or calls-to-action.

Twitter

One of the pioneers responsible for breaking the page-by-page mold, Twitter remains among the best and most-recognized long-scrolling sites today. This format allows the tweets to be arranged chronologically while still seeming new and fresh.

For social media sites and others with user-generated content, long scrolling is not just a trendy choice but a practical one. The neverending loading of new content from infinite scrolling allows otherwise chaotic content to be organized.

Heart Kids NW

The New Zealand charity Heart Kids pulls out all the stops. The long-scrolling site combines animations (some scroll-activated), stunning color usage, poignant imagery, and cursor interactivity to promote its life-saving message.

Notice the unobtrusive “Scroll” icon and instruction on the landing screen, and the sticky call-to-action that always remains at the top.

The Boat

One of the most creative uses of long scrolling is SBS’s The Boat, something like an interactive novel.

The continual animations and clever use of motion and angles when new content appears draws the user/reader into an immersive experience that traditional, stagnant scrolling sites can’t match.

MCA Leicester: The Seven Types of Motorcycle Rider

This offshoot site for MCA Leicester demonstrates a smooth method to indicate scrolling without actually scrolling. The grayed-out helmets on the left side, stacked vertically, indicate (along with the title) that the user has only to scroll down to see more content.

An additional tactic is the clever animation that presents each new screen, making the site somewhat of a long-scrolling/page-by-page navigation hybrid.

Thirteen Reasons Why Your Brain Craves Infographics

The natural style of long scrolling, where different sections and concepts are intrinsically united in a continual stream, makes them great for infographics.

As Thirteen Reasons Why Your Brain Craves Infographics shows, the single-page format allows designers to fluidly present heavy doses of information in smaller, digestible bits.

Moreover, scroll-activated animations, such as the eye that moves with the scroll as well as background animations, negate the sometimes boring aspects of learning information.

Junko’s Story: Surviving Hiroshima

Another SBS site, Junko’s Story mixes the storytelling and infographic properties of long scrolling to tell survivor’s chilling story of surviving the Hiroshima blast.

Due to the solemn nature, the site keeps a traditional format with plain text interspersed with graphics. However, the site retains a fresh and modern feel with scroll-activated images, such as the metal helmet above, that fade into view in the margins.

These display telling artifacts and factual infographics about Hiroshima – such as a map of the blast radius – which can be clicked for further details.

Beagle

The site for Podio’s Beagle tool sets a page-by-page navigation to the long-scrolling format.

Each point in its value proposition has its own screen/page, however all are accessible through a linear scroll and are united by animations that carry user attention from one screen to the next, such as the piece of paper moving from the screen to screen above.

Bowhead – Tails and Whales

Like Beagle above, Bowhead takes advantage of long scrolling to display its value proposition point-by-point – though for a single product. The site uses animations like fades and slides to keep the content engaging.

The Kings Arms

Not all long scrolling sites have to be flashy. The London pub The Kings Arms uses simple background divisions with no fancy animation transitions between screens.

However, a parallax motion on the background phones and additional cursor animations (not to mention an aesthetic layout) keep the site from appearing dull.

Wall’s Ice Cream & Airpure Car Fresheners

By contrast, the promotional site for the Wall’s Ice Cream and Airpure Car Fresheners collaboration is very flashy. Little more than images of the iconic popsicles, the long-scrolling site features entertaining animations between screens that make it worth browsing.

Notice sticky navigation on the left site and the progress bar at the bottom (which changes colors).

Beatrate Band

The long-scrolling site for the band Beatrate features a couple of experimental features for long scrolling, including autoplaying video and a horizontal image carousel.

Space Needle

The Seattle Space Needle site is a perfect example of atypical scrolling direction. Under the pretense of traveling up the space needle (and beyond), it makes sense that users scroll up instead of down.

Conclusion

As the sites above prove, the most successful application of long scrolling is for its practical benefits, not to appear part of a trend.

There are many useful advantages of long scrolling: unifying disorganized information, interactivity, navigational liberties, stunning visuals, displaying extensive content (infinite scroll), linear storytelling, etc.

However, given the drawbacks like disorientation and occasionally loading times, you shouldn’t recklessly switch over. Understand the best techniques to make the most out of it.

The post Exploring the Long Scrolling Web Design Trend appeared first on Speckyboy Design Magazine.

While focus groups and field studies help you understand user opinions and natural product use, remote recorded tests let you see reactions and hear the thoughts of users as they focus on specific tasks. To demonstrate how to run quick usability tests as part of a design process, we ran a few unmoderated tests and redesigned the Yelp website accordingly.

Regardless of the method you choose, just remember that user research is not about writing reports — it’s about asking and answering the right questions and gathering data so that you can make evidence-based decisions in your designs.

Choosing User Demographics

As described in The Guide to Usability Testing, in order to set up your user tests, one of your first steps is determining who the target audience should be for the purpose of the study.

Image Source: The Role of UX Research.

From the perspective of a company with a very large user base (138 million unique monthly visitors, according to Yelp’s Q2 2014 numbers), it is very important for the redesigned website to still be usable by the average current user. Yelp certainly would not want to alienate its existing readers in favor of an improved onboarding experience for first-time users.

So, for this study, we were primarily interested in observing current, semi-frequent Yelp users, rather than brand new users. We also chose not to focus on power users (those who use Yelp every day), because their experience would not be representative of the middle-of-the-road, occasional user.

We chose not to focus on age, gender, income level, or experience using the web since Yelp users come from all backgrounds. Since this study was purely for
qualitative analysis, we did not need statistical significance to validate our findings. We followed industry best practices and ran our study with a total of 5 users (according to Nielsen Norman Group, a sample of 5 users will uncover 85% of a site’s problems).

One of the tasks in our test required users to log in to an account. Since our test participants were not new users, however, we were not interested in testing account creation. We were slightly concerned that users who had an account would be more likely to be power users, so we decided to test with two segments: one with Yelp accounts (3 users), and one without (2 users). For the segment with Yelp accounts, we only selected participants who had been Yelp users for less than 6 months to further eliminate the likelihood that they would be power users.

Lastly, for simplicity’s sake in our design sprint, we only tested Yelp’s website on desktop, not on mobile. If this had been more than an exercise in design, we would have tested the experience on smartphone and tablet as well to make sure we addressed any problems that users encountered on mobile devices.

As shown in the free e-book User Testing & Design, Here are the exact demographic requirements and screener questions that we used:

Test Details: Group 1 (Yelp account holders)

• User requirements: 3 users
• Any age, any income level
• Any gender
• Any web experience
• Device: desktop computer
• Located in U.S.
• How often do you use Yelp?
  • Every day
  • 3-4x a week
  • 1-2x a week
  • 1-2x a month
  • a few times a year
• How long have you been using Yelp?
  • Less than 6 months
  • 6 months – 1 year
  • More than a year
• Do you have a Yelp account?
  • Yes
  • No

Test Details: Group 2 (Not account holders)

• User requirements: 2 users
• Any age, any income level
• Any gender
• Any web experience
• Device: desktop computer
• Located in U.S.
• How often do you use Yelp?
  • Every day
  • 3-4x a week
  • 1-2x a week
  • 1-2x a month
  • a few times a year
• How long have you been using Yelp?
  • Less than 6 months
  • 6 months – 1 year
  • More than a year
• Do you have a Yelp account?
  • Yes
  • No

Determining Test Objectives and Assigning Tasks

Any good research plan should begin with the question, “What are we hoping to learn?“

In our case, our objectives were to learn how semi-frequent Yelp users go about completing several very common tasks (to see what features were most important), and at least one not-so-common task (to see if they knew how to use a more advanced feature).

We assigned all users the following common tasks:

• Focused task — Find a business based on very specific parameters.
• Open-ended task — Find a business without being given very many guidelines.
• Highly specific task — Look up a specific location to learn a specific piece of information.

We wanted to learn when both user groups chose to search versus browse, how they interacted with filters, and how they made a decision about which business to go to.

As for the less common tasks, we provided a different task for each user group. Since we had heard several anecdotal complaints from registered Yelp users about Bookmark and Lists features, we asked registered users (Group 1) to complete the less-common task of saving businesses for later reference.

For users without accounts (Group 2), we chose a less-common task that did not require an account: finding an event. We wanted to see if these users would search or browse the site, and how they would make a decision about which event to attend.

Below, you’ll find detailed explanations of the common and less-common tasks that we assigned to each group of users. After each task, we asked test participants if they were able to complete the task successfully and the level of ease or difficulty of completion.

Tasks: Group 1 (Yelp Account Holders):

1. Imagine you need to reserve a private dining space for a group of 15 people. You are looking for an Italian restaurant with a classy ambiance. Your budget is about $20 per person. Try to find a restaurant near you that matches all of these needs.
2. Imagine your best friend is having a birthday soon, and you’ll be planning a party. Find 10 bars or lounges near where you live that you would be curious to look into later for the party. Save them so that you can easily find them again on Yelp.
3. Imagine you are driving through Boise, Idaho, and your car starts to make a strange noise right as you’re about to stop for the night. Your passenger recommends 27th St Automotive. Use Yelp to find out if they are open at 8:00 pm on Tuesday.
4. >Go to the place where you saved the 10 bars for your best friend’s party. Keeping his or her tastes in mind, choose one that would be a good match.

Tasks: Group 2 (Not Account Holders):

1. Use Yelp to find a new restaurant near you that you haven’t been to yet. Spend no more than 5 minutes looking.
2. Imagine you need to reserve a private dining space for a group of 15 people. You are looking for an Italian restaurant with a classy ambiance. Your budget is about $20 per person. Try to find a restaurant near you that matches all of these needs.
3. Imagine you are looking for something fun and unique to do in your neighborhood this weekend. Try to find a concert, play, or other event using Yelp.
4. Imagine you are driving through Boise, Idaho, and your car starts to make a strange noise right as you’re about to stop for the night. Your passenger recommends 27th St Automotive. Find out if they are open at 8:00 pm on Tuesday.

Once we had selected our test participants and written our test questions, we launched the user tests. Our video results came back within about an hour, and we got ready to watch and analyze them within the UserTesting dashboard.

Analyzing Usability Testing Results

To gather qualitative data, we ran a remote usability test with 5 users via UserTesting. To gather quantitative data, we tested ~30 users with a closed card sort (which shows how you can restructure your IA to match people’s thinking processes) and a first-click test (which shows what site element makes the strongest first impression). You can learn more about the quantitative user tasks, but we’ll just summarize the top insights from both tests:

• The Search bar was the starting point for almost all tasks. It was also the preferred backup option when users weren’t sure how to interact with the site UI (e.g. searching for “Bars” instead of clicking the category). Our redesign definitely needed to prioritize the Search bar.
• The Events tab wasn’t noticeable. When asked to find an interesting activity, one user went to the Search bar while the other navigated through the Best of Yelp section. If we wanted users to actually interact with the Events feature on Yelp, we would need to make it easier to find.
• The price categories weren’t clear. When given a budget to find a restaurant, some useres weren’t sure what the dollar signs meant. In our new design, we added price ranges to the symbols.
• The filters aren’t prioritized correctly. People didn’t use 7 of Yelp’s 47 filters, and the most popular filters that arose in testing (such as “Accepts Credit Cards” and “Open Now”) take several clicks to access. Our redesign reorganizes filters into clusters of 4 for easier access.
• Photos are a key part of the experience. When asked to find restaurants with a certain ambiance, users relied on photos the most. Our redesign makes Yelp more visual.
• Bookmarking needs to be simpler. Currently, you can’t just save a restaurant or business straight from the search results — you need to visit each individual page to bookmark them. Our redesign lets you save a business with one click on the search results page.

To see how we incorporated all 7 usability testing insights, you can play with the low fidelity Yelp prototype, and check out the final high-fidelity prototype.

The post Improving Design With Quick Usability Tests appeared first on Speckyboy Design Magazine.

As HD displays grow more affordable, so too does the popularity of HD sites. But while it’s no big feat for your users to go to a store and buy an HD device, designers have to put in a lot more work on their end.

Let this article be your primer for implementing HD backgrounds into your site. Here we’ll explain the three most popular types of HD backgrounds, and the best practices for each. But first, let’s start with the basics.

Defining High Definition

When we talk about HD, we refer to a device that contains more than twice as many pixels as one with standard definition. Resolution is measured in how many pixels exist within an inch of screen – this unit is interchangeably referred to as dots per inch (dpi) or pixels per inch (ppi). To put things in perspective, a typical standard definition screen boasts 72 ppi, while high definition screens are anything more than 200 ppi.

While the current highest-definition PC is the iMac 27″ at 217 ppi, mobile devices take HD to another stratosphere:

• iPhone 5 & 6: 326 ppi
• iPhone 6+: 401 ppi
• iPad Retina & Air: 264 ppi
• iPad Mini: 326 ppi
• Samsung Galaxy S5: 432ppi
• Samsung Galaxy S6: 577ppi
• HTC One M9: 441 ppi
• LG G3: 534 ppi

With the increasing popularity of HD devices, detailed and visually rich backgrounds are stepping forward to take center stage. As explained in Web UI Design for the Human Eye, the separation of background and foreground is a natural function of human sight.

These stunning backgrounds rely on a layering effect to simultaneously impress users while not drawing too much attention from the more useful foreground elements. This layering effect is crucial to the proper HD backgrounds. The site’s visual hierarchy must remain intact, and that requires the background not overshadowing the foreground.

Booking.com

In the above example for Booking.com’s New Year’s Eve promotional event, clearly the most fascinating visual is the high-definition picture of the temple in Kyoto. You want your HD background to make an impression on the user without dominating the screen. In this example, the user can still easily see the text and title, smartly placed at the center over a vacant background section.

At the bottom of the page, notice how the navigation also stands out thanks to the white contrasted background.

In general, there are three main types of HD backgrounds: Still Images, Videos, and Animation.

Below, we’ll discuss the strengths and weaknesses for each, as well as advice for using them.

Still Images

As we mention in the free ebook Web Design Trends 2015-2016, full-screen, or hero, image backgrounds are another popular web trend today. These large-scale images take full advantage of HD’s visual power.

Macquarie-Park.com.au

HD image backgrounds allow designers to influence users with a better emphasis on texture, colors, and even the image’s content. This does wonders for that split-second, all-important first impression.

WeAreDandy.com

If you know just the image to best represent your brand as the first thing your user sees, here are 5 suggestions to implementing it:

1. Don’t compete – The HD background will naturally attract a lot of attention, so other elements will only distract the user and complicate the visual hierarchy. Try pairing this background with a minimalist interface.
2. Sliders or collages – Multiple images obviously give you more options in what you can show, so sliders or collages are acceptable strategies if you have more than one image.
3. Image effects – Blurs, color overlays, integrating graphics and photography – some effects can achieve more goals than one image alone.
4. Consider screen size differences – Elements align with the background image differently depending on device screen sizes, so keep all variations in mind. That’s why you must embrace responsive design.
5. Cropping – Photo backgrounds rarely conform to the 1 to 1.5 aspect ratio of cameras, so crop your images to get the best possible result.

The HD image background will make a lasting first impression, so make sure you choose an image that you want your users to associate with your brand.

2. Videos

Despite the potentially heavy loading times, HD video backgrounds can take still images a step further with their ability to create emotional connections. Apply classic cinematic techniques to web design and move both the image and the user.

AirBnB.com

AirBnB uses video backgrounds to develop the context of their service. Showing “human” movements typical of traveling gets the user excited about booking an accommodation through the site.

Until the introduction of HTML5, most browsers and internet connections couldn’t handle video backgrounds, but now designers are able to mine HD video’s full potential.

BrindisaTapasKitchens.com

The benefits of HD video are the same as the benefits of film itself. If you’d like to explore a cinematic background, consider these 5 tips:

1. Between 10-30 second loops – Aim for this range to keep loading times down and hold your users attention, all without sacrificing coherence.
2. Sound off(!) – Automatic sound can be an annoyance, so set the default to off with the option to turn it on.
3. Minimize loading – The biggest drawback of HD video is loading time, so minimize this as much as possible. Your video will be worthless if your users get bored and leave before it loads.
4. Backup for devices that can’t render video – Set a backup for devices where your video can’t be rendered – Google Analytics will show you which devices your site is used on most.
5. Quality – Don’t forget the advantage of HD is how good it looks, so select the best possible quality, whether filming it yourself or using stock.

Simply having a video clip in the background is not enough. Respect the medium and draw on decades of film theory to maximize the gains of HD video.

3. Animations

Somewhere between images and video are animations, sharing elements of both. While the principles of animation remain the same, what’s different is the quality introduced by HD.

mMdeByFieldWork.com

The biggest concern here is transitions, which should be as seamless and unnoticeable as possible. Whether your animations are looped or triggered by interaction, they should have an organic feel that doesn’t draw attention to itself. This is more important in HD, as flaws or loading stutters are harder to ignore.

acnplwgl.com

For HD animation, remember these 5 best practices:

1. Keep it simple – The limitless potential of animation makes it easy to go overboard. Don’t convolute your site with unnecessary complications.
2. Connect animations to the interface – Using signifiers like key colors or suggestive cues, you can use animations to show functionality and add emphasis.
3. Vectors – Use scalable image formats so you don’t have to worry about animations performing on different screens or resolutions.
4. Use the rules of video – Think of animation as an extension of video, so the same rules apply.
5. Design for target audience – Different animations styles suit different types of users, so use the one that hits your target audience.

Animation has a lot of practical benefits as well as visual. The addition of HD only enhances its value.

The post Popular High Definition Web Design Tactics for 2016 appeared first on Speckyboy Design Magazine.

As sight-based creatures, we process visual data much better than any other input method (a lot better, as David McCandless explains in this TED talk). This should explain the emphasis on photos in web design, and not on blocks of text.

Today I’ll discuss seven of the best strategies for taking advantage of photos in web interfaces.

Hero Images

Full or large-screen images immediately capture the user’s attention. One of the latest homepage image techniques is the hero header – full-screen images overlaid by text and navigation options.

A stellar photograph is a great way to start the experience and set the right tone. Cookiesound, above, uses oversized images and simple sans-serif typography for a more custom look and feel. Since the site is a travel blog, the HD photos paired with catchy headlines immediately draws you into the narrative.

When using hero images, follow these general guidelines:

• Typography – Your picture will be the central focus, so your text should be brief but punchy. It has to compete against a much more stimulating visual, so a strong typeface and treatment always helps. Experiment with tasteful typefaces and different treatments (bold is always a safe default).
• Position of Text – Keep the photograph’s natural flow in mind when positioning the text over it. The center may seem like the logical choice, but this could ruin the impact of some photographs.
• Ghost Buttons – See-through buttons impede the image far less than other options, so they’re best for letting the image shine.
• Responsive Design – Make sure your photo looks the same or similar regardless of screen-size. That’s a big concern with hero images.

As in Web Design Trends 2016, a hero photo can make the strongest first impression on the user. Carefully select the HD photo, then decide your typographic treatment based on the aesthetic and composition.

2. Objects in Reality

Especially popular with retail sites, showing items in their actual environments have been proven to boost conversion rates. These allow to users to more easily imagine how the product or service could fit into their own life. (One thing you might want to avoid – the overused “desk and computer” image made popular by online marketplaces.)

As you can see from the example of Fino Par above, the “reality” photos are a common strategy for the food industry (because the photos make people hungry). The setting of the restaurant shows the table, atmosphere, drinks, and people – though not faces, as they would be distracting. This makes the meal look far more appetizing than simply a picture of the food because the users can place themselves in the scene.

Photos which depict realistic objects also add texture without running the risk of skeumorphic tackiness. As described in Flat Design Trends Present & Future, this technique is perfect for adding more warmth to a flat-inspired interface. As an alternative to adding texture to a background, try using an HD photo that provides a textured look and feel.

3. Black and White

Not every image must be in full color to create a memorable impact. As talked about in Web Design for the Human Eye, black and white images offer an inherent sense of sophistication and professionalism.

Goltz Group mixes black and white photography featuring their products – photo frames – with colored text overlays. The contrast helps draw the user even more into the photo slider on the homepage, while drawing out the select text (including the call-to-action).

For more stunning examples, check out this gallery of black and white photographs.

4. Color Overlays

Just like black and white images, color overlays are effective because they differentiate the picture from the user interface elements (such as text, navigation or call to action buttons).

This technique usually makes the header text the most visible while retaining the richness of a color background. Because it adapts to any brand and color scheme, color overlays are more generally applicable than black and white images (which usually require adjusting the entire site’s color palette to match).

Knuckles Industries creates a sophisticated aesthetic similar to the effects of black and white using an additional color cast to support a unique visual hierarchy. The rich tinted background photo entices the eye to wander to the bold headlines, which are even more impactful thanks to their mix of colors and alternation between decorative and straightforward typefaces.

Their application of the color overlay accents the raw yet refined feel for the metal fabrication shop. The vintage visual treatment makes a lot of sense since it immerses the user in the era of an old-world craftsmanship and industrial muscle.

Because implementing color overlays can get tricky, try reading these tutorials for CSS and for Photoshop.

Smaller Custom Images

Almost as popular as full-screen images are collages of smaller images. This layout showcases more products and their use cases, plus can add visual intrigue when animated with the motion of a slider (sliders aren’t appropriate for all scenarios, however).

The Portrait Machine (above) uses a slider to showcase a variety of images featuring their product. Each image has a slightly different mood and features people of various age groups in a snapshot-style. This serves the practical purpose of explaining the diversity of their business, across different ages and events. A single photograph could not establish this range.

This photography technique goes hand-in-hand with the cards UI pattern. The cards pattern is growing in popularity thanks to its effectiveness in responsive design and mobile screens, and this layout is completely dependent on a screen of multiple small images. For guidelines and advice on implementing the card pattern, check out the free ebook Cards & Minimalism.

Custom Typography and Words

Nothing says unique more than pairing a custom photo with custom typography. The tradeoff, of course, is time and effort. With the web being so crowded, the investment can certainly pay off in terms of creating a long-term identity that’s hard to replicate.

For example, Metaverse Mod Squad (above) takes custom to the next level. First, notice that the vehicle and rider on the right side have been stylized with the bullseye logo. Then look at the text. The decorative typeface for the “WE ARE MODS” headline also adds to the youthful mood of the scene.

Photo Manipulation

Just as the Metaverse Mod Squad modified their photo to insert their logo, any photo can be modified in a program like Photoshop to better fit your brand. Common photo editing entails:

• Resizing individual elements.
• Color overlays.
• Inserting/deleting objects.
• Photo Effects (blur, negative, etc.).

Moreover, in the right hands, photo-editing software becomes a new medium in itself. You can use it to create some unforgettable images that untouched photos can’t match.

Playing up their creativity, the animation and interaction studio Legwork shows off their skills by using photo manipulations. While this extremism wouldn’t work so well for more professional companies like law firms, it can be just the thing for displaying your unique personality.

Custom photography, regardless of use, is a design technique that always makes a site perfectly yours. Images should be sharp, focused and of high quality. They should represent your brand, voice and style. If you don’t have a library of photos to work with, get out and start shooting a few pictures on your own as you envision what you might want, and then recruit a photographer to help you create the perfect custom photo set.

The post The Seven Best Strategies For Using Photos in Web Interfaces appeared first on Speckyboy Design Magazine.

In order to narrow down which patterns will work best for you, I recommend a four-step process:

1. Identify your site’s problems.
2. Research which patterns other sites use to solve the problem.
3. Examine how other sites use these patterns
4. Dissect the patterns and choose the elements right for you.

By taking a problem-oriented approach to selecting UI patterns, you prevent yourself from choosing a layout simply because it’s the hip thing to do. While many UI patterns deserve their popularity, you should never base your web designs simply on what’s trending.

Think about how you can help users better accomplish certain goals on your site, then start digging into the most effective patterns.

A Step by Step Practical Framework

Let’s see the process at work with an example: you notice that a lot of your users aren’t signing in when browsing your site.

1. Identify your site’s problems:
Because the users are still coming to your page and spending an appropriate amount of time there, you can deduce that the problem stems from the login and signup processes. The solution, then, would be a way to simplify both processes so that your users don’t mind doing them.

2. Research which patterns other sites use to solve the problem:
You decide to do a little detective work and visit some popular sites similar to yours. Some use a lazy signup, but that doesn’t solve your problem of enticing your users to signup or login. Some others use incentives like extra features or more content, but that doesn’t fit in with the style of your particular site.

Finally, you notice that some sites use a social login, which allows them to login or signup with their pre-existing social media accounts. This sounds like a good solution for your problem and fits the site’s easygoing style.

Source: Jukely.

(Notice that lazy signup, signup incentives, and social login are all different patterns. Which you choose will depend on your site’s specific needs.)

3. Examine how other sites use these patterns:
You take a deeper look at big sites like Spotify, Pinterest, Wunderlist and see how they utilize the social login. You even check sites unrelated to yours to see how they handle the pattern, just in case they inspire you.

Source: Wunderlist.

4. Dissect the patterns and choose the elements right for you:
You notice that different sites offer different social media outlets like Twitter, Google, or LinkedIn – but every site includes Facebook. Sometimes the options are spelled out with text (“Sign up with Facebook”) while other times they just have the social media’s icon situated nearby the login form so you know its purpose.

Remembering the Gestalt principle about how proximity suggests function (which you can learn about in Web UI Design for the Human Eye), you decide only a button with an icon is enough – after all, social login is a popular pattern and your users will likely know these buttons mean they can login with their social media accounts. You decide to include Facebook, Twitter, and Google because those were the most frequent on the sites you checked, and you put Facebook in the top position as the most popular option.

Once you’ve found an effective UI pattern, don’t feel too attached. While UI patterns are great for consistency, you don’t want to be stuck in your local maximum. For example, you might be designing a viral content site and decide that infinite scroll is the best way to make all your content accessible. After all, you’ve seen plenty of other sites use it to great success.

While infinite scroll may produce a better experience than forcing users to click “Next Page” every ten entries, it may not be the best solution. You can only determine that through free-minded brainstorming, wireframing, prototyping, and testing.

Treat UI patterns as a “safe zone” for consistency, then venture outside it one creative step at a time. Know the patterns, respect the patterns, but start your design with a fresh outlook each time. That will ensure your design remains familiar, but still has room to blossom into something new.

My Favorite UI Pattern Libraries & Resources

Because no one person can keep track of every pattern available, it helps to check in with pattern libraries from time to time. These resources collect and compile the most useful patterns available, and organize them for quick reference.

• UI Patterns – A very popular pattern library run by designer Anders Toxboe featuring excellent explanations and hand-picked visual examples.
• Pattern Tap – Fantastic collection of design patterns run by the designer community from acclaimed design agency ZURB.
• Patternry – A subscription-based app of UI patterns for CSS and HTML. Allows customization.
• Capptivate – Mostly animated patterns show the layered interactions for mobile UI patterns.
• Web UI Design Patterns – Free e-book compiling 63 of the most effective web UI patterns along with their use cases. 
• UseYourInterface – Uses GIFs for more comprehensive browsing of mobile UI patterns.
• Inspired UI – Pattern library for Android, iPhone, and iPad that’s very easy to use thanks to the simple dropdown menu.
• pttrns – A cleanly organized pattern library that catalogues the hottest mobile UI patterns from 2012 to the present day.
• Mobile UI Design Patterns – The companion piece to our compilation of web patterns, this ebook features 46 of the most successful UI patterns for mobile devices along with detailed explanations of use cases.
• Site Inspire – While this is more of a traditional web design inspiration gallery, it is an excellent resource for making your own UI patterns more unique. The categorization feature is simple to use, and all the examples are visually stunning and highly usable.

If you’d like to explore even more pattern libraries, Smashing Magazine created this list of over 40 of their favorites.

Conclusion

Good design makes your users happy and eager-to-return, gives a feeling of familiarity, and can be used mostly by intuition. But these seemingly natural aspects are anything but – they must be crafted with effort and know-how to give them that “natural” feeling. Patterns are the tool to this ends, and knowing how to use them is knowing how to create the illusion of “natural.”

The post How to Choose the Right UI Patterns for Your Web Design appeared first on Speckyboy Design Magazine.