Your website is your interactive business card. For a potential client, the website might be the first touchpoint with your brand. In our age, there are several such touchpoints between the consumer and the brand: the website, the Facebook page, Instagram profile, Youtube channel, or any other means of communicating brand content through social media. These various types of online presence give the brand as many opportunities to convey engaging content to the consumers. The function of said contents is manyfold: to position the brand as a funny, trustworthy dialogue partner, or whatever tone of voice is expected by the consumer; to foster the creation of a community around the brand and the interaction between community members and various brand manifestations; to increase loyalty to the brand and, most importantly, to influence the decision to buy the respective brand. When there is a means of communicating the brand to its public with such marketing potential, you should do your best to make the most of it. First you need to create a website that works in favor of your brand, and for that to happen you must begin with a suitable layout design.
It is a trap for many marketing executives to play the role of their brand’s user themselves. If someone uses a website (and the Internet overall) in a certain way, it doesn’t mean that everybody does it the same way. There are tens of approaches to a website layout, and the most suitable depends on several factors. There are no shortcuts for this, as there is no type of website or user experience suitable for everybody. So, know your audience! We will try to adapt the website design to your public’s most probable preferences. That is why we should try to build a user profile that will consider the main features of the persona, such as:
- age of target audience
- education
- web and digital literacy
- type of device (PC, laptop, tablet, mobile, etc.)
In general, o idee buna este sa pastram designul web cat mai simplu si mai accesibil pentru toata lumea. Nu exista insa reteta. Strategia de comunicare a unui brand cere solutii vizuale originale si personalizate. De aceea vom balansa layout-urile cu impact vizual puternic si grija pentru user experience.
Web design – creating website layouts and user experience
There is always a visual tension between what is eye-candy and what works from a practical point of view. Statistics don’t lie. There are numerous tracking instruments that supply detailed data on user interaction with the web layout. If a website or a landing page looks good but lacks good numbers (clicks, time on page, number of visited pages, bounce rate, etc.), most probably there is something wrong about the user experience. A beautiful design does not warrant an efficient and satisfying using experience. Web design, or any other kind of design, always has a practical end or utility. That is why, when creating a web design, we must consider the user’s perspective and make the experience useful.
There are natural routes to browse information. In theory, we read from left to right, from top to bottom, but this goes for print formats. Online – not necessarily. Of course, the main headline of a page draws immediate attention, but there are a lot of other factors to be considered. First, you need to carefully select what to place above the fold, that is in the first screen, or what the users sees without having to scroll down. After you make sure that your most relevant information, put in its most simple form, really condensed, and linking to more detailed explanations, is placed above the fold, you understand that you can use a large headline only if the information it conveys is of paramount importance to the user experience. Is it worth promoting at the expense of everything else?
What you have several messages that compete for the first page, you need to be more careful with the available pixels. Everything depends on the purpose of your website. Is it to bring the customer to a certain page of the website, or just to read an information? Is it to convince her to buy a product, or to have her fill in a form and attend an event? Or maybe it’s just to keep the client posted in a friendly and informal away about your company’s activity, in the form of a blog.
The relationship between your website and its user is influenced by two main factors, which you must take care of before the user opens your web page. The first is the layout design – the look and feel, the menu, the search bar, the images and texts that lead the user to the pages and information that you need her to remember before leaving the website.
The second factor is the actual website content. This includes images, texts, videos, and any other contents that you wish to be associated with your brand.
How do you tell good from bad layout design?
It’s not all about how it looks. To be more precise, the look and feel of a website is in direct connection to basic design principles being implemented or not. In the end, a layout is a way to structure visually the information you aim to convey to the user. The structure helps conveying that information in a certain way. You tell your story in a way that creates emotion and triggers certain reactions from the website visitors.
A savvy web designer knows that a good layout does not aim to reinvent the wheel. Most of the major players’ websites in any industry have similar structures. The differences are subtle, in terms of logos, colors, symmetrical or asymmetrical designs. None of the good designs out there is trying to be new for the sake of it and, for sure, none aims to be counterintuitive. Why? Because you need to have a bridge to your customer from the moment she opens your page, which is only possible if you bet on her familiarity with a certain visual structure and use that in your layout.
For example, one-column websites are perfectly suited to blogs, where people tell stories and readers consume them in a linear fashion, by scrolling down to read the next paragraph and find out what’s next. On the other hand, websites that serve to convey various key, non-linear information might to better with a zig-zig reading pattern that mirrors the natural movements of the human eye, when reading online content. When we visit a website, we rapidly search for the things that interest us most, and about which we want to find out more.
There are various types of layouts, so how do we choose the right one? At INOVEO, we’re proud not to follow the principle: whatever the client wants! We’re not here to insist for the web design we like, but we will insist for the one that seems most likely to help your business grow. It might seem to you that, after all, it’s a simple website, everybody has one, so you just need to have one to be in line. Experience teaches us that it’s not that simple. Web users are extremely selective (not to say picky) with online content. If you don’t give them the means to find what they’re after in a matter of seconds, or if you give them a basic functionality in a manner they are not accustomed to, they leave your website right then.
If your business focuses on offering memorable products or services, that need to be associated with certain moods and emotions, we’ll design a layout with strong images, going fullscreen for the most part of the navigating experience. That could also be the case if all you need from your visitor is to land on a page and join a campaign or fill in a form, and you want her to form a visually compelling memory of the experience of signing up. The fullscreen image may also feature two lines of text, to explain what it is about in as few words as possible. The idea is to use the time that the user spends on your website to form a memory, to trigger a long-lasting association that reminds her of your brand.
On the other hand, if your business needs to present a product portfolio or a list of services, we may propose a so-called grid of cards layout (the kind you may see on our website right now). Or, if you need to position as a corporation that conducts its operations and customer relations with mathematical precision, we will find the perfect combination of clean sheet, geometrical symmetries or asymmetries, powerful images, title styling, photo and video galleries, so that the overall picture sends the right message to the target audience.
Presentation / corporate website
Most of the online projects we run are presentation websites (corporate or less corporate). What they have in common is that we try to synthesize brand values and translate them into a form that works in online – whether it’s the visuals or that tone of voice of the that sets online communication apart from the rest of the corporate messages.
To create a website design that is representative of your brand and convey the right messages, we need to understand who you are talking to. If the website is part of a branding process that we have already started together, it means that we already have information about your target audience and brand values. If you have an established visual identity and you want to collaborate only for the web design and website programming part, we will have to build together a detailed brief, which will specify as completely as possible what your expectations and needs are.
What we offer in terms of web design: implementing your brand identity in online; homepage layout; one or two inside pages; custom visuals for modules, illustrations, favicons, iconography; visuals for communication in the digital environment (banners, cover image, profile picture for social media).
Depending on the main goals you pursue in your online activity, we will signal out the most important contents of your website. We insist from the beginning that we need to define the main objectives, whether it is about promoting a new product or service, attracting new employees, opening a new line of business, or listing on the Stock Exchange. If you make it clear to us from the beginning what you are looking for, we can use web design as a powerful tool for communicating your brand online.
Website structure – homepage and inside pages
The website structure is a means to make sure that information is easy to find, and the navigation routes are intuitive and handy. You must keep in mind that the website user (your potential or current customer) thinks differently than you. You may be tempted to present the structure of your business as you see it from the inside, putting in a great deal of technical detail. A lot of technical specifications about the products or services you offer presented in a very complicated way makes the customer want to leave, as she would most probably like to limit to essential information that influences her buying decision. To ensure that the information reaches the end user in an interesting and hopefully entertaining way, we offer you copywriting or (should you prefer to write your own texts) marketing consulting services.
The most important page of your website is the first page, the homepage. As in real life meetings, the first impression really matters the most. On subsequent visits, the homepage will function as a platform, as a familiar starting point, from which the user has learned to follow a certain path to her destination. What you need to remember is that the user of your website does not want to waste time. The texts of a website do not read like those in a magazine, much less like a book. Short sentences and well-chosen keywords are mandatory. The same goes for building helpful subtitles, and not just because this is required by search engines. Brief sentences and use of keywords help users quickly find what they are looking for. You don’t want them to get frustrated that they can’t find the information they need, quick and easy. Therefore, the first page should contain a small number of key messages, the most important ones that you want the visitor to see as soon as the site is displayed. The design favors good usability through titles, fonts, text size, as well as a balanced ratio between text and image volumes.
The homepage is nothing but a business card. It gives the user first-hand clues about your quality standards. The colors and images on the homepage create associations in the user’s mind, which help place you in a certain category from the first moment. However, the homepage also works as a sales strategy. With a well-thought-out web design, which highlights certain navigation paths, the user of your website gets on the desired page with just a few clicks. There you need to have a compelling text or some convincing images that will convince the user to do business with you.
The homepage is therefore an invitation to talk. If the invitation is sent correctly, the visitor will give you the opportunity to convince her to buy from you.
That brings us to inside pages. Here structure and design are also key words. An intuitive structure and a clean, airy design increase the chances that the user will give you her time and attention. By the intuitive structure of the website, we mean that the way you get from one page to another is natural and handy, the information is not buried in too many clicks, also not to repeated annoyingly – although it is said that online redundancy is good. Clean web design means that the page is not crowded with too many visual elements or too much text, and the visitor can easily find her way back to the base (homepage) without any problems.
Most WordPress themes (the web content management system we generally use) have already incorporated design and programming elements that favor a convenient online user experience. WordPress themes though, no matter how user-friendly, need adaptations and optimizations for an experience as close as possible to the one you want your brand to create. This is why we pay attention to the small details that make the difference: the positioning of a menu, the color of a title or the styling of a photo gallery can send small subliminal messages. All these are part of the personality of the website and – by extension – of your brand.
Desktop vs. mobile websites. Responsive or adaptive?
Today people use the Internet on a lot of devices: PC (desktop), laptop, tablet, mobile. All these come with various screens, each with its own resolution and size. The layout of your website should be friendly and versatile. Friendly, because it must look good on all these screens. Versatile, because it must adapt to these screens in various ways.
The way things work in the world of websites nowadays, you need to have several versions of the site ready. What does this mean? When a user accesses your site, the administration platform (also called back-end, which is something else than the tennis backhand) is able to deliver to the browser the appropriate graphical interface for that device.
Many of the issues related to correctly viewing websites on various devices are addressed by web management platforms from the beginning. This means that WordPress themes, for example, come already programmed to display the layout correctly in various environments. However, this doesn’t mean that the website doesn’t need to be customized and verified. We make sure that it looks good in all situations, on all browsers and on various devices. There are online tools that simulate accessing the site from various devices, with various resolutions. Even so, you can’t be sure that you have exhausted all the possible wrong ways to display. Therefore, we also test your website by accessing its test version on various devices, mobile or not.
In recent years, the word ‘responsive’ has become very popular in web development. A responsive website automatically resizes its layout according to the screen resolution on which it is displayed, or the pixel size of the browser. The usual practice for implementing this technical solution for displaying websites is to install a web content management platform and a responsive visual theme. A website theme (such as from WordPress, which we mentioned above) is a draft layout that already has several programmed features. It can be customized according to specific needs of each client. Theme customization may include varying colors, fonts, image sizes, or content boxes, as well as adding new modules that perform various functions, and were not included in the original theme. Most themes today are programmed to function responsively, so the website layout is automatically resized according to the pixel size of the browser, starting from the maximum layout size.
As for the adaptive versions of the sites, they involve designing layouts for the standard sizes of the various display screens. For example, a site will have separate, independently programmed layouts for its desktop and mobile versions. When the user accesses the website from a mobile device, the website is programmed in such a way that the mobile version is automatically displayed. Same with the desktop version.
If you opt for a responsive website, the advantage is that you develop a single layout, which adapts to the size of the screen on which it is displayed. Also, in the long run, it involves a smaller investment in maintenance.
An adaptive version of the website, on the other hand, can be more effective when the website has a design with many visual elements that need a lot of resources for loading. In the mobile version of the website, which is completely separate from the desktop version, resource consumption can be optimized by the way the layout is displayed, through a different design. In addition, if your audience spends most of their time on mobile, with an adaptive design you can focus primarily on this category of audience. Then the desktop version works as a backup for the rare cases where your site is accessed from a PC. It all depends on the specifics of your audience and the goals for which you think it is most effective to invest your money.