What makes a website inherently “good” or “bad?” What kind of changes can take a great site and turn it into a messy experience for the user?
To answer your question, web design is a lot more objective than you think. While there are endless combinations of site elements and functionality you can incorporate, a plan starting with the user experience will dictate the best flow.
We went through and found examples of portfolio, informational, and eCommerce websites, some of which are overall fantastic, and some of which can use some work. Here’s how to tell the difference between a good and a bad website.
Portfolio
The point of a portfolio website is to showcase work. Here are some great examples of portfolio websites.
BrandHouse
This site is very simple, eye-catching, and vibrant. It gets straight to the point of showcasing work, showing off new branding for a client. Even though there is no fancy functionality, this site does exactly what it’s supposed to do, which is the most important part of web design!
Sagmeister & Walsh
This is a very impressive portfolio showing off a full branding project, including illustrations, animations, website, print pieces, art direction, touch points, and more. The clean functionality incorporates video clips, photography, animation, and a simple and fun cursor functionality. It also has very easy navigation for the user.
Alex Hunting
This is a very modern and sleek portfolio with excellent functionality and layout. The left/right scroll is different but easy to use. The photography is extremely crisp and represents the project well.
Bad Portfolio Sites
We won’t make any callouts with examples! But here are some general attributes of “bad” portfolio pages.
- Hard to navigate through different projects
- Not showing enough of the work that was done
- No explanation of the project or client
- Not telling the user what you did for the client
- Bad mockups
- Bad photography
- Overwhelming amount mockups/photography/animation (Showing off is cool, but keep it professional!)
Informational
Websites can be filled with important and valuable information, but if it’s not presented correctly, the user can get turned off quickly. These sites make it easy to read and understand the information they present.
OLIR Resources
OLIR specializes in storing and shipping vegetable oil in the Ukraine (there’s a company for everything). They have great usage of subtle animation and infographics to get their point across and make their information easier to understand.
There’s a lot of technical info on this site, but they do a great job of using design elements to break up the copy and make the site very user friendly.
Thinkful
This site’s blog explains extremely technical concepts. They do a great job of using illustrations, infographics, and photography to tell a story.
The blog is almost laid out like a digital book. Eye-catching visuals and good use of white space makes this very easy to read.
Nucleus Icons
This site allows you to purchase a set of 400 customizable tech icons to use for your business. For offering something that seems so basic, there is so much they can do (and did!) with these icons.
The site shows tutorials on how to customize, comprehensive explanations on how to use the set, in-depth analyses on how the program functions, and more. I’ve never seen an icon set have so much information. This site takes a standard product to the next level.
Bad Informational Sites
Again, no call outs, but here are some general attributes of “bad” informative sites.
- Pages and pages of copy without breaking it up can be overwhelming
- Outdated font styles
- No navigation through the copy
- Grammar mistakes
- Contrasting colors of copy and background
- No user interaction
eCommerce
The point of an eCommerce website is to act as your virtual salesman. It should easily allow the customer to browse your product selection and make their purchase without having to go to a brick and mortar store. It’s important to be eye-catching but still keep this process simple and streamlined.
ShopSkin
ShopSkin is a skin care brand in the UK. Their site’s search function is extremely user friendly, allowing you to search by skin solution, skin problem, or all products.
It also has really intuitive navigation, subtle animations, and basic functionality that makes it stand out.
Mr. Leight
Mr. Leight is a high-end sunglasses brand. Their site shows great use of the Parallax effect and a grid layout. They have high-resolution photography and a well-thought-out explanation of their products.
Their photography shows the product in use on actual models’ faces and in a standalone shot. Suggested products are listed under each product, guiding the user further through the site. An excellent example of an eCommerce site.
We don’t have a video or visual for this one because we’re pretty sure everyone who has the internet has browsed or made a purchase on Amazon at some point in their lives. Why? Because it’s so easy to use!
Amazon offers no frills shopping with a user-friendly search function. Their suggested product algorithm is always on point, the reviews are plentiful and helpful, their Prime program is revolutionary, their shipping and returns are easy… we could go on! Amazon is really the pinnacle of eCommerce web design.
Bad eCommerce Sites
Here are some general attributes of “bad” eCommerce sites.
- Bad or no search functions (navigation)
- Bad product photos
- Bad or no information about the product
- Shopping Cart is hard to find
- Adding/subtracting from the cart is hard
- Too much advertising/pop ups
