Empowerment Technology - Basic Web Design Principles and Elements
- 1. By: Lany Lyn B. Magdaraog Colegio de San Lorenzo Ruiz de Manila of Northern Samar, Inc.
- 3. Good web design always caters to the needs of the user. Are your web visitors looking for information, entertainment, some type of interaction, or to transact with your business? Each page of your website needs to have a clear purpose, and to fulfill a specific need for your website users in the most effective way possible.
- 4. People on the web tend to want information quickly, so it is important to communicate clearly, and make your information easy to read and digest. Some effective tactics to include in your web design include: organizing information using headlines and sub headlines, using bullet points instead of long windy sentences, and cutting the waffle.
- 5. In general, Sans Serif fonts such as Arial and Verdana are easier to read online (Sans Serif fonts are contemporary looking fonts without decorative finishes). The ideal font size for reading easily online is 16px and stick to a maximum of 3 typefaces in a maximum of 3 point sizes to keep your design streamlined.
- 7. A well thought out color palette can go a long way to enhance the user experience. Complementary colors create balance and harmony. Using contrasting colors for the text and background will make reading easier on the eye. Vibrant colors create emotion and should be used sparingly (e.g. for buttons and call to actions). Last but not least, white space/ negative space is very effective at giving your website a modern and uncluttered look.
- 8. A picture can speak a thousand words, and choosing the right images for your website can help with brand positioning and connecting with your target audience. If you don’t have high quality professional photos on hand, consider purchasing stock photos to lift the look of your website. Also consider using infographics, videos and graphics as these can be much more effective at communicating than even the most well written piece of text.
- 9. Navigation is about how easy it is for people to take action and move around your website. Some tactics for effective navigation include a logical page hierarchy, using bread crumbs, designing clickable buttons, and following the ‘three click rule’ which means users will be able to find the information they are looking for within three clicks.
- 10. Placing content randomly on your web page can end up with a haphazard appearance that is messy. Grid based layouts arrange content into sections, columns and boxes that line up and feel balanced, which leads to a better looking website design.
- 11. Eye tracking studies have identified that people scan computer screens in an “F” pattern. Most of what people see is in the top and left of the screen and the right side of the screen is rarely seen. Rather than trying to force the viewer’s visual flow, effectively designed websites will work with a reader’s natural behaviour and display information in order of importance (left to right, and top to bottom).
- 13. Everybody hates a website that takes ages to load. Tips to make page load times more effective include optimizing image sizes (size and scale), combining code into a central CSS or JavaScript file (this reduces HTTP requests) and minify HTML, CSS, JavaScript (compressed to speed up their load time).
- 14. It is now commonplace to access websites from multiple devices with multiple screen sizes, so it is important to consider if your website is mobile friendly. If your website is not mobile friendly, you can either rebuild it in a responsive layout (this means your website will adjust to different screen widths) or you can build a dedicated mobile site (a separate website optimised specifically for mobile users).
- 15. WEB DESIGN PRINCIPLES AND ELEMENTS Enhance the experience of visitors of the website o color Facility that the audience can use to go through the web site and its sub pages. o navigation Basic for the focuses of the web site in the time that the website will load or appear into the viewer display device. o load time A website can be categorized primarily in terms of the goal it aims to fulfill. o purpose The arrangement of the text should be concise and direct to the point. o communication Physical arrangement of the concept and elements on a web. o layouts Is an essential factor in web design, this is the most dominant and noticeable in terms of visual. o typefaces
- 17. This might sound rudimentary, but color schemes and color choices are very important when it comes to modern web design. The number of colors you incorporate in your modern design is a very important aspect. Too many colors become visually distracting, so most modern Website designs opt for only 2, or at the most 3 in their major design elements. Simplifying the color scheme of your Site makes it easier to focus and this is why there are only minimal color combinations in modern Website designs.
- 18. This goes along with the last modern website Design element, but something called "white space," is also very attractive. It doesn't necessarily even have to be white, instead, white space is a term used for the amount of "empty" space - i.e. margins between your content and the edge of your screen, and buffers between the elements on your page. Things should have room to breathe, if your Website is crowded, it is very hard to direct the attention of your visitor's eye.
- 19. This modern website design element is one that you might not notice visually, but one that is probably the most important when it comes to the functionality of your Site. Behind every Website there is a great deal of coding in the backend that will dictate how your Website performs.
- 20. There are modern Website design elements that can greatly improve the Search Engine Optimization (SEO) of your Site. A lot of these are invisible to the naked eye, and also appear in the backend coding of your pages and posts. There are design tricks like meta tags, title tags, heading tags and other HTML code that can go a long way in helping your Site climb the ranks of Google's search engine.
- 21. As we hinted earlier, converting visitors into leads and customers is also very important to modern website design - and here's why: Websites are meant to connect you with the people who are interested in your content, products and services. Once this connection is made, you want to retain some sort of relationship with these visitors. Things like email subscription forms, free downloadable ebooks or whitepapers, free product forms, free consultations or other invites are great calls-to-action. These should be incorporated into your modern Website design and are very important for gathering the contact information (typically just an email address) of your visitors so that you can continue conversations with them as leads and convert them into customers.
- 23. UNIQUE AND LARGE TYPOGRAPHY Most companies have a particular font or typography that they use to help their customers immediately identify them versus their competitors. In recent years, designers have received a larger selection of fonts to choose from, making it easier for brands to more accurately express themselves through typography. For example, The New Yorker is recognized instantly through their use of unique font, Adobe Caslon Pro. While more unique fonts, such as Blokletters-Balpen, have begun to be used by startups and technology companies like Zero.
- 25. Typography uses one design trend across the website to lead readers to different parts of the page. For instance, The New Yorker website leads visitors from one section to another based on the typography and font sizes. When creating your company's brand, your choice in typography can indicate subtle hints about who you are. Are you fun or serious? Functional or informational? Regardless of what font you choose, be sure that your designer considers its applicability across browsers and computers. Choosing a font that is not supported by common browsers and computers could mean that your website displays awkwardly on different devices.
- 26. LARGE & RESPONSIVE HERO IMAGES Large images do away with the concept of above and below the fold. By focusing on just the image with text rather than a CTA or social buttons, Medium creates a strong visual experience that encourages you to scroll down to read more. Large hero images are also often placed in the background with text and other content overlaid on top, like on Uber's website. Regardless of the approach you utilize, large images can help visually tell your story without having to rely on just text.
- 28. Your customers are coming from all over the place and have high expectations. You may not be sure if they are finding your website from their phone, tablet, or desktop computer. The image that Medium uses above is extremely powerful, but if it was only visible from desktop computers, many people may miss it. That said, ensuring your images are responsive makes for a good user experience. Website visitors can look at different images -- whether they are the background or product images -- and be able to get the same experience no matter what device they are coming from.
- 29. BACKGROUND VIDEOS Videos that automatically play in the background can add a lot to a page. They can be used to tell a story and significantly reduce the amount of other content that is needed to explain your business.
- 30. Let's take Wistia's website, for example. When you land on their homepage a large video automatically starts playing in the background, and by clicking on the play button, you get a deeper look at Wistia. This background video serves as a brilliant way to get the visitor engaged to click-through to the main video.
- 31. Background videos focus on enticing the visitor from the moment they land on your page. The video allows your visitor to understand the key points about your company without ever having to read a single line of text. In addition, video is processed 60,000 times faster by our brains compared to text. While people are often hesitant to read heavy blocks of text, videos appear effortless and can be consumed very quickly. It also helps that connection speeds are increasing and mobile device sizes are growing, making for better video experiences.
- 32. SEMI-FLAT DESIGN Simply put, flat design is any element that does not include or give the perception of three dimensions, such as shadows. Not only is flat design is easier for users to comprehend, but it can also load more quickly on websites without complicated or overly-technical elements.
- 33. As you can see in the image below, the boxes have an element of depth with shadows around them, without overdoing it. When you scroll over any of the boxes on the Uber homepage the shadow disappears and relieves the image behind it.
- 34. Flat design helps the visitor understand your content more quickly, and adding some elements of depth can bring it to life. Regardless of whether you fully design your website using flat design or utilize shadows and other elements, it's important to be consistent throughout your website. Ensure that your homepage, product pages, and any other key sections of your website all utilize the same design cues so that visitors can instantly understand what they're viewing.
- 35. HAMBURGER MENU It's likely that most websites you come in contact with have a long menu of options to choose from. The advantage of this is that the menu can take the visitor directly to where they want to go. However, the disadvantage is that they generally take up a ton of valuable screen space. The hidden, or hamburger menu changes this. This menu was common in web applications before making it's way to web design -- even in Google Chrome you can find a hamburger menu on the right-hand side.
- 36. Wondering why it's called a hamburger menu? If you use your imagination, the three lines that are stacked on top of one another look like hamburger patties. Get it?
- 37. The pages of your website should have a clear path for the user to take. Removing a busy navigation makes the experience cleaner and distraction free. This improved experiences help to improve the likelihood that the user will find the information they need to complete a desired action.
- 38. GIANT PRODUCT IMAGES You may have noticed that many B2B websites are starting to display large product images on their sites to highlight different features or parts of their product. This is no coincidence. To give you a better idea of what we're talking about, let's take a look at the product page for the HubSpot Website Platform:
- 39. There is a large featured image at the top of this page, and as you scroll down the page there are additional in- depth product images. The images are also responsive which aims to ensure an optimized experience for viewers coming from different devices, as we mentioned earlier.
- 40. Larger product images help designers highlight different features of a product in a more efficient and effective way. This approach reinforces the benefits of a feature by providing the opportunity to highlight the most valuable pieces. For instance, in the second image, you will notice that there are numbers on the image corresponding with benefits of certain features. These large images are also scan-friendly. They help visitors generate a solid understanding of what the different product features do by convey them through images instead of words.
- 41. CARD DESIGN With the rise of Pinterest, designers and marketers alike have become fascinated with cards. Individual cards help distribute information in a visual way so the visitors can easily consume bite-sized pieces of content without being overwhelmed.
- 42. Brit + Co's homepage serves as a great example of card design in action: By breaking up different pieces of content into cards, users can pick and choose which articles they want to expand. This helps to keep the homepage feeling clean and organized, without relying on a ton of text.
- 43. Card design is becoming more and more popular across B2B and B2C websites because it helps to deliver easily digestible chunks of information for users. Using this design on your site can help highlight multiple products or solutions side-by- side. Keep in mind that your cards should be responsive. This means that as the screen size gets smaller or larger, the number and size of cards shown should adapt accordingly.
- 44. Short Product or Feature Videos In addition to background videos, companies are also beginning to use short product or feature videos to highlight a specific use case. These short videos are great at bringing your solution to life, while not overwhelming the visitor with a long experience that they must sit through.
- 45. These short videos allow for your prospect to quickly understand value without watching a really long, in-depth experience. Sure, both have value, but the shorter videos allows for quick understanding that is best for top of the funnel.