Autumn is upon us, and it might be time for you to take cue from the trees by shedding the old to make way for the new. This year has been a big one for web design with the rise of the mobile web, an emphasis on usability, and the increasing use of multimedia on websites. Here are some web design trends to keep in mind this fall whether you’re just making a few tweaks, or doing a full overhaul of your website.
Simplicity of Design
Many a dollar has gone into creating eye-catching websites over the years. Now the trend has gone toward simplistic design that offers an optimum user experience. Minimalist websites are not only easier to use, but they also load faster and better support embedded multimedia content. Advances in HTML5 and CSS3 make it more feasible than ever to create designs that are both appealing and functional.
Responsive Design
Mashable dubbed 2013 as the year of responsive design, and the trend toward responsive web design will continue on into the latter part of the year. Responsive web design utilizes HTML attributes to make websites “flexible” and able to adapt to a variety of devices. The popularity of responsive design came about due to a dramatic shift in web consumption habits. Analyst Mary Meeker, a partner at investment firm KCPB, predicted earlier in the year that mobile internet would overtake desktop internet by 2014. In this age of the mobile web, smart web designers are using responsive design more than ever.
App-Like Interfaces
Seeing as the mobile web has skyrocketed in popularity, it’s only natural that desktop versions of websites would begin to mimic app interfaces. This creates continuity between both the mobile and desktop user experience. Desktop interfaces that mimic mobile apps naturally lend themselves well to responsive design projects, so expect to see more of this trend in the coming months.
Page Transparency
One of the new developments in CSS3 is the ability to adjust the opacity of page elements, which makes for a pretty cool effect. This feature comes in handy when you want to apply transparency without having to combine elements into a single image.
Javascript
In the quest to make websites even more device agnostic, web designers are increasingly opting to use HTML and Javascript/JQuery instead of Flash, which isn’t as flexible. You can do quite a few cool tricks with Javascript. Some trends for this year include:
- Parallax Scrolling: Parallax scrolling is quite trendy in 2013. It’s when the position of an object or objects on the page are relative to the page’s scroll position. Parallax comes from the Greek word for “change.” A good example is the WordPress Balloons theme, or the website of purse company Bagigia. Parallax scrolling gives the illusion of depth, and can also be used to create a fluid scrolling experience for storytelling websites.
- Infinite Scrolling: Infinite scrolling is when the page’s contents automatically load when you get to the bottom of the page. The user doesn’t have to click on anything or reload the page. You might have seen examples of infinite scrolling on your Facebook page or Pinterest boards.
- Sliding Panels: Sliding web page panels are a way for web pages to transition with a sliding panel animation, which is a pretty cool break from the ordinary. You can also use sliding panels to draw attention to a feature within the web page.
Uses for Javascript aren’t limited to just these. It solves the problems that Flash has with accessibility and SEO, and so it’s become a popular alternative for designing website animations.
Typography
Gone are the days when web designers only had a precious few choices when it came to fonts that show up well on a screen. Today, graphic designers and companies like Adobe have created vast libraries of fonts that render well on any screen. Expect them to become more expressive and larger as screen resolutions have greatly improved to display them. You can also expect to see more creative uses of fonts, including different typeface combinations.
Retina Support
Speaking of screen resolutions, you can’t really talk about it these days without mention retina display. Apple first popularized this feature with its iPhone 4, and has since integrated it into more of their products. The trend is now moving toward pixel-dense displays. Web designers can accommodate this by creating responsive images: One set meant for regular screens, and one set at double the resolution that will show up well on retina displays. For a better idea of how to accomplish this, see Lee Munroe’s article 5 Things I Learned Designing for High-Resolution retina displays.
Single Page Websites
This continues to be a popular trend in 2013 for simple sites such as landing pages and mobile apps. A single page website can help reduce load times. Be aware that this format won’t serve you well if you have a ton of content. For some great single page inspiration, see One Page Love and One Page Mania.
Large Photos as Backgrounds
This trend isn’t just for photography portfolios anymore. Because of improved screen resolution on computers and devices, large background images have become a popular choice among web designers who want to make a great impression (and that’s pretty much all of them).
Fixed Header Bars
Fixed headers are incredibly practical and make for a better user experience. Much like a frozen row in a spreadsheet, a fixed header will remain at the top of the page no matter how far down you scroll. This page element is also easy to create. Just use the line “header {position:} fixed” in your CSS and voila!
As you can see, the main trends of web design in 2013 all point toward a better, not necessarily a more impressive, user experience. After all, ease of use and helpfulness are more likely to attract users to a website than bells and whistles. Consider implementing a few of these trends on your website to bring it up to speed this fall.
