Learn how to balance creativity and functionality in your website layout design with these tips for ecommerce sites, portfolios, and more.
While creating a new website is exciting, and a fantastic opportunity to flex your creative muscles, it’s important to keep some helpful guidelines in mind. This will ensure your website not only looks stylish but maximizes the success of the site, whether it’s converting traffic to sales or encouraging readers to linger longer on the page.
Below, learn how to optimize your website layouts depending on whether you’re creating a site for an online shop, blog, portfolio, corporate service, or hospitality/tourism businesses. These site-specific tips can help you to create website layouts that convert sales, increase session duration, or leave a lasting impression on potential clients.
1. Designing a Website Layout for Ecommerce
The goal of any ecommerce site? To translate traffic to sales.
As a result, it’s particularly important that the site design guide visitors efficiently and quickly towards a sale, leading from landing page to product page to basket.
User experience should be the focus for ecommerce websites, and simplicity trumps confusing clutter every time. Designers might want to spend more time mapping out the user journey towards completing a sale. Consider how to redirect the user to the basket page if they drift across the site.
Having said that, stylish design can be integrated into a user-friendly framework for ecommerce. The website for seafood market Sea Harvest, designed by Australian agency ED., places user experience at the heart of a quirky newspaper-inspired design. The layout is both beautiful to look at and easy to navigate, leading users quickly from catch of the day to other available products to the order page.
In this case, the design style of the layout increases the chances of securing a sale through a clever combination of compelling styling and effective user experience.
Here is a different, but equally effective, approach by Rotate°, the designers behind the minimal layouts of online gift shop Not-Another-Bill. The home page serves as a scrolling suggestion board for products, each beautifully and simply presented against an off-white background.
Product pages feature the same ultra-minimal layout design, allowing neither text nor images to dominate the design. The overall effect is calming, aspirational, and exceptionally easy-to-use.
2. Designing a Website Layout for a Blog
Blogs are a celebration of individuality, so the design style of blogs can vary widely. As a result, a blog site can serve as the perfect blank slate for creative web designers.
While creativity and individuality should be an important part of blog design, readability should still be the main goal. It’s important to choose web fonts that are legible at a small size. Also opt for scrollable layouts without visual distractions (such as sidebars) to allow readers to focus solely on the content.
Some blog layouts need to be flexible enough to accommodate for different types of content, including videos and photography. Travel blogger Pete Rojwongsuriya successfully brings different media together to create a seamless reader experience in his award-winning website design for BucketListly Blog. A world map highlighting Pete’s trips takes center-stage on the homepage, with a range of videos and articles accessible to users after scrolling past the fold.
A consistent style of photography used across the posts gives the site layout a uniform, “branded” design, while a dash of yellow throughout the site’s color palette makes a nod to National Geographic branding.
3. Designing a Website Layout for a Portfolio
Portfolios are frequently the most creative and experimental website designs, with the end goal to impress or win the trust of a client. A portfolio website layout might use eye-catching typography, strong color, showreels, and/or animated effects to make an instant and lingering impact.
While style and creativity might make a portfolio site more memorable, it’s still important that portfolios guide the user through a conventional sequence of features, from projects and existing clients to the crucial contact details.
A portfolio website should showcase and not distract from the work itself. In the case of most designers your own self-created images can and should dominate the site layout. Supporting this with a more personable element, such as photos of the owner and/or team, can help a client to feel like they’ve met you before they even drop you a line.
For creative businesses, style should be a focal feature of a portfolio site, but that doesn’t mean that the user experience has to suffer. The portfolio site for digital design consultancy Wolf&Whale is a great example of a balanced mix of form and function.
Todd Torabi, founder of Wolf&Whale, realised that his agency’s ability to win new clients would depend on the quality of his portfolio site. With an aim to make the website a compelling showcase of the Wolf&Whale brand, Torabi partnered with MakeRegin, a South African creative studio, to design the layout of the site.
Using “style-tiles” as inspiration for organizing color and hierarchy on the layout, the final result is a simple-to-use site that features subtle hover effects and a punchy cobalt color palette to keep users engaged through a scroll of beautifully-presented projects.
The impact of the new site design? The site saw a 9x increase in visitors and session duration doubled, as well as attracting new clients including GoDaddy and Trupo.
4. Designing a Website Layout for Corporate Services
Corporate sites don’t have to be dull, although this sector often suffers from bland, cookie-cutter site layouts. Business services will benefit from a touch of creativity in their website designs, but designers can keep the tone appropriate by making company branding and clean type the focus of the site design.
The goal of a corporate website should be to build client trust through professional presentation and reassuring information, such as awards and existing clients. It can be an opportunity for a company to introduce employees to the outside world, showcase work, or keep clients updated with the latest news.
Potential or existing clients might only use a corporate site to quickly track down contact details, so it’s important that these site layouts are efficient and easy to navigate.
The site layout for digital agency ouiwill is an excellent example of clean and effective web design, that retains a corporate-appropriate spirit. The black and white palette, clean sans-serif web fonts, and bright, airy photography add slick style to the endlessly scrollable pages. The pages themselves alternate between vertical and horizontal scrolls, adding a dynamic element to the site.
5. Designing a Website Layout for Restaurants, Hotels, and Events
Creating a website for tourism, leisure. or travel can be a challenge, since the goal of the website to be immersive, giving online visitors a flavor of the destination. The immersive experience needs to be balanced with functionality, allowing users to easily find opening times, ticket info, and booking details.
These types of site also need to be especially aware of accessibility issues, ensuring the site accommodates everyone equally.
Designers might want to add more interactive or immersive content to tourism-focused sites, such as virtual tours, games, or maps. Interactive elements, videos, and exhibition-standard photography can all make for stunning site layouts. However, web designers will need to work around potentially long loading times.
The website for the Frans Hals Museum in Amsterdam is an awwward-winning study in pitch-perfect web design. Created by Build in Amsterdam, the site is a tribute to the museum’s dual contemporary and classic collections. Spliced images that clash Old Masters with modern art pieces is a consistent feature of the site. Punchy colors, pop-out transitions, and interactive elements such as drag-and-drop features add to the playfulness and broad appeal of the site.
The quirky format of the site layout also doesn’t distract from the important information—how to buy tickets and how to find the museum.
Cover image via wacomka.
If you want to discover more pro tips and techniques for designing websites, don’t miss these tutorials and articles: