The 5 biggest design problems with simple websites.

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. I want to talk about the top 5 that I encounter on daily basis.

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 crap load 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.  It’s pretty much routine.

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 whats wrong? So check out this link as reference.

 

http://seattleninja.com/two-websites/

1. The logo and setting it right.

I’m using some fake demo websites to test but you can see in the example below. The logo is a square shape layout so it creates a box look when you add it to your site while your navigation is horizontal so you get that ugly blank space all over the fucking the place.

Image A.

example-logo

 

So here’s a logo cropped (image B) so it looks a lot tighter and aligns and gives a nicer view. On a small mobile screen it will look cleaner and get straight to the point. 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, all power to you but it if you want to organize your top menu area correctly…well then, lets talk about that. A vertical menu could use a vertical or boxed style logo. If you have a horizontal menu, it will look more balanced and kill the blank spaces on your site with a horizontal image – see the photo below.

Image B

logo-2-example

 

2.  The Fonts.

This is a simple one.  Most websites I see online use the same fonts, whether it’s Google fonts or just some default font. I do it but keep in mind, fonts get old. They get used so much that people don’t really care about it.  Of course, they will care when it’s too hard to read or just an ugly font they’ll think an item looks cheap because of the font. Get some new fonts, seriously. Subtle differences like this a really noticeable after hours of reading online or looking at different companies. Its something really small and simple but makes a big difference.

Here’s a quick example:

Image 1
cheapo-font

Image 2

nicer-font-example-toy

 

Image 3

comic-sans-font

The top image (image 1) uses joker font and comic sans, 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 fashion, its about the times, the trends, it’s art, its all about how you envision the world and utilize important typography with your clients, customers and viewers. Image 3 is from Reddit but it carries a lot of  truth about all aspects of the company image and business design.  I don’t wear a suit & tie or even come close to a Fortune 500 company but I still know that you never, NEVER use comic sans.

3. The photo.

So this is the easiest problem. My guess is that everyone can’t afford a professional photographer for a website, Hey, no worries we can get close to it.  You can always purchase stock photos or at least save up a few hundred dollars and get a nice camera and just learn how to do it.  It’ll last at least 7 – 8 years 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 those 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.

image 3

images-example1

image 4

images-example2

So obviously the top image (image 3) has faces cropped out and you’re thinking, nobody is that sloppy, however, there are times when users 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 someones hair or bottom of their feet get cut of the picture?  It’s basic math. An image that is 1200 pixels in width and has a height of 150 pixel is great for a banner or some kind of tiled image that repeats itself but not for an image with a fashion item or a product showcase. In terms of images on a screen, 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 you html5/website layout.

Also, the image color and quality are key. Don’t use old photos from your 1995 ~ 2003 digital image (jpg or png) album that was stored a long time ago with a resolution of less than 72 pixels and height/width of 100 pixels. it will look like crap on new screens. Also the use of warm and blue tones can affect the way look at your overall website. Let’s move on to color, that’s an important aspect of website design.

4. The overall color scheme

oh boy, so color is something that is dependent upon the designer and what’s hot but there’s some basic rules that people tend to ignore. The rule that I see broken the most is the dark/light balance on website regarding text colors, background colors, and background images. Matter of fact, I sort of made that mistake with this blog post by adding a lighter photo 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 or colors on a light (near white) background. 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 hover states but for the most part, just stop.  The very top image (image A) is an example of light background with light text.  Using an opacity or filter 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 a web dev joke). the hex color #BADA55 looks like the text bad ass. ok nevermind, moving on.

5. The contents and copy writing.

So I’m not a good content writer and probably a shitty copy writer but that doesn’t mean I can’t spot some bullshit title or wordy sentence that is used for website layouts.  Keep the h1, h2, h3 (header) titles simple and straight to the point.

On this link here, you’ll notice  that I went a little overboard on the exaggerating the titles and subtitles and wanted to get into more of an observational and subjective outlook.  Whenever I visit a website that has the button “Learn More” under section with two  or three paragraphs of information explaining about what the website is about, then there’s a little ninja in my head that tells me in my mind, “Ah shit I have to read more? you already explained it, where’s the navigation to get to the point (contact/price/terms/etc)”.  I like the contact button to be found easily, cause there’s a 50% chance that I’ve 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 some shit that’s really trite and then they want you to read more about their company.  If I’m on a website that has more than 600 words or 3 – 4 paragraphs in the main or top section of the homepage and then I’m reading another paragraph or two in the footer section and I still have to learn more or read more, I’m not going to read more, I’m fucking done.  That’s what the navigation is for, so I can skip all the bullshit and the long advertorials when I can get straight to the substance. You can  put that info in the about page or the mission statement or write some advertorial blog about your company so you can pimp it out to readers.

Well thanks for checking out my blog about 5 basic website design problems and leave a comment if you want to.