Web Design Trends 2017

Good web design is crucial for making the right impression

First impressions are important… Presentable clothes, matching accessories, getting to meetings on time – it all matters. It shows people around you that you care.

Online, first impressions matter too. Website visitors make judgements about website credibility in as little as 50 milliseconds, and one in five website visitors will leave your website, not giving you a second chance.

Staying on top of the current trends makes it possible to create a website that will impress your audience, and will hold users attention for the first crucial 10 seconds, and beyond.

So what are the Web Design trends for 2017?

First things first. Web design is not art.

Art expresses feelings, raises questions, provokes emotions. By contrast, design helps people to find answers, take action, or complete a task.

More than ever before, everything in web design, from imagery to navigation, to content, must serve a purpose. Many websites are now decades old, and some have collected huge amounts of clutter along the way. If you are redesigning an existing website, start with a clearout (content audit), and focus on what’s important by mapping key customer journeys. If, on the other hand, you are building a website from scratch, consider wireframes, sitemaps and top tasks as your starting point. Prioritise clarity over absolute completeness.

WWF

New, decluttered WWF homepage.

Persuade with numbers

Numbers project confidence. A web designer that built 60 websites comes across as more competent than the one who has ‘many years experience in the industry’. A company that has offices in 4 countries seems more established than the one with ‘international presence’. Even when the numbers are not very meaningful, being precise and specific still works. Carolyn Mendelsohn, an award winning photographer, owns 321 snow globes. How about that?

Carolyn Mendelsohn

Carolyn Mendlesohn, award-winning photographer and author of widely acclaimed In Between series

Grids, frameworks and pre-made themes

As CSS frameworks and grids mature, more and more coders use them as a basis for their web development work. They allow beginner coders to step up their game and they help digital agencies to streamline their production. Frameworks might sometimes contribute to bloated code but they cut down development time and take care of responsiveness, which makes them a good choice for many digital projects.

In addition to Bootstrap, UIKit and Foundation, which have been around for a while, new front-end development frameworks such as Suzy, Jeet and Breakpoint are also getting traction.

Pre-made themes from EnvatoMarket and TemplateMonster can also be a valid choice. Developers of paid templates tend to respond to customer feedback and continuously iterate their product, so some of the most popular themes have now gone through many improvements, to become what they are today.

Smithsonian

Smithsonian magazine uses Suzy framework which offers on-demand grid.

Flat Colors

Google Material Design was first introduced in 2014. It’s a set of principles and best practices for web designers and mobile app developers. Google Material Design is about going back to basics, focusing on what’s important, but still accounting for multiple resolutions and devices – an over-engineered simplicity, if you like.

Google Material Design with its flat colours isn’t the only approach to web and mobile app design but it continues to be popular and trendy. Fabulous app, Google Material Design Awards winner, is a remarkable example of Google Material Design principles at its best.

Fabulous App

Fabulous is a mobile app that helps you to establish healthy habits.

Authentic images

The overriding rule with regards to choosing effective images for web is that they have to be relevant and genuine. When choosing images, think about the following:

  • Product
    Are product images appropriate and useful? If so, this should be your first choice.
  • People
    Can you use an authentic image to tell a believable story about people using your product and benefitting from it?
  • Quality
    How can you show that your product is of good, or superior, quality? Can you show the craft, the expertise or the materials that make it great?
  • Ethics
    Are you charitable, ethical, organic, green? Does your business give back to the community? Does it make the world a better place?

Overused staged photography will make your website look dated. Choose realistic images that portray real world and real people. Use new perspectives: selfies, feeties, drone and head-on camera pictures and videos. Try full-screen approach, with the image occupying the whole screen.

Chris

Christian Betancourt is e-sports, portrait, landscape, and lifestyle photographer

Video

If a picture can tell a thousand words, then video must be even better, right? Homepage background videos can tell a story behind a product or service within seconds – Evernote, Airbnb and Loyola Marymount University are notable examples. For longer, more sophisticated video stories in web design, have a look at edstafford.org and silenza.it (It’s worth noting that mobile versions of these websites do not display videos.)

Loyola Marymount University

Background video on the Loyola Marymount University’s website

Navigation

Humans can hold between 5 and 9 items in their short term memory. A landline number such as 496 0926 is relatively easy to remember, but something a bit longer like 07700900546 is far more difficult to retain in your memory. That’s why, for a long time, web developers and UX designers strived for a maximum of seven menu items (7±2) in the website navigation. But that’s changing.

The number of visible, main menu navigation items is now reduced to the absolute minimum. Paypal has only three visible items in their primary navigation. Tate have reduced the number of items in the main navigation from 11 to just 3 during their most recent redesign in 2016. Laterooms redesigned it’s homepage in 2015 to focus solely on the booking process.

Tate

Simple, clear navigation on Tate website

Continued influence of the mobile design means that hamburger navigation icon is more popular than ever. The jury is out on the effectiveness of this approach – it’s not just the meaning of the icon, but the size and visibility of the three lonely lines that affect the usability of the hamburger approach. Research and A/B testing seems to show that hamburger lines combined with a MENU label – such as the one on Adobe website – works significantly better than the hamburger icon alone.

Sticky navigation, such as on Pexcard by Rockpool Digital is still popular, and so are mega-menus – Museum of London built by WebCredible is a good example.

