When I was in school (pre-2005), we focused on how to make the web pretty. The 1990s and early 2000s left the web with a massive collection of static electronic brochures in desperate need of a facelift. It wasn’t pretty; we knew that then, and it certainly is even harder to look back at what we did then. But we, newly minted web designers, were here to help.
The web started getting some “real” character and personality with the help skeuomorphism afforded to us through CSS3 elements. Even if you’re unfamiliar with the term skeuomorphism, I’m sure you’ll recognize the practice. Skeuomorphism takes advantage of pre-existing knowledge by making online elements resemble their physical counterparts to deliberately make them look familiar. Our designs mimicked paper, watercolor, wood and other textures to give you that feeling like the web was a “real” space. We used bevels, gloss, sheen, reflections, gradients and drop shadows (sometimes all at once) on buttons so they appeared three-dimensional, tactile and usable, allowing users to quickly make the connection that they were clickable.
This aesthetic was essential in the transition from the text hyperlink-only world to the use of button links and fancier navigation systems. But as users became familiar enough with these new patterns, we found that the metaphors no longer needed to be as obvious. Bringing us to the next trend, flat design. By 2013, big players like Apple were officially abandoning their skeuomorphic ways.
In its place, designers fell in love with flat design. It’s like we wanted to rebel against the overuse of skeuomorphism and went completely to the opposite end of the spectrum. Flat design offers a very calming and friendly aesthetic, which contrasts some of the previous design trends that were very stark, hectic or forced. Oh, the simplification. Every element is boiled down to its most basic version, with a focus on hierarchy of information and layout.
The flat design trend quickly gained popularity after Apple’s IOS7 release. It is simple, clean, colorful, modern and trendy. But it also presents a challenge in maintaining branding and the individuality of your brand aesthetic. Sometimes it can become unclear what is clickable, and if not well executed, it can lead to a boring visual aesthetic, lacking in personality.
By 2015, flat design has morphed away from an all-or-nothing practice. Many of the sites that you might think of as straight flat design are really a hybrid approach using subtle textures, background images, long shadows and ghost buttons along with the typical simple typography, bright color palettes and minimalism. Designers are utilizing flat design’s components to complement and merge with other methods, allowing for designs with personality and individual branding but still maintaining a focus on UX and visual hierarchy.
For years, I refused to get on the smart phone bandwagon. I didn’t want to be connected 24/7. I should have stuck with my gut. Now I’m one of the masses, checking my phone first thing out of bed, looking for updates on email or Facebook every 15 minutes, needing to feed the technologically over-connected addiction. Seriously, I downloaded an app recently to track my usage to keep me in check.
During my currently averaging 1.5 hours of daily personal onlining (I know, not bad really), I research everything. If you don’t have a website, you just don’t exist in my world. If your product doesn’t have good online reviews, I’m certainly not going to buy it. And if your contact information is not on Google or your site, I will never be able to call you — I’m talking to you, brand new pizza place that I wanted to place a take out order with. I hear your meat lovers is amazing, but I guess I’ll never know.
Let’s take a trip back to 2008 — mobile access to the internet exceeded desktop access for the first time in history. In a May 2010 article in A List Apart, Ethan Marcotte coined the term “responsive web design” (RWD). And on October 1, 2009, Marketing Mojo received the very first mobile visit to our website homepage, but it wasn’t until 2011 that we’d see mobile traffic to our website reach even close to 4%.
After that, though, it seems the flood gates opened wide, and by 2012, we were receiving 275% more mobile and tablet traffic. With a solid 15% mobile audience, it was time to get mobile-friendly or risk losing those leads and users.
At that same time, folks were writing articles titled “Hot Right Now – Responsive Design” and “5 Reasons Why Responsive Design Is Not Worth It.” So when future-proofing our website, we could not rely on the all wise and knowing internet for solidarity in their mobile strategy guidance. Create an app, a separate mobile website or go responsive? There are pros and cons for each, but our obvious choice was to go responsive. And by September 2012, our website was fully responsive.
Now that was a fun project. I got to learn ALL the brand new principles of responsive design that basically required completely unlearning the way I learned to code any/every website ever. Percentages and viewports, what?
And boy were we happy when Google officially announced their preference of responsive websites over separate m. mobile sites in their April 21, 2015, Mobile algorithm update. Future-proof website success!
So with all this change in design aesthetics, it’s interesting to look at a 2005 documentand see that the basic principles of web design really remain the same.
Establish the type of content you need to support your website objectives. Ensure that you know the audience you are trying to reach. “Try and understand what they will want when they come to your site, how you can initially attract them, what will encourage them to return, and what type of computer and connection speed they are likely to have.” We just have a fancier name for audience now: personas, and they are still underutilized.
Diagram and wireframe how you will present your website content and navigation. Today, you should also have a content creation, curation and update plan and calendar. Google loves fresh content and most likely so do your users.
Despite my only wish as a designer is to have one browser to take into consideration, you still have to design and develop webpages that can be displayed by many different browsers, and today, there are even more browsers to contend with than ever before. Common browsers from 2005 include: Microsoft Internet Explorer (although, thank the good lord that IE is on its way out), Mozilla Firefox, Safari and Google Chrome. Those remain and have been joined by their mobile counterparts as well as previous versions (could everyone just please use the most current version).
And every single browser displays code a little differently, making browser testing so very important.
In 2005, we were designing for 1024 x 768 pixels screens. Now, the most common screen resolution is 1366 × 768 pixels. Since we’re all designing mobile-first responsive websites now (right?), this a is less important consideration until you get to max design view on desktop. It may almost be more important to consider your smallest screen size and start designing for that first (ahem…mobile-first, der).
In March 2005, only 30% of all adults had high-speed internet at home. Making page speed an essential consideration. Today, only 30% do not have access to high-speed internet. But with 11.3% of adults accessing the internet via mobile only, page speed considerations are just as important as ever.
Adam just covered the web development angle, so he said it better. The same web technology still prevent users and search engines from viewing your site, these include:
…so don’t use ‘em or make sure you use ‘em right.
Accessibility will always be an important consideration, and you should take advantage of the great technology built directly into browsers now.
Maintain a visual consistency on every page. This includes the placement of navigation and logo on each page, as well as using fonts and colors constantly throughout the website. Use of a template greatly assists you in this practice.
Don’t be afraid to use white space or blank areas in your website design. Good use of white space can help define areas of your page and be used to structure and separate content. A lack of white space can give the impression that the page has too much content and confuse the user.
The brand identity of your business should be reinforced by your website. Consistent use of your company logo throughout the site will help in this and should be viewed as an element of your overall marketing strategy.
The key to designing a successful website is understanding the needs, interests and demographics of your audience and reflecting these in your design.
UI and UX are all the buzz nowadays, but they have always been important. They just may have been executed a little differently in past years. But information hierarchy, scannable text and a focus on legibility and contrast never goes out of style. ReadIncrease Conversions by Creating the Best User Experience Ever for more on good UX recommendations for 2015.
Don’t make your users navigate through too many layers of the site to find the information they want. Provide prominent navigation aids so the user can quickly find the information they need. A standard navigation bar that is in the same place on every page enables the user to move quickly through the site.
One typography principle remains the same: Make sure hyperlinks look like links, not just styled the same as other text.
But one awesome thing about typography that has changed is the restriction of fonts available (the web was so boring with the use of only traditional “web safe” fonts). If you specified a font that a user did not have loaded on their machine in 2005, their browser would substitute a default font, changing the look of the page. Today, we have so many resources to load almost any font within your imagination. Thank you Google Fonts and magic @font-face CSS3.
So, if the past is so similar to the present in theory but not necessarily in practice, where will the future take us?
What are your best lessons learned in web design? Comment below or holler at me on Twitter @JennyKnizner.