Sprint Web Design Bangalore

Design: 10 Tips for a Flawless Layout

While each web designer or web development company has a different plan for building a website, there is a list of what to do in common for most such projects. We created this checklist that we made with the essential items in the construction of a good web interface that is consistent, easy to use and aesthetically pleasing.

Space between elements, personalized quality images, effective internal search tools, and creative ways to invite the user to the interaction. These are the elements that together define the user experience that accesses one of your pages.

Creating Infallible Layouts

We will present here ten elements that you should prioritize on your site, followed by practical examples of each of them and tips on how to use it in your next site creation project . We’ll see what little details make all the difference.

1. Spacing

Spacing is one of the most important elements in layouts . The space dictates the visual flow up to and speed of reading (or readability). Designers are beginning to use space in ways we have not seen on the internet in the past decade mainly because of the popularization of touch screens.

There should be a consistency in spacing and space relations. Similar elements should include similar spacing. The amount of space between the lines of a paragraph should follow a pattern (or proportions), as well as the size of the margin around the images.

Space is also important when creating a focal point for the perception of the interface. An image or block of text surrounded by white space may appear to be larger and more important than one allocated along with other blocks of information and in a tighter part of the layout.

It is also worth remembering that space should not necessarily be white. It refers to the absence of elements and may well be a dark background color or a well applied texture.

  • Choose the center element, such as a menu, form, or a featured image. White space can highlight this element in the visual hierarchy.
  • Make sure the information is organized in a way that includes consistent spaces between the elements. If a content block replicates across multiple pages and site sessions, its spacing must remain the same.
  • Make each button or block of content stand out with due weight in the information hierarchy.
  • Do not divert the user’s attention to unimportant blocks. One part of the layout should not dispute attention with another at the same time.

2. Navigation

Navigation should not be complicated! It should be easy to identify and use. It is also important to keep the navigation menus simplified, so they do not overload the user with a lot of information.

Web browsing also includes tools that help users stream through the site. Sites with parallax effect , for example, often include arrows that guide the user. A layout should be user-friendly . The easier it is for people to navigate your site, the more likely it is to get what you’re looking for before you leave.

  • Swing. The more menu items, the lower the depth, and the less, the more hierarchy levels displayed. Balance the navigation.
  • Use conventional navigation patterns . The user will not study a manual to learn how to use your site. The main menu of a site is in the header; the main logo is usually a link to the home; and so on.
  • Keep a standard for the weight and position of the links. The user expects to find a consistent experience. You also need to know at what level of the hierarchy a page is (the deeper, the more specific) and always have the option to return.
  • Give feedback. Tell the user where in the site he is currently browsing. Breadcrumbs are the most appropriate layout block for this – position them discreetly in a visible position without scrolling (above the fold).
  • Create interactive solutions with javascript and css – sticky headers, which remain on the screen as the user performs page scrolling, are a simple solution to keep browsing always within easy reach.

3. About Us

The “About Us” page should tell users who you are and what you do . It can be used to present the company’s philosophies and goals, or how the site was developed. It can also be the right place for positive testimonials and reviews of users and customers, as well as company success stories. This type of page can also serve directing the user to related pages and social networking profiles.

The biggest problem with the “about us” pages is that they tend to stay long and very descriptive. Keep the page as straightforward as possible; give users only the information they need to be interested in the business, not bored. Remember to keep the design interesting and invite them to get to know the rest of your site.

  • Use the “About Us” page to give your brand more personality. Photos of the team and place of business lend credibility to the brand. Consider an employee centered approach in the About Us and Team pages.
  • Tell your story. Storytelling is more than conveying information; it is surprising, provoking empathy and generating interest.
  • Remember that people today do not have that much time, so be brief and direct. Use image media and videos to communicate subjective values ​​and sensations without prolonging too much.
  • Invite the user to know the rest of the site. Add links to strategic site sessions.

4. Contact

Contact information appears in two of the most common ways: at the top or bottom of the site or on the “Contact Us” page or similar.

Either of these ways can work well, depending on the information architecture of your site. The key is to do it in a highly visible way. Presenting information like phone, address or a form to contact the site owner is the best way to give legitimacy to your project. It is frustrating for the user to try to contact you and not succeed (unless it is purposeful).

  • Add contact information in places always visible. This information can be displayed in the form of links to planned actions (eg, Send a message, Make a call). Buttons for automatic message via WhatsApp have been gaining popularity in sites of various niches, especially for the mobile user .
  • If you get customers at a physical address, include the location (a map widget like Google Maps, for example, it’s fine), if you get a lot of contacts over the phone, leave the phone in a prominent area.
  • Consider adding a form so the user can send emails straight from your site (and do not forget the success and error pages).

5. Call to Action

