Tips for Designing a Website
Web design is the process of designing the visual, look and feel of a website. As a web designer, you focus on planning the user experience of the website, wireframe layouts, organize content and images in a way that tells a story and design the final UI. Your homepage is your first impression to the world, so it’s essential to design it well. Design can be personal, but there are some things to keep in mind to design an effective and well-designed website. Today, we will talk about some tips to help you design a website that converts and accomplishes your client’s goal.
Design for mobile first. Mobile first design is a design viewpoint that aims to create better experiences for users by starting the design process from the smallest of screens.
Designing and prototyping your websites for mobile devices first helps you ensure that your user’s experience is smooth on any device screen, rather than designing the UI layout for a desktop website experience, design and prototype how it will look on mobile first, then move on to the larger screen versions next like tablet and desktop. Mobile design is much more limited. You’re designing for a smaller screen and can only fit so many elements on one page. By designing for mobile first, you have to choose only what’s totally necessary for your users and leave out all the rest. As you expand and adapt the design for larger screens you can choose to provide more information but you know exactly what you need to include first.
Use a grid to solve organization. Grids help you organize the content of the webpage. Without one, elements are randomly placed, uneven, and it becomes more difficult for the user to navigate through the website. If you’re stuck on how to get started with using a grid, a good place to start is a 12-column or a 960 grid system. The 960 grid system is an effort to streamline a web development workflow by providing usually used dimensions based on a width of 960 pixels. There are two alternatives, 12 and 16 columns. The 960 grid follows the following structure. The total width is 960 pixels, use 12 columns maximum, 60 pixels each wide, use 10 pixels of spacing to the left and right of each column for a total gutter spacing of 20 pixels. Total content area is 940 pixels. The 12-column grid system allows for plenty of flexibility. Here’s an example of how you can use the 12-column grid:
Balancing negative space. Negative space also known as white space is a learned skill and design process. New designers might be scared by the blank page but design isn’t about filling space with as much information and graphics as possible. Instead use typography, images, and negative space with drive to direct a user’s attention and create a smooth experience. There’s no right or wrong answer, but depending on the goal of your design, you may want to lean toward more or less negative space.
Legibility is king. Readability and legibility are often similar terms, but they’re actually quite different. Readability is the arrangement of fonts and words in order to make a written content flow in an easy to read way. Legibility on the other hand, refers to how easily unique the letters are from one another in a font. After all, if no one can read what’s on your website, then what purpose is it serving?
Also, use high-quality images avoid blurry and pixelated images by designing your graphics at the right size and scaling your images correctly.
Hierarchy is how you show the importance of specific elements on a page of a website. Through design elements, like scale, color, contrast, alignment, repetition, and space, you can succeed a clear hierarchy and help direct the user to one outcome. Whether it’s the headline or a call to action, choose what’s most important for the user to see first, then use design to solve the problem. Using a mixture of scale and weight helps direct the user to the most important information to read the headline first and then take action by clicking on the button. Web design is an iterative process. Nothing is permanent, it’s an ever growing field. Take note of these best practices, test, learn and repeat. Through trial and error, you’ll learn how to create attractive website experiences that help you pleasure your users experience.
Umair Jeelani
UX/UI Designer
