Be inspired by theme and website layout examples
In need of a place to start with a look and feel for a site, sometimes it’s helpful to see what other web developers and designers have produced for a layout or WordPress theme.
Some trends have included the parallax scroll and the “single page” site. Each uses the idea of splitting up content in one page rather than clicking through to lots of other pages. This can help simplify navigation or present a single idea where there is little content. Parallax sites can be pleasing to view as they provide movement, with layers appearing to scroll at different speeds. Sometimes animations are triggered when a section comes into view. This uses viewport selectors for jQuery and can be seen in action on this site by Akita, showing movement of data which relies on the user scrolling the page to trigger animation but also to change direction.
There are literally thousands of one page sites in existence and over 5000 have been carefully collected together on the One Page Love website. What’s helpful with this site is that each website has a write-up and more often than not a link to a theme, demo or a live site using the one-page technique. CreativeBloq has recently collated a list of 50 great parallax scrolling websites. As they say: “While these effects can be gimmicky, when employed in the right way they can result in a remarkable and memorable website.” Look at Seattle’s Space Needle for starters and then the Costa Experience which has to keep loading slides like an old Flash website.
While one page sites are great to look at and can be useful in organising information, a question about how effective they are in terms of SEO remains. Yoast’s article Does Homepage SEO exist at all? suggests that the homepage isn’t the part of a website that’s optimised for search. If each main page of a website is aimed at particular keywords or phrases, and these pages are linked to from the homepage, then we could be in trouble using a one page theme.
For some inspirational themes using other techniques, I looked at how people use Bootstrap as the foundation. This is intended to provide a baseline framework which is instantly responsive. We see Bootstrap websites all the time, and while some are recognisable by their default stylings, others have literally used the framework as a starting point.
For WordPress themes built with Bootstrap, this page, 18 Free WordPress Themes Built With Bootstrap is a useful starting point. As is Colorlib’s 25 Best Free WordPress Themes Built With Bootstrap Framework For Business, Portfolio & Personal Blogs – 2014 and to finish WrapBootstrap’s WordPress themes page shows us what we can get for a few dollars more.
I’m not saying we should all rush out and download themes for our websites. These are built to cater for a number of users’ requirements, not the single job in hand of a developer and designer working with a client. Looking at other websites as examples of a what is possible can be a great starting point, both to understand the technicalities and also to get a client to identify what they like, which can help kickstart the design process.
Photo credit: Kiran Foster