Museum of London

Museum of London was redesigned by Webcredible in 2016

Performance and intelligent analytics insight

Average weight of the homepage across the websites reviewed in this article is approximately 3.5MB. With all the high resolution images, interactive scripts, font replacement techniques, webpage performance requires special consideration. “If you can make the site load a second faster, you can drive engagement by 5%” according to Financial Times. Note the use of engagement as website metrics in this quote. Intelligent insight that goes beyond page views and unique visitors is increasingly important for understanding what works and what doesn’t on your website.

Financial Times

The aims of Financial Times redesign are shorter page load times, increased engagement, and better personalization.

The blend of personal and professional space, integrity, ethics

The line between the personal and professional space is not as clear as it was in the past. What we hear about business leaders on Facebook and Twitter, is often less formal and more in-the-moment than press releases and company’s own marketing materials. Integrity, ethics, telling people who you are, not just what you do, is more important than ever before.

Educate and Celebrate

Educate & Celebrate advises schools on LGBT and inclusion best practices.

Conclusion

In summary, modern websites of 2017 will use authentic images and full-width or full-screen layout to portray genuine, passionate, ethical people and products. Primary navigation will be reduced to the very minimum, and other links will be available through the ‘hamburger’ navigation, mega-menus and contextual navigation. Great websites of 2017 will use direct, persuasive language and will use numbers to demonstrate their achievements. Responsiveness, micro interactions and large, bold images continue to dominate the web, but they are only effective if website performance and page load times are reasonable.

Best of luck and have a well designed 2017!

Adobe Creative Cloud is coming to a Web Designer near you

Adobe PhotoshopAdobe Creative Suite – including Photoshop, InDesign and Illustrator – becomes a cloud-based subscription service.

As announced at Adobe MAX, the Creativity Conference, Adobe Creative Suite (CS) will now become a cloud-based service. Starting from June 2013, Adobe CS, which includes Adobe Photoshop, InDesign, Illustrator, Dreamweaver, and Premiere, will be available as a cloud, subscription-based service. This makes CS6 the last version of the Creative Suite – it remains available as a standalone product on a perpetual license basis to existing customers, but is already pulled from the market. The future products will be re-branded as CC instead of CS, to reflect the move to the “Creative Cloud”. This is a bold and controversial move, which only an ultimate leader in creative software like Adobe can risk taking.

The offering is only cloud-based in a sense that internet access will be required at the time(s) of renewal (but not in between). Customers will be able to use the product suite for as long as they keep renewing their monthly subscription. When they stop, the ability to access the product suite, along with the ability to manipulate all previously created files will be lost.

Creative Cloud membership for individuals is currently priced at $49.99 per month based on annual membership (interestingly, it is priced at £46.88 in the UK, which is nearly 50% more expensive based on today’s exchange rate). Existing customers, students, and teachers get discounted pricing of $29.99 per month. Whether this makes Adobe CC services more expensive than your previous investment in Adobe CS depends on your circumstances. Companies and professionals that are using the product suite on a daily basis will probably find the new and old pricing comparable at this point in time, but the mere nature of the cloud-based model implies Adobe’s full and immediate control over product pricing and product roadmap in the future.

Quite clearly, this move leaves occasional users, hobbyists, and students behind. By moving its creative product suite to the cloud, Adobe essentially cuts themselves off from this part of the market and makes a stand to position the company, and its products, as elite, professional software, with a price to match. As a result, young people, small businesses, and potentially even universities will start looking for affordable, “good enough” alternatives.

The cloud-based service model also raises the issue of support and customer service – something that Adobe is yet to prove it can do well. Even though support forums already exist, their importance will become critical once customers lose control over when and how the product upgrades are done. Web Designers and Editors who find themselves stranded by an unwelcome upgrade the night before a go-live date, will no doubt have the highest expectations for effective and immediate support.

Only recently Adobe bundled all the creative software products into a Creative Suite, and re-priced individual product licenses (for Adobe Photoshop, Dreamweaver, and the like) in a way that pushed organizations to buy the full product suite instead of single applications, whether they needed the full package or not. The decision to make Adobe products cloud-bound, once again, leaves customers no choice in the matter and does nothing to respond to customers needs.

The move to Adobe Creative Cloud also lessens the pressure for Adobe to innovate. Perpetual licenses required compelling evidence of added value in each and every new release, but with the move to the cloud, the only incentive to improve the product will have to come from Adobe’s (almost non-existent) competitors. Essentially, in the current market, many of Adobe’s creative products are irreplaceable. Macromedia Fireworks, which was regarded as somewhat less sophisticated alternative for Adobe Photoshop, was acquired by Adobe in 2005 and will not be part of Adobe Creative Cloud. (RIP Fireworks.) Macromedia Homesite, once a leading HTML editor, was acquired by Adobe in 2005, and went into a steady decline before it was eventually discontinued in 2009. QuarkXPress has a significant marketshare in print publishing but remains behind Adobe’s product InDesign. Adobe Illustrator is an industry standard for vector illustrations, with CorelDRAW being an alternative for Windows/PC platform. After Effects has virtually no competition at all. This gives Adobe a unique, powerful market position – an advantage that they need to use wisely.


This blogpost was first published on Digital Clarity Group website in 2013.