<\/p>\n
Bits of inspiration and effective website design ideas<\/h2>\n1. One-page layouts might make people up to ten times more inclined to take quick decisions<\/h3>\n
One-page websites are in trend, but why? They aim at presenting only the necessary information that it takes to make a decision.<\/p>\n
According to Smashingmagazine<\/a>, people don\u2019t read an entire page to make optimal decisions. They stop to the first occasion that arises to accomplish their goals. Hence, it\u2019s become best practice to limit information to the minimal needed amount. And this minimum info also implies minimal number of choices.<\/p>\n Based on Hick\u2019s Law<\/a>, by increasing the number of choices, the decision time is also increased (an inevitable consequence of increasing the amount of information in a website). The good direction is to go the other way round.<\/p>\n <\/p>\n Source<\/a><\/p>\n <\/p>\n <\/p>\n It\u2019s good for blogs that keep up with the latest changes in web surfers behavior. It relies on the power of visuals. And it goes in line with usual practice of scanning web pages (not linear, but randomized).<\/p>\n Precisely, card design means the layout consists of a number of cards. Each card contains an image and a short description, as well as a link to details about the subject.<\/p>\n Examples of card design:<\/p>\n <\/p>\n <\/p>\n <\/p>\n Images help connecting with users at an emotional level, and they have the power to transmit more information in a synthetical presentation. That\u2019s why it\u2019s been said that a picture is worth 60,000 words<\/a>.<\/p>\n To enhance the power of a card layout, you can add micro-interactivity at card-level: zoom-in effects (that enlarge images when hovered over with the mouse), like or share buttons next to each card, etc.<\/p>\n <\/p>\n First, what\u2019s parallax?<\/p>\n The parallax effect consists of background images that move slower than the foreground, when users scroll down a page in a website.<\/p>\n It helps to bring focus on what\u2019s most important in a message to transmit to users.<\/p>\n An online experiment<\/a> showed that parallax influences user behavior in two ways: the cue route (perceived coolness, perceived vividness) and the action route (natural mapping, perceived ease of use). It determines higher user engagement.<\/p>\n Example of parallax effect<\/a> applied to a website:<\/p>\n Related to statistics, as we said in this section title, parallax scrolling can get up to 20 percent of the users more engaged with a page content, as research showed<\/a>.<\/p>\n <\/p>\n Separators are graphic elements that delimitate a webpage Header\/Footer from the rest of the page content. They\u2019re also used to clearly delimitate distinct content sections.<\/p>\n In some WordPress themes, these graphic separators can have different geometric shapes (waves, triangles, mountains, book, book negative, etc.). They can be horizontally or vertically aligned.<\/p>\n The role of content separators is to give information a hierarchy and ensure a readability flow. They establish a rhythm on a page.<\/p>\n \u201cWhy should my content be hierarchically structured?\u201d you might ask. It\u2019s far easier for users to follow a clear and logical content structure and spot clues that drive them to information that\u2019s essential to them. This results in an improved user experience.<\/p>\n Better user experience on a website can trigger up to 112% increase in revenue, according to a study cited by Neil Patel in this article<\/a>.<\/p>\n Here\u2019s an example of content dividers:<\/p>\n <\/p>\n Mesmerize Demo<\/a><\/p>\n <\/p>\n White space is a key element in web design. If you don\u2019t know what elements to put on a website, then sometimes you shouldn\u2019t put them at all. White space might be the best item you should use in that part of your page.<\/p>\n Let\u2019s take its effects one by one:<\/p>\n White space between different layouts and layout elements guides the eye on the content it surrounds. These are named Macro White Spaces, delimiting major elements in a web page design.<\/p>\n White space between lines of paragraphs, and space to the top\/bottom\/right\/left margins of the text increase comprehension. It\u2019s called Micro White Space and it can improve readability + understanding of the text by up to 20% (as Prototypr.io<\/a> states).<\/p>\n Example of white space \u201cin action\u201d<\/a>:<\/p>\n <\/p>\n <\/p>\n According to statistics related to calls-to-action, almost 90 percent of website visitors read headlines and CTA copy. Many of them don\u2019t read anything else<\/a>.<\/p>\n Hence, the utmost importance of CTAs. They have to show good copy, copy that converts. Going beyond colors psychology (which has to break from traditionalism) and button shapes (which should better observe conventional rules), they have to be convincing.<\/p>\n There are four dimensions of CTAs you should consider when designing the website: the design, the message, their placement and continuous testing. Please keep in mind message and placement. Strategical placement:<\/p>\n Prezi<\/a> invites you to \u201cSee how it works\u201d right from the Header:<\/p>\n <\/p>\n <\/p>\n Hero images are the first item people see on a page. Large images taking up to 80% of the whole screen can have a great impact on users. First of all, they instantly capture attention. Once users\u2019 attention captured, you can easily focus them on the website content.<\/p>\n Tests for the Salomon site<\/a> showed the force of a Hero image can increase sales by about 40%.<\/p>\n Here\u2019s how their homepage looks like:<\/p>\n <\/p>\n <\/p>\n If we tie in the image with the AIDA model and its steps to purchase, we notice that: 3 of the 4 steps involved in a buying process are covered by simply watching the homepage Hero image of the Salomon eCommerce site:<\/p>\n <\/p>\n The hamburger menu (offscreen menu) is used for mobile display of the navigation options, behind an icon having this form:<\/p>\n This design element is used for the reason of saving up real estate, on smaller mobile screens.<\/p>\n Some people say hamburger menus are not so good for user experience. They seem to be rather counter-intuitive, as the navigation options are hidden behind this symbol, and navigation itself is submitted to an elaborate process. Moreover, it\u2019s hard to put special features to the front, when viewing them depends on clicking and expanding the hamburger menu.<\/p>\n If you still opt for a hamburger menu, consider designing an optimal version of this component. This means that the hamburger menu icon (see above) should be accompanied by the word \u201cmenu\u201d, or even completely replaced by the term \u201cmenu\u201d. Such versions of the component led to increase in revenue (tests showed<\/a>).<\/p>\n <\/p>\n Without being new, selecting typography styles for a website is essential and it determines text legibility. In its turn, legibility influences conversion, for better or worse.<\/p>\n Instead of giving examples of maximized conversions, we\u2019ll stick to the basic conditions required for typography<\/a> to improve users\u2019 reading:<\/p>\n In terms of typeface (aka font family), here\u2019s a report on the most popular ones:<\/p>\n <\/p>\n Source<\/a><\/p>\n <\/p>\n The effects of typography aim at making readers feel inspired, better motivated, and more inclined to take action and go on reading (\u2026to making a purchase). Fonts also have a personality of their own, and in some cases can even make the written text itself seem more “serious”. This is part of the reason why Georgia is so popular since it can go with any topic – from a streaming service review<\/a> to regular, lifestyle blogs.<\/p>\n Beyond standards, feel free to experiment and track the results. Only, you should be aware of best practices and anchor those experiments in good advice from already-made research.<\/p>\n <\/p>\n Background videos can be ground-breaking. If used wisely. They\u2019re good for delivering online experiments of:<\/p>\n To put it simply, they\u2019re immersive. They give underlying force to the website pages.<\/p>\n According to websitebuilderexpert.com<\/a>, purposefully using a video background can lead to 10% or 20% improvement in people\u2019s engagement with a website.<\/p>\n You only need to clearly display content, so a video background doesn\u2019t reduce content legibility. \u00a0And it\u2019s preferable the video should be unique.<\/p>\n Here\u2019s an example of good use of a video background<\/a>:<\/p>\n <\/p>\n <\/p>\n Bear in mind that you can insert a video as background for the Header of the page, or else you might consider a more audacious approach: that of applying a video background for the entire page.<\/p>\n <\/p>\n Sliders present images in a flow, like in a rotating carousel. They\u2019re usually inserted into homepage headers, with the intention to draw attention towards the website and make this with high impact. They\u2019re modern. And they\u2019re simple to add to a website.<\/p>\n Example of a slider\u00a0in a website homepage:<\/p>\n <\/p>\n <\/p>\n However, sliders don\u2019t seem to rank very well in the list of highly effective and engaging website design elements.<\/p>\n But isn\u2019t it possible to make the most of sliders’ visual impact and turn their drawbacks into advantages, as well?<\/p>\n Here\u2019s how you can optimize sliders for better engagement<\/a>:<\/p>\n <\/p>\n Animations make content easier to read. This is due to the entertainment side of such items. We like text animations because they\u2019re fun. We like mouse-sensitive buttons because they attract and distract, at the same time.<\/p>\n According to Dreamgrow.com<\/a>, animation adds 10 points to the entertainment side. And that\u2019s exactly what users expect from a website. 80% of them<\/a>.<\/p>\n So, including animations in your website can ensure more than half of visitors who land on your page stay on it for more content.<\/p>\n What\u2019s so alluring about website animations:<\/p>\n It\u2019s important to consider when starting to build a website, whether you feel at ease with creating animations (with these purposes). If you have to build a website in WordPress, for instance, you should search for features related to animations.<\/p>\n E.g. Mesmerize theme or Easy Textilate plugin.<\/p>\n <\/p>\n Gamification is a modern and utterly valid way of boosting engagement with a website.<\/p>\n This technique uses the entertainment factor to drive users towards experimentation. Here are some game elements you can focus on:<\/p>\n Gamification makes users feel at ease with exploring the website and more inclined to perceive the message your company wants to transmit. Hence, more engagement, and more conversions.<\/p>\n Below is an example of Interland<\/a>:<\/p>\n <\/p>\n <\/p>\n According to a study, Interscope Records obtained a 650% increase in engagement and interaction with the website<\/a>.<\/p>\n However, gamification supposes a higher level of web design and programming knowledge for implementation. Make sure a professional will build the website, to avoid unnecessary costs of doing this yourself.<\/p>\n We\u2019ll let you estimate yourself what ROI to drive from including gamification into your own website, based on your own requirements and budgeting.<\/p>\n <\/p>\n Virtual experiences drive guaranteed success if VR is in line with one (or more) of the following aspects:<\/p>\n <\/p>\n Virtual Reality is immersive. It maximizes engagement. And it really justifies the figures above.<\/p>\n The first 3 stats are especially interesting:<\/p>\n <\/p>\n What is an Accordion Menu, first? It is a graphical control element that gathers items in a vertically stacked list.<\/p>\n Each item can be expanded or collapsed to reveal the content associated with that item. There can be zero expanded items, one or more than one item expanded at a time, depending on the configuration.<\/p>\n This is an example<\/a> of an accordion component in a webpage:<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n Through its design, it positively impacts webpage space management. Users will click and expand items only if they\u2019re interested in finding more. It\u2019s practical. And it\u2019s effective.<\/p>\n Effectiveness lies in that the mere process of expanding items raises curiosity. You\u2019ll want to find out what\u2019s behind a label. And of course, you\u2019ll want the content to surprise you.<\/p>\n Curiosity and surprise are connections with users, emotional ones.<\/p>\n According to measurements, communication and marketing campaigns are more effective if they appeal more to the emotional \u201cbrain\u201d:<\/p>\n <\/p>\n Source<\/a><\/p>\n <\/p>\n This type of effect gives a trendy look to a website and creates micro-interactions. Micro-interactions, in turn, increase the engagement of users with the website and make them stay more on your website pages.<\/p>\n Check some examples<\/a> of simple image overlay hover effects:<\/p>\n <\/p>\n <\/p>\n These are web design features to be used carefully to the advantage of the website.<\/p>\n A prominent element that might benefit from shadow effects is the CTA button. It\u2019s of utmost importance to design them appropriately, as they directly control sales:<\/p>\n Shadow effects fall in the category of additional decorations.\u00a0Here are some examples of box shadows<\/a>:<\/p>\n <\/p>\n <\/p>\n The role of shadow effects (if used coherently in a website) might be to increase familiarity with that website specifically. And familiarity will trigger conversions.<\/p>\n <\/p>\n These menus display vertically in a web page, and they might occupy the entire height of that page. They\u2019re effective because they might offer direct access to more elements in a website, than if it were displayed horizontally (and hid elements in drop-down menus).<\/p>\n They are not the norm in terms of menu design, so people might find them a little bit awkward. You need to balance the pretty unusual with ease of access: content discoverability makes people more inclined to read and get your message.<\/p>\n Example<\/a> of a vertical menu:<\/p>\n <\/p>\n <\/p>\n Mouse effects cover a wide range of elements, starting from simple mouseover and going further to oil painting, mouse orbit<\/a>, etc.<\/p>\n They\u2019re nice elements of interaction, good for users who get visual feedback from their on-page behavior, best for experimentation and engagement.<\/p>\n An interesting analysis of mouse effects would be to watch average time on a page over a finite time.<\/p>\n <\/p>\n Product galleries are beneficial for eCommerce websites.<\/p>\n Example of product gallery<\/a>:<\/p>\n <\/p>\n <\/p>\n <\/p>\n You can consider one or more of the following:<\/p>\n Needless to say, a more consistent user experience leads to quicker product selection and purchase.<\/p>\n <\/p>\n This parameter concerns the contrast between the background color and on-page items color.<\/p>\n E.g. White text should be placed on a darker background, while darker text should be set to contrast with a light-colored background.<\/p>\n Contrast can be adjusted in all color aspects: brightness, saturation, and shade, where brightness provides the most visible contrast.<\/p>\n According to Web Content Accessibility Guidelines<\/a>, a minimum contrast ratio of 3:1 is required for a text that\u2019s larger than 18px.<\/p>\n Please see the example below for an illustration of good contrast<\/a>:<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n To check the contrast ratio and ensure optimal parameters are achieved, you can use this tool<\/a>.<\/p>\n <\/p>\n This feature is applicable to eCommerce websites.<\/p>\n It consists in limiting the number of clicks needed to make a purchase. Also, it facilitates the decision-making process. It shortens the path to conversion.<\/p>\n The common conversion path: click on the homepage\/products list page -> click on products category page -> click on product page -> add to cart.<\/p>\n The shortened path: click on the homepage -> click to add to cart. Or Add to cart a product -> click to add to cart accessories.<\/p>\n Here\u2019s an example<\/a>:<\/p>\n <\/p>\n You can experiment with this feature, with A\/B tests. Comparing the results, you might find that click-to-add-to-cart is the optimal solution for your eCommerce website.<\/p>\n <\/p>\n We\u2019ve already talked about big-sized images and their impact on user engagement. Side-scrolling images are appropriate for website Headers, and they look like this<\/a>:<\/p>\n <\/p>\n They are suitable i.e. for photography websites. They create an immersive experience from the very start of users\u2019 visits to the website. Hence, they ensure engagement and increase chances to turn visitors into leads.<\/p>\n <\/p>\n A toggle sidebar refers to a control element that allows for hiding\/showing the sidebar in a page, according to users\u2019 browsing behavior.<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/hicks-law.png\")
<\/p>\n2. Card Design for Boosting Visuals: A Picture\u2019s Worth 60,000 Words<\/h3>\n
![\"card](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/card-design.png\")
<\/p>\n3. Parallax Effect emphasizes content and raises engagement with about 20 percent<\/h3>\n
![\"parallax](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/melaiedaveid.png\")
<\/p>\n4. Content Separators can drive up to 112% increase in revenue<\/h3>\n
![\"website](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/content-dividers.png\")
<\/p>\n5. Some simple website design ideas: white space makes content easier to understand by 20%<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/white-space-website.png\")
<\/p>\n6. CTA\u2019s (call to action) generate conversions, with about 90% users reading them (after headlines)<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/prezi.png\")
<\/p>\n7. Big-sized Hero images capture attention, raise interest and increase sales with up to 40%<\/h3>\n
![\"website](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/big-sized-hero-images.png\")
<\/p>\n\n
8. Hamburger Menu (since you tweak and refine, it might increase sales with about 4%)<\/h3>\n
9. Typography sets the standards for legibility – a key condition for engagement (with figures)<\/h3>\n
\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/popular-typefaces.png\")
<\/p>\n10. Background Videos for experimental marketing lead to 10% or 20% improvement in engagement<\/h3>\n
\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/video-background.png\")
<\/p>\n11. Other website design ideas: sliders can make and they can also break engagement…<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/sliders.png\")
<\/p>\n\n
12. Animations add 10 points to the entertainment side (84% of people expect it from a website)<\/h3>\n
\n
13. Gamification: entertainment + experimentation, leading up to 650% more engagement<\/h3>\n
\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/interland.png\")
<\/p>\n14. New website design ideas: virtual Experiences, when 66% of consumers want VR shopping<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/VR-marketing.png\")
<\/p>\n\n
15. Accordion for more real-estate and surprise effect, with up to 31% more engagement<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/accordion-component.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/campaign-effectiveness.png\")
<\/p>\n16. Image Overlay Hover Effects for micro-interactions that boost engagement<\/h3>\n
![\"website](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/image-overlay-hover-effects.png\")
<\/p>\n17. Among other website design ideas: box-shadow effects to increase familiarity with a website and thus, its sales<\/h3>\n
\n
![\"website](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/box-shadow1.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/box-shadow2.png\")
<\/p>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/box-shadow3.png\")
<\/p>\n18. Vertical menus and direct access to all important items on a page<\/h3>\n
![\"website](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/vertical-menu.png\")
<\/p>\n19. Website design ideas for engagement: mouse effects, interactivity and its impact on conversions<\/h3>\n
20. Product gallery, a more consistent user experience, increased conversions<\/h3>\n
![\"website](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/product-gallery.png\")
<\/p>\n\n
21. Effective website design ideas: contrast ratio for improved legibility<\/h3>\n
![\"website](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/good-contrast.png\")
<\/p>\n![\"website](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/good-contrast2.png\")
<\/p>\n22. Click-to-add-to-cart\/click-to-request-for-quote shortens the path to conversion<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/add-to-cart.png\")
<\/p>\n23. Great website design ideas: side-scrolling image for amazing effects<\/h3>\n
![\"website](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/side-scrolling.png\")
<\/p>\n24. Last but not least for website design ideas: toggle sidebar for better page layout<\/h3>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/06\/toggle-sidebar.png\")
<\/p>\n