We at ECA Technologies have noticed over the past few years have seen a tremendous shift in website building process. More users have switched onto mobile platforms, along with newer browsers which support HTML5/CSS3 web standards. There are so many unique ideas flowing out of the design community – it seems like new thresholds are being replaced every few months!
Many of these design ideas have been around for a long time. But we would argue that over 2013 and going into 2014 these unique ideas will flourish. There are so many open source projects and user interfaces which are offered online completely free for download. This creates an environment where new designers can enter the field and pick up on trends very quickly.
Mobile First Website Building
The idea of responsive design isn’t just limited to full websites scaling down smaller. The ideology surfacing among designers is to start with mobile and build your way up. There is an excellent article published on DesignShack which talks about this very idea.
It is often much easier to plan your most important interface elements first and squeeze each of them into a mobile layout. If they don’t all fit you will have to drop a few. Simultaneously you could plan for how the layout will respond as the window grows larger. You will have room to include a sidebar, possibly 2 sidebars, along with numerous other page elements.
There is a small book published by A List Apart which is called Mobile First. It was written by Luke Wroblewski and he brings up many of these same ideas. The trend points towards a need to fill mobile interfaces as the priority among Internet users. Most desktop browsers will be happy with any style of layout, as long as everything works. This is much more difficult to nail down on mobile platforms so it’s useful to start out small while planning for a larger design.
Infinite Scrolling
A number of social media websites have begun applying infinite scroll effects onto dashboards and timelines and user feeds. This effect was gaining traction due to the popularity of Twitter and Tumblr’s unique layout style. And now more recently Pinterest has also adopted this infinite page scroll on their homepage.
Designers may be asking why this is even useful in the first place. Sure it provides a seamless interface without reloading the page. But then users will have a difficult time generating permalinks for the different pages. And while all of this is true, it brings up the important point that not every website will need infinite scrolling. I feel this trend works best when you can load information that doesn’t require a specific pagination style.
For example, blog archives seem like a poor choice because readers may want to go directly onto page 15 or 25 instead of scrolling down multiple times. But Tumblr or Pinterest are great ideas because the information is dynamic and constantly changing. What appears on the 1st or 2nd page of your Twitter feed will update over time and so the Ajax speeds are very noticeable in comparison. Nobody wants to be clicking “next page” to load the next set of tweets.
Whitespace & Minimalism
The terms minimalism and whitespace are thrown around a lot. And while it is true that these trends have been part of web design for years, it’s also true they have evolved to fit this newer spectrum of creativity. There are plenty of websites using whitespace as a design tool which forces users to focus deeper on the main content. But even very dense websites can utilize whitespace in smaller areas to alleviate room.
Natural Design Elements
The CSS3 specifications have brought about so many changes. Importing typography through @font-face and keyframe animations are just a couple of topics to demonstrate the more advanced features. But even basic CSS3 properties have been influencing the use of natural designs within layouts.
These elements may include rounded corners, box shadows, or background gradients with a flexible container. All of these styles would have required images 5-10 years back. Nowadays you may design a mockup completely in-browser using only CSS3 to generate these effects. 2013 will be another year forward where images built into the layout are being replaced by standards-compliant CSS properties.
I have always loved the Dabblet website for its incredibly basic use of background gradients on each new page. This webapp ties into the Github Gist framework and allows developers to build small HTML/CSS prototypes in real-time. The entire interface is based off CSS3 properties and you may quickly notice how far trends have advanced in just a few years’ time.
Big Photography
We have previously written about big photo backgrounds and this trend has not been slowing down. In fact, I have seen even more websites and portfolios launching under this design style. Website layouts can be attuned for a very specific feeling or emotion based on the colors and background style. Large photographs are one other method to push for a very specific emotion.
I would argue this trend is certainly not for everybody. However in the right situation where you have enough space on the page, this large background offers a pleasing aesthetic for the visitor. The biggest problem is fitting content into the layout where it is still clearly readable. This is why the best solutions for big background photos often include landing pages or firms/agencies.
This unique style is also perfect for design portfolios and personal websites to offer a deeper connection with your visitors. People who land on your site will be curious about who you are and what you do. It is delightful to offer visitors a photograph and showcase a brief peek into who you are. Big photographs can also be used for displaying your creative work – such as illustrations, vectors, or even your own photos.
Cleaner Source Code
The release of more CSS frameworks have allowed web developers to chop down their coding times dramatically. This means you can build an entire 2-column or 3-column website layout within a matter of minutes, when using the right tools. It also means there is less HTML markup necessary to achieve the same results.
Building websites on clean source code means everything is more streamlined, and often much smaller. This is good because smaller file sizes mean quicker loading times from the server. Plus when going back into the layout for editing these can be swift and concise without difficulty. I have learned a lot about clean HTML/CSS just by reading articles online and studying the words of other talented developers.
– Demetri Kiritsis
ECA Technologies Inc.
