Wednesday, 27 January 2016

8 more predictions for web design in 2016

2015 witnessed a lot of changes and innovations, but 2016 has a lot more in store. With more people accessing the Internet via mobile devices than desktop computers, a sharp and continued decline in human attention span, and web users becoming increasingly impatient, the web design community is in for a treat this year.

If you are a web designer, or even if you have a website, you should pay attention to the following trends in 2016:

1. User-centered design

Research from Nielsen Norman Group shows that the average user spends 10 – 20 seconds on a web page before leaving, and that the only way to improve this is by having a clear value proposition. Interestingly, this also agrees with Google’s position when they released their Search Quality Rating Guidelines late 2015; one of the highlights of Google’s Quality Guidelines is that having content front and center is now a big deal: essentially, content that is placed above the fold will be ranked better than content that is hidden below ads, forms and other elements.

As we can see, whether it is in terms of users’ response or search engine algorithms, the importance of a user-centered design has never been clearer; in 2016, only websites with a user-centered design will thrive.

2. Expect to see more of Material Design

Material Design was initially announced by Google in 2014, as a design language that uses shadow effects, responsive animations and grid-based layouts to create a realistic design with a focus on UX.

For a very long time, adoption of Material Design has been limited to app design until Google announced Material Design Lite (MDL) in 2015; the aim was to make it easy to add a material design look and feel to your website.

Because of its focus on creating a minimal and realistic look, while still ensuring websites are fast and responsive, you can expect to see more of Material Design in 2016.

3. More of single page design

There’s so much clutter online today, which doesn’t seem to be dying anytime soon, and this has given rise to the popularity of minimalist designs; when we consider decreasing attention spans, increasingly impatient web users and a renewed desire for instant gratification, single page designs will gain more attention this year.

People no longer want to scroll through multiple pages, and many websites are keying into this by having a single-page design; a notable example is the World Food Clock website.

Single page designs work both in terms of UX and conversion, so you can expect to see more of single page designs in 2016.

4. Modular Design will become increasingly prominent

The average media site publishes dozens of articles every day, and content-rich sites have always struggled with organization; Modular Design solves the problem of clutter by making content more presentable using a block grid pattern.

Modular Design showcases more content while avoiding clutter, so you can expect to see more sites, especially media sites, jump on the bandwagon this year. A good example of a major publication that uses modular design is The Next Web.

5. SVG

Scalable Vector Graphics (SVG) became more prominent in 2015; even Google redesigned its logo to a cleaner, smaller SVG file. SVG is becoming more mainstream because it presents graphics as vectors that can scale irrespective of the resolution of the device they’re viewed on. It also makes it easy to create animated and interactive graphics, a feature that is becoming more important in an increasingly visual world.

The fact that pretty much every browser now supports SVG will further help its adoption, so expect to see SVG go mainstream in 2016.

6. Responsive web design

Okay, so responsive web design has been a trend for at least a few years now, but even more so in 2016!

For a long time, website owners have known of the power of responsive web design but they haven’t taken it as seriously until now; a major force in the increased adoption of responsive web design was the “Google Mobilegeddon” in 2015. Basically, this was Google’s attempt to ensure that websites adapt to mobile best practices, when it began to penalize websites that were not mobile-friendly. Many established sites suffered major loss, and they had to choose between having a mobile site/theme and going with a responsive design. This trend will continue in 2016, and you can expect to see more of responsive designs.

7. Widespread adoption of micro-interactions

Micro-interactions are contained product moments that revolve around a single use case. Web users encounter micro-interactions every day; when you update your status, or ‘like’ something, you are engaging with micro-interactions. Micro-interactions can create a better experience for users by enhancing their experience on a site, and its one more trend we can expect to see more of in 2016.

8. Speed is no longer a luxury; it’s a necessity!

In 2016, more than ever before, speed will play a major role: brands that ignore speed will suffer severely, as people are becoming increasingly impatient. This is very important for both website owners and designers.

A Microsoft study conducted in 2015, which studied 2112 people, revealed that our attention span has decreased massively over the years; from an attention span of 12 seconds in the year 2000, we now have an attention span of 8 seconds.

