So I finally had some free time to talk about something that seems like an easy design fix but the problem doesn’t go away, well at least in terms of web design, it’s something that we all run into everyday with different websites.
Five of the biggest design problems are easy fixes. I’ve worked with web designers, businesses, marketing “experts”, and other front end developers and its not your fault. It’s nobody’s fault, it’s just the way things are when you think its a good idea and then there’s subjectivity versus objectivity. I’ve seen a lot of websites with almost no major issues in terms of their website framework but lets talk about the color, image size, fonts, logo, and the content layout.
Most sites have a logo or text as the logo, a navigation (or two), an introduction that explains what your site is all about, maybe a background image, and photos. Lets start with logos and the “blank space” that is common with website designs. So after you paid for your fine artwork and million dollar logo design, lets see what’s wrong? So check out this link as an example reference.
1. The logo, placement, symmetry, and quality.
I’m using some fake demo websites to test, along with some quick and dirty raw code so ignore the mistakes for the quick examples. The logo on the left is a square shape layout on a right hand navigation so it creates a box look when you add it to your site while your navigation is horizontal so you get that extra space above or below the navigation.
On a small mobile screen it will look cleaner and get straight to the point if you have a shorter but wider logo design. Most companies like Apple, Microsoft, Nike or Starbucks (etc) will keep it simple with the top left spot. I can understand if you are trying to brand out your name or logo, then blow it up to get more real estate but it’s not balanced. A vertical menu could use a vertical or boxed style logo but you don’t want your a tall box logo for a horizontal menu.
2. The Fonts.
This is an easy one. Most websites I see online use the same web fonts, whether it’s Google fonts or just some default font. I do it too but keep in mind, fonts get old. They get used so much that people don’t really care about it unless they want to stand out a little bit more. It’s the little accents that people notice with a trained eye and the subtle differences that make something more alluring without going overboard. Everyone cares about the font when it’s too hard to read or just a bad font they’ll think an item looks cheap because the font looks inappropriate. So get some new fonts and change the ones that aren’t doing the job. Its something really small and simple but makes a big difference.
The basic rules is don’t ever use joker or comic sans fonts. It’s garbage. There’s a real subtle difference to some people but fonts will change the way you shop, judge a product, think about the item, and the list goes on. Its all about perspective and how you want to present yourself. It’s like fashion accessories in the typography world, it’s about trends, it’s art, its all about how you envision the world and utilize important typography with your clients, customers and viewers.
Imagine if Amazon sold products using bad fonts and bright colors that don’t look professional. I created an exaggerated example image but I wanted to show you important font is when you look at a product on a page and visualize how much of a difference things make. If you never heard of a power drill, you would think it’s some kind of toy or tool that is cheaply made to break apart after a few days because the font and marketing look so awful. Basic rule: don’t use bad fonts and NEVER use comic sans.
3. The photo.
So this is the easiest problem but also requires a good vision. Professional photography is not cheap but you could save money and purchasing stock photos or at least save money and buy a nice mini photography studio and learn how to do it yourself. A good camera can last a decade until you need to upgrade and it’ll bring a lifetime of memories. You can always use a camera phone but it really depends on the technology, lighting and all that jazz. So now that you have nice photos, you can ruin your website by ignoring the layout and just randomly placing images without thinking about structure. So what do you mean layout and structure? So let’s talk about a horizontal images and a vertical images.
Photos need to be cropped. I’ve seen a lot of sites where the faces get cropped out on mobile but on desktop, you can see the full image. Users might upload photos to a slideshow program or try to force a widescreen panorama image into a custom letterbox div or a slideshow, it can become a headache. All photos should have a center view and it depends on the layout if you need it zoomed in or out. Crop the photos, don’t expect the website program to do it automatically and understand that vertical images are great for vertical screens or if you’re trying to show the height of something. For the most part, steer away from vertical images, don’t be that person that takes every video on their smartphone in a vertical format! Please rotate it and make it horizontal, especially landscape views of something in a wide format- jeez. So the box layout is suppose to be horizontal, focus on images that fit that layout. Also images that tend to be panoramic, need to be short but wide. You have to consider the height in pixels.
Have you seen slideshows or websites where the image of the top of someone’s hair or the bottom of their body gets cut out of the picture when it’s supposed to be a full image? It’s basic math. An image that is 1200 pixels in width and has a height of 150 pixel is great for a banner but should never be used for a product gallery. As far as coding the the css for an image, always make it 100% width within their div box, and the height should be consistent with all sections within a webpage. Bootstrap is a good front end framework that does a nice job of aligning your contents and organizing your layout.
Also, the image color and quality are key. Don’t use old digital photos with a low resolution or small file size, it will look horrible on newer, higher pixel screens. Also the use of warm and blue tones can affect the user experience.
4. The overall color scheme
oh boy, so color is something that is dependent upon the designer, season, and marketing team. There are some basic color design rules, that I see people break and it’s usually ignoring dark/light balance and contrast on a website regarding text colors, background colors, and background images. Not going to lie, I make those mistakes by adding lighter photos on the top of the header but I tried to darken it so you can read the white text on the dark background.
Don’t use light (white or near white) text light (near white) background. Seems like common sense. The same goes for dark fonts on a dark background image or ultra light text colors on a light background, that’s just making it hard to read. There are some exceptions to the rule with various shades and the hover states but for the most part, it’s visually taxing on the eyes. Using an opacity or css property filters can also help. It’s not compatible on all browsers but for the most part, it does the job.
If you need help picking colors. Here’s a color scheme from Adobe. It’s pretty Bad A55. (sorry that’s an old cringey dev joke). the hex color #BADA55 looks like the text bad ass. ok never mind, moving on.
5. The contents and copy writing.
So I’m not a good content writer and definitely a bad copywriter, copy writer? but that doesn’t mean I can’t spot some wordy title or long sentence for websites. Keep the h1, h2, h3 (header) titles simple and straight to the point.
You’ll notice that I went a little overboard on the exaggerating the titles and subtitles of the photo examples of the two business associates mentioned abut but I wanted to illustrate of wordy tags. Whenever I visit a website that has the button “Learn More” under section with two or three paragraphs of information explaining about what the topic’s about, then I wonder sometimes “I have to read more? you already explained it, where’s the navigation to get to the point (contact, price, term…etc)”. I like the contact button to be found easily, cause there’s a 50% chance that I’ve already heard about your company or your name through social media, a friend, or the internet and now I just want to find out the price, see the images, or who to contact. Straight up, I like to get down to business.
I also wanted to point out that there’s a few sites with the bottom footer section that has a paragraph or two explaining something really redundant and seems like they are trying to cram all the webpages onto the homepage. That’s what the navigation is for, so I can save time, ignore the long advertorials and go straight to the substance or source material. I hope this helps understand the 5 biggest problems and mistakes that people make when designing a website.