Web Design Basics

Layout

The website layout is the first thing that determines whether users stay and engage or leave without any meaningful exploration. Good web design aims to make pages orderly, organized, and visually appealing to maintain visitors.

The arrangement of text and graphics across the layout needs to be addressed with special consideration for three areas:

Structure

How is everything tied together? Where is the text in relation to the images? How balanced and consistent is the design across the different sections? The way a website organizes and compartmentalizes information is often a reflection of how the organization does business.

Color

Vibrant colors transmit energy and dynamism and neutral colors convey restrained professionalism. Color schemes play a key role in the kind of connection visitors have with websites, even if it only happens at an unconscious level. In addition, some individuals are not able to perceive or differentiate certain color ranges (e.g., reds and greens), so colors intended to be significant should be chosen with that in mind.

Style

What fonts are you using? In addition to size and readability, what does the look of each font convey? Is it stoic, with sharp lines? Is it wavy and cursive? Your choice of font will be an indication of your business tone, and it will psychologically influence users.

There are no right or wrong choices as long as you keep your audience in mind at all times. Understanding that every design choice carries a message and knowing your target audience and their expectations will ensure your organization is creating an optimal point of entry for prospective customers.

If visitors can’t easily find the information they need, suffer through slow page loads and sluggish site performance, and can’t communicate these issues to your organization, they will quickly decide to go elsewhere and will not return.

These are common challenges when the web design is not tailored to create a smooth and seamless user experience (UX), which is why front-end developers focus on the following areas:

Navigation

How smooth is the journey through the website’s architecture? Is the important information readily available? Understand what your users see when they visit and make sure your website is designed so they can reach potential goals easily.

Compatibility, Especially Mobile

Is your website designed responsively to provide equal performance for all types of browsers and devices? Is the mobile experience as good or better than the desktop experience?

Starting in 2018, Google instituted mobile-first indexing, which assigns search rankings based on the mobile version of the page. This is not surprising, considering mobile browsing now accounts for over 50% of all internet navigation worldwide.

Media

Images and videos are very important to make the website more dynamic and appealing. The proverbial “wall of text” can be overwhelming, and readers are likely to not read your content. Using different types of media can help maintain the reader’s interest and provide alternative ways to explain otherwise complicated concepts. Find proper balance between media and text to avoid negatively impacting speed and performance.

Performance

There is a wide range of reasons for issues with website speed – from excessive use of multimedia files and images to bugs in the code itself. It’s important to periodically audit your website and to use compression and optimization tools and plugins in order to keep page load times to a minimum, and avoid losing traffic.

Interaction

Your website design must include ways for users to engage directly with the company. It’s no longer viable for companies to simply provide an email address or phone number and expect people to reach out.

User expectations have evolved, so providing additional interaction options through contact forms, pop-up surveys, chat windows and/or chatbots has become vital. It’s important for sales, marketing and customer support to get timely feedback and learn about issues, while reassuring users the company values their opinion and experience.

All of these areas are extremely important when it comes to designing a website that’s friendly to visitors and creating the kind of UX that makes them want to come back.

Aesthetics and functionality are not enough. Visitors are there to obtain information, to consume content, which not only needs to be interesting and appealing, but adhere to best practices in terms of basic web design.

If users can’t understand what the website is trying to convey, they won’t engage actively. Content needs to be written clearly, with a mix of text and visuals, with an eye to informing, educating, or entertaining.

Another important factor to consider is how whitespace will be used. Proper use of the space between columns, paragraphs, and lines makes it easier for people to digest the information provided, and it makes the entire website look cleaner and more organized.

Compliance is a topic that holds a very strict relationship with location, both for users and in terms of the country the business operates from.

There are two main pieces of legislation that address the most common issues surrounding compliance:

1. The General Data Protection Regulation: This piece of legislation comes from the European Union, but it has ramifications across the globe. Enforced as of 2018, it regulates the use and management of data acquired from individuals in the EU. This includes websites. The GDPR is meant to protect people, their privacy and their data from third parties who may wish to profit from it without consent. 
2. The Americans with Disabilities Act: The ADA is a comprehensive piece of civil rights legislation that prohibits discrimination and guarantees that people with disabilities “have the same opportunities to participate in the mainstream of American life”. With the globalization of the internet, doors opened up to a whole new universe of regulations, specifically under the ADA's Title III, which protects against discrimination on the basis of disability in public accommodations and commercial facilities. This includes business websites.

Adopting web accessibility best practices on the website or ensuring those in place are working properly shields your business against legal action.

There are a variety of disabilities businesses need to take into account:

• Legal blindness
• Low vision
• Color blindness
• Intellectual disabilities
• Limited mobility
• Hearing impairment

ADA compliance is based on current WCAG 2 standards, which set basic guidelines on web design and structure in order for websites to be fully and properly functional.

In both these cases, companies need to get legal counsel so designers can implement the necessary best practices and ensure compliance.

In order to protect an existing website, audits are important tools for web designers to find and fix any compliance issues.

Companies need websites that observe best practices in order to ensure steady, growing traffic.

At the turn of the new century, Stanford University carried out extensive research to elaborate a set of basic guidelines that still hold up today. In general terms, they found these very easy rules of thumb:

1. Make it easy to verify the accuracy of the information on your site.
2. Show that there's a real organization behind your site.       
3. Highlight the expertise in your organization and in the content and services you provide.
4. Show that honest and trustworthy people stand behind your site.
5. Make it easy to contact you.       
6. Design your site so it looks professional (or is appropriate for your purpose).
7. Make your site easy to use — and useful.        
8. Update your site's content often (at least show it's been reviewed recently).
9. Use restraint with any promotional content (e.g., ads, offers).        
10. Avoid errors of all types, no matter how small they seem

When in doubt, look to these basic and ageless principles to ensure your website is top-notch and optimized for solid lead conversion.