For a very long time, speed and usability have always gone hand in hand and this is becoming increasingly pronounced in 2016; research shows that slow websites cost the U.S. economy over $500 billion annually, and that 40% of people will abandon a website that takes longer than 3 seconds to load. Speed is a core part of design, and it’s a force website owners have to reckon with in 2016.

Featured image, web design image via Shutterstock.

84 PSD Mockups for Book Covers and Apple Products from iPhone to Macbooks – only $27!

Source

si pide pass es: John Stevens

Tuesday, 26 January 2016

Sketch 3.5 unleashed

Sketch aficionados will be excited to learn that there’s an update to their favorite app awaiting them. Today makers of Sketch, Bohemian Coding, announced the availability of Sketch 3.5.

Although the update is a minor release covering bug fixes and GUI enhancements—no enticing new features have been added—it is evidence of the tool’s growing maturity and Bohemian Coding’s commitment to perfecting the existing codebase before introducing new toys.

Most importantly, some of the bugs that leave many professional designers wary of Sketch have been resolved: images won’t be lost in between saving a document and reopening it, and you won’t have to keep deselecting the export size field before its value is applied to the export.

How Sketch (mis)handles typography is a key obstacle for many designers considering trialling the app for professional work, so it’s great to see some improvements on that front, most notably that line height now scales correctly along with text layers, and the list of fonts in a document now includes the fonts on every page.

Further useful additions include: artboard refinements; improved performance and rendering for complex operations; subpixel anti-aliasing deprecation; dragging a shape onto another shape in the layers list now triggers a union operation; and a new shortcut has been added for aligning layers to the pixel edge.

The first update since Sketch deserted the Mac App Store, the update is free, but you will need to transition your license in order to enjoy the new features, and bug-fixes. (To transition your license, you need to download Sketch direct from Bohemian Coding, open it, and then enter the email address associated with your App Store account. Bohemian Coding will then send you your license.) Sketch files aren’t backwards compatible, so if you’re working with others, make sure your whole team upgrades at once.

57 Display Fonts, 230 Textures & 100s of Design Extras – only $29!

Source

si pide pass es: Benjie Moss

Illustrating the Web: deconstructing the trend

Illustrations are taking over the Web. Designers are creating websites with everything from full-screen illustrations to hand-drawn divots that are used throughout projects. It’s a trend that’s likely to keep growing because illustrations make a design feel custom (even if it’s not).

Here’s how to make the most of them in your design.

Website illustration 101

Illustrations are a versatile and fun way to create a custom website design. From hand drawn images, to elements, to lettering, everything about a fully-illustrated or sketched image, looks and feels one of a kind. That’s one of the reasons it is so popular.

But there are plenty of other reasons designers are jumping on the illustration trend:

Illustrations allow users to picture themselves in the scene you are setting because it does not focus on actual other people.
There’s an element of whimsy that can only be accomplished with a drawing.
Illustrations can mesh reality and imagination for a design that is extraordinary.
Customization is easy when you are drawing the art elements.
Illustrations are often quite colorful and can help you take advantage of the big, bright color trend.
The technique is usable even if you aren’t an illustrator thanks to design kits or packs that are full of illustrated parts that can be used throughout a project.
Illustrations can take on many different moods or styles, from sketches to elaborate drawings to computer-generated graphics.

Hero-style illustrations

Because hero headers are big, this is one of the easiest places to see the illustration trend. It’s also being used for a large number of sites from portfolios to retail to app preview pages.

What’s nice about an illustrated hero image is that there’s enough room for a quite complex piece of artwork. Small details, shading and color and interactions all have room to breathe, making it easier for users to explore each element.

There are a few tricks to all this complex illustrating:

The artwork has to be good. Users aren’t going to spend any time looking at an illustration that they don’t get or is just a sloppy mess. So take time and care with it.
While the illustration may have depths of complexity, the overall message should be simple. Know what the image is supposed to say and make sure the elements contribute to the message.
Work with a professional. Just because you can draw hearts on a napkin does not mean you are ready to draw a full-scale website illustration. This process takes time and planning to really work. (And it can be expensive, so make sure this is the right aesthetic before you dive in.)

