Good looking websites
A "good looking website" can mean a lot of different things. Every site or company has its own design language. For example Google apps have Material Design, Microsoft uses Fluent Design, and Apple uses their own Apple Design Guidlines. They also use their own fonts, logos, color schemes, and all look totally different and function differently as well. So which language provides the best looking website? Well that's different from person to person. While they all look substantially different they do all have one thing in common. A consistent user experience.
Consistency
If you could have one take away from reading this blog, please let it be the importance of consistent site design. If some of your buttons are rounded while some are square, your nav bar changes thickness on every page, page elements shift 2 pixels when you render a new div, or menu items are in a different order on half of the pages, you are delivering a subtly (or not so subtly) uncomfortable UX. Visitors might not be able to pick out flaws and tell you what they don't like, but they will have a feeling on your page. A feeling that they'd rather be on Instagram or Amazon. Even if you don't follow a particular design language created by an established company, a fully consistent interface will be your design language. A design language to be proud of. So what makes a consistent interface?
Color
Color is everywhere. Color is the thread making up everything we see. If we don't wear clothes that don't match, why would we make a website that doesn't? One of the first things I do before placing any elements on the page is pick a color scheme. Whether I have a color picked before-hand or I find one on the spot, having a base color makes envisioning your future product much more productive and helps get the creative juices flowing. If I have a base color in mind already I'll head to the Adobe Color Wheel website (also known as Kuler) and find the perfect color.
This involves dragging around little sliders until the shade is just right to find the hex color code to use in the css. The perfect color is subjective, but there's a few guidelines I like to adhere to. Your base color is the focal point of your site. This is the color that every element on the page compliments. Usually this is the background color or a menu bar color. For a background color you want something soft and cool that text looks good on top of. Text is always easier to read black on light, and easy to read text is important to enhance your user experience. Menu bar colors should be bold and dark but of the same hue as the background color. Some examples:
These are all nice, even pages to look at, with no eye jar when you open them. Notice where your eyes are drawn to on each page. First to the lighter sections with the easy to read dark text, then slowly scanning to the darker sections. If we take all the colors on the facebook page, and put the values in Kuler we get a wheel that looks like this:
Look at the spread of the sliders. All of the main colors of the page are in a straight line from darker to lighter meaning they are all shades of the same color, with the background being the light in the middle, the contrasting menu bar color being the dark blue on the left, and all the accents contrasting the background complimentarily. It may not be an absolutely riveting design, but it's consistent and nice on the eyes, while only using 5 colors. Your page shouldn't be a rainbow of color to make it more exciting. The content on your page should be the exciting part because that's why the user is there! A great resource I use for picking colors schemes is coolors.co
Layouts - The bigger picture
This section is about the general layout and flow of the site. There are a lot of subtleties in the bigger picture, and some that Ad companies would pay large amounts of money to understand better, but they are left up to you when designing your site. If you refer back to the pictures of Facebook, Amazon, and Github from earlier, we covered where your eyes are naturally drawn to, but skipped over why our eyes are drawn there, or more specifically why those elements were placed there, containing the information that they contain. Was it an accident? Pure happenstance? Of course not! As developers nothing happens on accident! Those elements were placed there, using those specific colors to establish the flow of the webpage. On Amazon, your eyes are immediately drawn to the deals, and Github pulls you right to the sign-up form. There is no guessing what's going on when you get to the page. No scanning looking for a sign-up button and no wondering how to find products on Amazon. These things are designed to take the guess work out for you, putting you exactly where they want you to be on the page. Amazon may have an entire design and psychology team deciding how to increase sales off the home page alone, but the concept still remains the same. Use thoughtful layouts to gently guide your users along to the information you want to show them, and they came to see.
Styling - Sweat the small stuff
Styling in this regard is using shapes, colors, and sizes to create your own design language. These are the small pieces that bring the site together and give it personality, and theme making it a product you can sell people on. Making all these 1's and 0's into something tangible people want to feel. This is the section that really brings consistency together. The styling we are talking about here is making everything on the page look the same on every page!
Every feature should be styled the same. Every item show page should have the same attributes displayed in the same manner! Every logo should bring you back the home page! Users love predictability and are frustrated by changes to convention. Underlined text is traditionally clickable. If you underline a username at the top of an Instagram profile, people click on it, and it does nothing, you're going to have a lot of frustrated Instagrammers. This is literal predicability. Predicting things by the convention for which they were created. Just as underlined text represents a link, a submit button is clearly used to send your information to a server, and the back button brings the user back to the previous page. If the back button always brings you to the home page... frustrating. But these are easy rules to adhere to because we use them all the time and the browser actually handles most of them for us. Implied predictability is where we come in. This is creating clickable images to make them larger, logos that redirect to the home page, and clicking a username to see the user profile. There is no text anywhere stating these rules exist, but they tie in directly with your layout to enhance the flow of your website. The best way to build this is simply by using your site, and noticing the shortcuts you want to take. When you build the shortcut however really stop and think if this is a conventional action that a user would be aware to try. If not, you may want to lend a little guidance, and maybe set the color of your text to a different font color to represent a link.
Clean and clear websites benefits everyone. Your users will thank you, job recruiters will be impressed, and even your grandma can check out your site out if you follow these guidelines. Now that you have a better conceptual understanding of design, tune in next week as I dive into the CSS to help make your sites more consistent.
Top comments (0)