What is the purpose of your site? Your website is the gateway to your business, and you should build it thinking about what it should be most efficient. Whether it is a sale of products, services or some information gathering, you must ensure that it is being designed to meet this conversion and the invitations to that interaction should be direct and obvious – no question.

Some of the tips we’ve given here help guide you in the right direction. Dropbox, for example, is very interested that you register early, so you already propose this right on the first page. And you, are you directing your homepage to get your conversion as fast as possible?

  • Direct and persuasive call-to-action writing  . A striking title accompanied by a short and explanatory caption with an image, button or form.
  • Position the  calls-to-action  on the home page and above the fold.
  • Buttons should be of contrasting colors and say exactly what they are for: Buy Now, Participate, Download, Sign Up .
  • Conversion buttons can be repeated along the page if the user has not engaged at all.

6. Search

Not everyone has the time to search for specific content by site navigation, so search is such an important tool. Draw the search box in a discreet and easy-to-use form, but make sure the box is large enough and always visible. If you want an icon for the search use the magnifying glass without fear, it is a universal icon.

  • The most popular search box location (in the west) is at the top and the right.
  • Prioritize the simple and straightforward box design, which will be at the top of your page for search. Add advanced filtering options only when strictly necessary . Leave the search field visible whenever possible.
  • Do not forget the layout of the results listing.
  • Perform search tests, checking if the results are ideas for the search context. An example of a serious mistake would be a virtual store, whose search primarily presents blog posts rather than product pages.

7. Footer

The footer is a way to summarize your site and bring forward pages that relate to the institutional part of your company, such as social networks, address and contact. Because its location is at the bottom of the page, it is also the ideal space for a small site map, relevant links and a brief description of what the site is.

Make the footer simple and useful . When creating a footer that exposes links or buttons, the important thing is to be visually integrated with the site. It may even have a much more minimalist touch than the whole, but give it a personality.

  • Repeat information found elsewhere on the site (the search field on the site may be at the top of the page, in the main index, and again in the footer, for example).
  • Enter elements previously mentioned in this post if there is no other logical place for them in the layout.
  • See other footer tips in this cool post we have prepared.

8. Buttons

Every button on a website should be recognized as a button (know what Affordances are ). They must have the same effects regardless of their location or purpose. Creating a set of different buttons can be a challenging task in the case of sites with many clickable items. Consider creating a button kit to maintain consistency and visual cohesion throughout the site.

Do not forget to use statistics tracking tools like Crazyegg or Google Analytics to measure with A / B tests that button colors or sizes are giving more result.

  • Develop a unique set of buttons for your site that is easily replicated. It should be consistent across all pages.
  • Provide a large and comfortable click area. The mobile user should have no difficulties in touching.
  • Perform A / B tests to measure the efficiency of each button. Try changing the text, colors, and position in the layout, and measure the impact of those adjustments on the conversion rate.

9. Pictures

People love to see things in action. Create stunning visuals to please users on your site. Good pictures or illustrations are an easy way to do this. With a small set of great photographs you can display products, people, or anything to encourage the engagement of users in your website or app .

As the internet is at a stage where the weight of images is not a factor that compromises access to the site, we have more freedom to use higher resolution images, but remember to offer an alternative to mobile devices. Also be careful when using image banks ( stock images ) as a source for your site does not lose identity.

  • Look for a photographer or illustrator to develop and create a unique set of images. If using free stock image media, consider adding a color or effect filter so that they are, to a certain extent, unique to your site.
  • Offer a unique visual experience. Consider transitions and done in JavaScript or CSS.
  • Capriche in the resolution of the images , always with an eye on the final file size .

10. Web Fonts

Once upon a time … The time when the web was ordered by a restricted set of sources because the options that were recognized by most browsers were very limited (Arial and Verdana, who never?). Today this limitation no longer exists and we have great Open Source tools to use a much wider range of unique fonts like  Google Web Fonts  or Adobe Fonts .

However, native fonts are still very important for two reasons: compatibility and performance, so do not abuse loaded fonts and take advantage of those already available in the system. Webfonts can also be important for positioning the website in search engines (SEO) if used in place of images that would have text to say something.

  • Use a service with a library of free fonts, such as Google Web Fonts.
  • Avoid too many font variations in layout. The need to load multiple weights from the same typographic family can degrade the performance of the site.
  • Using webfonts to pass a message will usually be more effective than loading an image for the same purpose. Decrease page weight and better meet web accessibility standards.

Conclusion

These are 10 tips that we consider very important for the design in a blog project, virtual stores and institutional sites here in Man Machine. They will certainly help you in creating a layout that helps you achieve your brand goals and also serves the visitors.

To make an incredible layout you have to take into account the typography, colors in the interface and use a responsive design . But let’s take it easy, one step at a time. The basics you’ve already learned here

Make the best layout the world has ever seen. Do you have any tips to share with us? Leave in the comments!