Add simple animation

While a static drawing can have a lot of impact on its own, the Web is alive with movement these days. Pair an illustration with subtle animations or scroll effects to encourage users to click around.

Small subtle movements, such as the spinning text in the website for The Hugo, helps draw the eye into the design. Small animations can also help users understand what actions to perform while visiting a site. This can be especially true for illustrations that include a lot of elements or have an overall “busy” design.

These little surprises can encourage site visitors to linger and look around as well. Hover animations are a particularly nice bonus for users that can serve both as a fun element and navigational tool.

Illustrated icons or UI elements

If an all-out illustrated website design is not your thing, consider a few illustrated icons or user interface elements. This is a simple way to ease into the trend. (And there are plenty of icon and UI kits out there that feature illustrated styles to help you get started.)

Illustrated elements can add a touch of whimsy to a site that might otherwise feel too formal. Something to try is an illustrated outline icon. This style is easy to drop in almost any design, works great with images and any color scheme, and provides a consistent visual theme from page to page.

If you want to go a step beyond icons, think oversized UI elements. Iqor, uses illustrated buttons in larger sizes to guide users and make the site a little more fun. The illustrated style flows from page to page with large elements using the same three pops of color. The result is fun and consistent and just a little bit unexpected from the customer care business.

Hand-drawn lettering

Another big trend in website design is custom typography. Combine the concepts of illustration and lettering for a hand-drawn logo, main text block or typographic art element. This text-based visual can have a big impact (especially when it is oversized or used as the main art element in the design).

The trick here is moderation. With the hand-drawn lettering style, you’ll want to stick to a single block of text or text element for this effect. Multiple uses of a custom text block can be overwhelming for users and can impact readability. It’s important to make sure that words are still quite clear and that users have no trouble understanding the message.

Both Day of the Dead and Stand Up to Cancer, do a great job with hand-lettering for a simple message. Day of the Dead uses other illustrations, easy sans serif typography and photos to help pull users through the rest of the site. The end result is fun and easy to follow. Stand up to Cancer uses more of a watercolor style that is all illustration based, but relies on more standard typefaces for readability. Both are good options for working with custom-style lettering.

Conclusion

While breaking into the world of illustration for website design projects might seem a little intimidating at first, it is something that many designers can do. From drawing by hand to having computer assistance or working with a kit, the options are pretty limitless.

It’s something to think about when it comes to those projects that demand doing something a little different. And it’s trendy enough that you might get asked about creating something in this style. So this is a good time to freshen up your sketching skills and think about ways an illustrated website design framework could work for you.

57 Display Fonts, 230 Textures & 100s of Design Extras – only $29!

Source

si pide pass es: Carrie Cousins

Monday, 25 January 2016

Essential navigation patterns in 2016

Your navigation menu makes or breaks your website’s UX, which is what you should be primarily designing for at all times. There’s no better service you can provide your clients as a designer than to ensure that the sites you build for them boast a stunning and highly functional user experience.

A splendid UX guarantees that your clients’ sites get more leads, visitors and readers, not to mention retain regular visitors. It is the most important part of creating a site, and you have great control over it based on how you design your site’s navigation menu.

Unfortunately, not all designers place a high priority on designing for excellent navigation, which does a disservice to clients, and visitors.

To create a very credible reputation as a designer—and to be an in-demand designer—you have to master one of the most basic aspects of web design. That’s creating stellar navigation for your clients’ sites.

Here’s how.

Sticky navigation

Sticky navigation is an essential component of navigation since it empowers your users to instantly access the menu and easily find what they want on your site. Sticky navigation stays locked in place as users scroll down a page. There’s nothing more frustrating—especially in the case of long-scrolling pages—than to have to scroll all the way up again to navigate to another page on the site.

Remember that, on the Web, speed is everything (loading pages, finding desired content, etc.) so allowing users to access the navigation menu more quickly is a best practice.

By including a sticky navigation bar, you’re also helping to reduce cognitive load on your users by constantly putting their navigation choices right in front of them.

Alternative Press features a good example of how to incorporate sticky navigation into your pages. Note how all the most important sections are easily accessible and identifiable, by effective color contrast, in the navigation bar, no matter how far you scroll down the page.

Obvious hypertext

Hypertext is any text reference on your pages that users can click on to get additional info, usually on another page, whether it’s on the same site or off-site. Hyperlinks are probably the most identifiable example of hypertext.

Since hypertext contains information that’s going to help the user experience by providing more information, it only stands to reason that such helpful references are made very noticeable. Overall, this adds to the navigability of the site you build.

I recommend making hypertext blatant by two, simple, design features:

Underlining
Changing the color

When you underline any word on your page content—let’s say it’s a hyperlink to your client’s about page—it immediately draws the attention of site visitors, which helps them navigate to important information with greater ease.

Similarly, when you make the color of hyperlinks different than the text and background of your pages, you again, make it stand out on the page, so users can easily identify and click on it.

Marketing site The Daily Egg uses both underlining and different colors for its hypertext, making it very easy for users to identify links.

Mega menus

Mega menus are a great idea for navigation, especially if the site you’re designing for your client has a lot of content and categories. eCommerce stores come to mind. These are essentially huge, drop-down panels that open up additional layers of navigation to help your users find specifically what they want more quickly.

Such menus improve the user experience by including benefits like:

elimination of scrolling;
tooltips;
orderly structuring of content by icons, layout or typography.

All told, these features make it a lot easier to use the navigation menu.

For a solid example of a mega menu, head to Food Network’s site. Notice how the flyout menu displays one of the most sought-after pieces of content of the site—the recipes—in an easy-to-see format that lets users immediately choose where they want to go instead of scrolling or pagination for more options.

Pattern and language affordances

A pattern affordance is using a conventional symbol that the majority of site visitors will understand immediately, such as a house icon to represent the homepage of your site. A language affordance is the explicit use of a word, like “home”, to clarify that clicking on that tab will bring users to the homepage of the site.

Affordances communicate to users how they can interact with the elements in your design. While this is certainly Design Basics 101, it’s still as important to practice today as it was in the very early days of the Internet.

A functional navigation menu should have the house symbol or the word “home” positioned on the very first navigation tab on the left. While some designers may instead opt to include a company logo as the “home” icon or button, that still leaves too much room for user error.

eTailer Frame Warehouse demonstrates this design principle to a tee, with its use of “home” to leave no doubt where that tab will take site visitors.

Fast load time

Speed = great user experience. Designers of all stripes should jot that down as one of the most crucial design rules that they simply can’t and shouldn’t relegate. According to Wired Magazine, almost 50% of shoppers want the average page to load in two seconds or less! Put another way, if the pages you design for your clients take longer than two seconds to load…there’s a really good chance that they’ll leave your clients’ sites and never return, thus causing severe conversion nightmares.

This is a worrisome statistic, to be sure, but there’s something designers can do about it to ensure they’re providing high-quality page performance to their clients. Simply test the page speed of pages you design. There are a number of reliable tools to help you determine page load times:

For an example of a very fast page load time, we go to Enchanted Learning’s What Is a Whale? page. The design could use some work, but the page loads in just over one second, according to the Alexa analytics toolbar.

Great navigation is great UX

A huge part of a great user experience is your site’s navigation. It is the foundation on which the entire user experience rests, if you really think about it. When your users can’t find their way around your client’s site with ease, then it becomes frustrating for them, causing them to leave in a hurry. Thus, excellent navigation should make it easy for people to use any site you create; that’s the benchmark of a fine user experience.

While it can be tempting to give the navigation the short shrift in the design stages—because of new design trends popping up all the time—it’s not advisable. Your users will notice, as will your clients. To please your clients, you must please their users. You can only do that when you design for a great user experience first and foremost, with a primary emphasis on getting the navigation right from the get go.

eBook + extras: My Designers is Driving Me Crazy! – up to 66% off!

Source

si pide pass es: Marc Schenker

Sunday, 24 January 2016

Popular design news of the week: January 18, 2016 – January 24, 2016

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.