What makes a Web site successful? Does it have to look beautiful to be a great site design. Can a site work great without looking great? How do we measure good and bad site design?
In order to discuss this topic fully, we’ll need your input. Share with us a sample of what you think is a great Web site design (dynamic images, great concept, interaction, etc.) and a sample of an awful site design (poor interface or navigation, low quality images, clutter, etc.). Please choose a site that you visit frequently: a restaurant, hairdresser, auto shop, dealership, school, city, local organization, your gym, bike shop, parks, bars, movie theaters, etc. Please do not google “Worst Website Ever”, lets be a bit more creative and original please.
Details:
- Post your response with links to your blog before our next class. Be ready to discuss your answers with the rest of the class.
- Please write at least a paragraph on each.
- Choose one example of GOOD Website design, copy and paste the link. Explain why you think it’s good. What makes it good? Why is effective? Why is it better than its competitors?
- Choose one example of BAD Website design, copy and paste the link. Explain why you think it’s bad. What makes it bad? What’s the worst part? What frustrates or annoys you about it?
- Due before the start of our next class.
{ 28 comments… read them below or add one }
Bad Website Design:
https://www.painthorsestallions.com/home.html
- Sloppy, unorganized and distracting. I really dislike Marquee’s especially when it’s displaying important information like on that website – maybe it’s just me (ADHD), I can’t be bothered waiting for it to scroll across. My favorite part is the hidious dotted box thing that’s HUGE compared to the rest of the site – not to mention the TINY almost unnoticable navigation at the BOTTOM of the page – betwixt a bunch of adds. ughh..
Good Website Design:
http://www.ponyvillefarm.com/
- Clean. Simple. Working color scheme. Navigation is obvious and Prominent as is the logo. You know excatly what’s going on as soon and you come across the site. My biggest peeve is graphics and this site hosts Attractive, well places graphics/images.
What makes a website successful ? When the audience/individual adjust the chair to kick back, surf the site with ease, grab something to snack, and stay up late. The color balance is pleasant with the eyes and brain. If it is video or audio the viewer does not have distorted and static content. Site is access able to navigate and links to other web sites. Font is at a minimum of 12 (in my point of view). Font is very important for health reasons if you have to quinch your eyes or get a head ache trying to read the small print or font even if you use fonts that the letter looks like a design or it inter-twains with another letter or number it is confusing just talking about it.
No, the site do not have to look beautiful to be a great design – what good is art and the intended audience can not navigate or have great balance to the eyes. It is not just the image it is where you place the image and text. You can have a black/white, blue /gray, or pink/green, if it is with ease, balance, and makes sense and have a mission statement or explain what it is and why it is so popular or the benefit of the user. Is it friendly to the end user.
Here is a good site that is beautiful and the colors are soft, font’s are placed with balance, status bar is functional: http://www.estellemusic.com .
Here is a bad site that is no color balance, images just don’t make no sence. It is font in front of the wrong funky image and you have to figure out by surprise to navigate to another link by suprise from clicking on it. It seems that this is the rough draft and the designer just said the heck with it, I call it a JOKA SMOKA: http://www.feefiefoefirm. com .
Sincere,
Pinky Phang
Good Site:
http://www.kirupa.com
Flash resource with efficient, easy-to-use interface. It’s a specialized site, so you ought know what the site is for. If not, the top black bar and the left navigation bar lay out the options clearly.
Bad Site:
http://www.geocities.com/kirbys_ice_kream/
Obviously made by a kid. Navigation is shoddy, as it opens in a popup window without navigation controls (such as a back button). Images are linked without pages, so the only way to backtrack is to reload the whole site again.
Good site: http://every37.com/
The every37 website is beautifully composed and user friendly: very simple to use, organized, well written, and graphically intriguing. The ambiance of the site is indicative of the life or death nature of the information being provided.
Bad site: http://www.lanyardsupply.com/
Plain and simple, this is just an unattractive web site: no visible company logo or obvious indication of the name of the business, in addition to the hideous color palette, goofy run-on verbiage, and the never-ending scroll down of information.
Good Wepage
This webpage is a good design because it is simple to navigate, easy to read, contains a good color pallete and contains all the good basic design qualities. The photos, text and content are all high quality without making your graphics card explode.
analysis above http://champions-online.com/
Bad webpage : http://www.rocksforkids.com/
I find this webpage disoriented and confusing. the text is several different sizes and colors, and the photos are all over the place with no design concept in mind.
I chose two websites for academic institutions since the communication objectives are more or less the same. Both have a lot of links and try to appeal to a broad variety of audiences.
Good Site: Stanford University
http://www.stanford.edu/
This is a nice clean site with a consistent color theme, which is consistent with the university’s school colors and architecture. The key navigation is easily found along the top in the usual place with the option of displaying expanded menus without relying on Java scripts. The main graphic is a shot of the campus that grabs attention without distracting. It is interesting to note that the main graphic varies across visits. The image the site loads changes every couple of minutes (which can be seen by refreshing) which provides subtle variety without a potentially distracting slide show. Clicking on the image does allow the user to view a slide show. There are a lot of links but they are clearly organized in terms of how the viewer would want to use the site and are located in expected places along the top, left column and right column. The text also has a good hierarchy and the graphics associated with each group of links (with the possible exception of Events) reinforce the approach or content of each.
Less Good Site: Alan Hancock College
http://www.hancockcollege.edu/
The base color theme is fine (blue and white) but the text has a variety of very bright non-complimentary colors (red, orange, yellow and green) that are not aesthetically pleasing and makes it difficult to focus attention. One of the set of navigation groups are in navigation buttons in the center of the page and also in bright colors without a clear theme (I’m not sure why the bond measure is included as the fourth of five items, while the others have a student service theme). The navigation buttons at the top of the page add to a sense of clutter in the site. The navigation links on the left look OK, but I think that it would have been better or organize them thematically. Overall the site seems disorganized. I’m not sure that I would have used the main image they have unless the key purpose of the school is viticulture. Even then, it conveys no sense of a college campus or community.
There is a good web page that summarizes some big web design mistakes:
http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html
Interestingly, I have some issues with the design of that page, not the least of which is the location and prominence of the advertising links, which are located in should be prime real estate for content. Perhaps that’s intended irony.
Example of good web design: http://cms.bsu.edu/
I like this website because of the simplicity and user friendly interface. The color scheme is tasteful and SIMPLE! The navigation buttons are big and change colors when the user hovers over them. The buttons change to a color that follows the color scheme beautifully. The text is readable and the paragraphs are formatted very well.
Example of bad web design: http://www.lawnsigndirectory.com/
I dislike this website because of the randomness of colors, pictures, text size, and text placement. The website’s logo looks unprofessional and lacks creativity. The navigation links are crowded, unattractive, and do not interact with the user’s pointer. The overall look of the site clearly tells the user that tasteful design was the last priority.
Good Site: http://hlagroup.com/
I like this website because the layout and organization is very simple and user friendly. I thought it was great that when you enter the website, it starts with layers of trace because that is the intro step when it comes to landscape designing. Once you enter the site, you automatically know what it is about because it takes you directly to that page. There’s a lot of creativity, especially with the scrolling features and layout.
Bad Site: http://thebadwebsite.com/
This website is very random and there is no organization to it. It is very obvious that the designer did not care for the page and purposely made it horrible, calling it “the bad website”. Everything on this website doesn’t seem to make sense, especially the questions/comments (underlined) and response (plain text). Although it looks like a mess, the links work fine (the underlined words).
the good: http://www.sculptor.org/
- really simple and sleek look that gives it a sense of professionalism; easy to navigate through; six words is all it takes to tell you everything about the site; and interesting high quality photos are always nice
and the bad: http://smallwebsites.us/
- way too busy; information comes from every direction; could cause a seizure; terrible color choice; I had no idea what to do when I first went there; even with information split into sections, it seemed all over the place; it’s basically an eye sore
The good: http://www.mariusroosendaal.com/
-I looked though a lot of portfolio based websites in the past couple of months and this was one of the best I found. It has a slightly complex, but unique navigation. The sites code is clean and everything seems polished and well thought out. It shows all the projects and important information clearly and quickly and contains it all to a single page. For skimming purposes the site is incredibly effective. It could use slightly larger thumbnails for the portfolio pieces and I wish it had slightly more information regarding projects.
The bad: http://www.greenfieldanimal.com/
-Navigation and information wise the site gets the job done. But there are constant structural errors such as pictures clashing into each other as well as overlapping with text. On some pages the banner disappears while on other pages the navigation menu is accidentally repeated more then once. Lastly each page uses a different structure or grid so it feels like the pages are jumping around, making it hard to skim the information.
Good site: http://www.stylewars.com
Great site. Very interactive and easy to navigate. When you enter, it give you an introduction page so you know what the site is about. The images are high quality and dynamic . The most effective element is the graffiti.
Bad site: http://www.hamcli.com
This site is unattractive. The logo is not well done. No good color choice and backgrounds are awful. Use different text size. Animations need to be removed.
http://www.intel.com vs http://www.amd.com
The intel page opens to a screen where you choose your location (sometimes it auto detects if you have javascript on) and then to a screen where you choose work, play , or about. All these additional layers annoy and frustrate users who are not exactly sure where they want to go. What is stupid is that they have all those links on the page you ultimately arrive on, which overall isn’t such a bad page.
Verdict: BAD for the splash screens
The AMD page opens directly to the content you want. It even has a box to directly download drivers without having to drill down into tons of support pages. Additionally the products are displayed without wasting large amounts of space.
Verdict: GOOD for the driver download box on the first page
Good Website: http://www.trionworld.com/
excellent graphic, user friendly, informative, specific, Exquisite design, flawless
Bad Website: http://www.saccounty.net/default.htm
cluttered, small fonts, confuse users, too many paragraphs, inconsistent graphics
1) Example of a Good Site Design
http://www.etsy.com/
I chose etsy as an example of a good website because it is easy to read and the layout is very clear and straight forward. I also like the site because it sticks to only a few colors, uses high quality graphics and has effective navigation. The site also reflects the style of the users that would typically visit etsy.
2) Example of a Bad Site Design
http://www.davisbamboo.com/
I came across this site while researching where to find bamboo in the Davis area. The home page greets you with a low quality image of the name of the business and a picture with a neon green background. The navigation bar is consisted of three links which fail to even tell you where the business is located. The color of the text is hard to read against the background and there is no set text size throughout the site. All in all, this website is bad in every way (information, pictures, concept, navigation, colors)
A good website: http://www.tahoercd.org/
I believe this is a good website, because it is clean and very clear what the subject of the website is. There are very eye pleasing pictures/backgrounds. With an easy to navigate menu.
A bad website: http://www.siskiyourcd.org/
I believe this is a bad site. The words are different sizes, the menu is thin and off to the side. There is disorganized look to it.
1) Example of a Good Site Design – http://vector.tutsplus.com/
The most effective element of this website is it’s ‘ease of use’. There is a definite sense of order which facilitates efficient navigation within the site. It’s simplicity is an attractive feature (less is more).
2) Example of a Bad Site Design – http://websitetips.com/
Aesthetically, it’s very bland – a visual bore -lacks visual harmony. It appears that the same typeface is used throughout the entire site. The only variance is the size of the type, and an occasional color change. However, the worst part of this site is that it’s a navigational nightmare with broken links, etc.
Good site: http://www.moma.org/
This site is intuitive, if I ask “how do I visit MOMA?” and there is a static tool bar above the fold and every page has “breadcrumbs” to find your way back to the home page. The site is a great example of flexibility with in a grid.
Bad Site: http://houstonorchidsociety.org/
The site is never ending, busy, and the viewer feels no sense of purpose or hierarchy, I have no idea where I’m supposed to read first. The worst part of the site is a toss up between the very long left tool bar or the “newcomers group” page.
Be sure to include the http:// when you type the address!
Due Next Class
1 In my opinion one of the most ingenious page I have encounter whit is Worth100.com this web page is really cool fist of all because I have been interesting in pictures and how to manipulate them and make change in them. My friend show me this page over the weekend I was impress on how this page is organize, not like other pages this page has tutorials contest that stared as fun and also professional and you can earn money whit that. Also is not only for a Photoshop users also a photographer can use it a poet can use it this is a great web site if you are an artistic person or you like wear photos
2http://www.harrold.org/rfhextra/antivirus.html this is a bad web side because there are so many color and if you look at the color yellow to much time there is a moment when i felt sick also the text is to small and some times my eyes hurt just by focusing them in the text so much time
Good site:
Asha Yoga, http://www.ashayoga.com/
Beautiful site. Well organized. Images of people immediately drawn in attention. Information is easy to understand and the site is easy to navigate. Color palette is simple and elegant. It truly represents the calm, balanced nature of this studio.
Bad site:
Albuquerque Yoga – Yoga every Day, http://yogaeveryday.org/
Aside from not being very aesthetically pleasing, this site’s navigation bar is difficult to read and the main page does not inspire much desire for attention. The pages are very simple, just large green text and nothing more. The blog is choppy and difficult to follow. I wouldn’t want to spend much time exploring this site.
bad website: http://netec.mcc.ac.uk/JokEc.html
its is very plain and very text heavy and the joke arnt very funny.
its seem like they are trying to put everything on one page instead for breaking it up in multiple pages some color would help bring more people to the site.
good website: gametrailers.com
is one of my favorite website because it keep thing at easy access
and it has a very good search engine and it doesnt drift away from what it is trying
it do.
Heather,
I am in your class. I read through these web design comment posts and learned a lot. However, my comment to you and not the class yet is, I notice that on almost every “good” site exists there a cardinal flaw or two that would rauchously turn-off another student!
Also, I like your class teaching style–confident, approachable, realistic. I have had some real ringer terrible “profs” at FLC–unhelpful, un-smart, unsympathetic, unrealistic, inconsistent. I am a harmless beginner, but I hope your class will stay progressive and reasonable!
On two adjacent browser pages for one subject, “scroll saw”, on the top sites for each page I found both 1) a page with no (0/0) common mistakes (www.scrollsawer.com ) and 2) one with 66% (10/15) mistakes: (kerrysworld.com)
A+ web page http://www.scrollsawer.com/ :
1. doesn’t self-hype (welcome to…)
2. one second to understand and see focal point
3. one second to load any page
4. three or less text fonts
5. good white space
6. logo on top of every page
7. privacy and legal notice exists
8. no justified text
9. all important content on first page
10. can back out w/o reloading
11. comfortable, clean, simple graphics and text
12. ads not in prime real estate
13. nav buttons change color when hovered over
14. entry page has mission statement prominent
15. few paragraphs, consistent graphics
C- Web page http://kerrysworld.com/ :
violates 1,2,3,4,5,6,7,11,13,15 above!
Good:www.creatif.com
I really like flash and I think this one is a fun site and the graphics are really neat. I probably should of picked something like etsy.com because it is the kind of site I want to build.
Bad: http://www.dokimos.org/ajff/
I don’t think I need to explain why I don’t like this site.
Hi!
Bad Site- http://aqualandpetsplus.com/Bird,%20Parakeets.htm
This site about Budgies has a lot of good info but it’s not very nice to look at. Also, the page is very long; your finger grows weary from scrolling
Good-http://www.bearskinrug.co.uk/
This is one of my favorite sites! It is very easy to navigate, clean, and simple. The best part is the link page, its very orderly and you can find exactly what you want.
What I immediately didn’t like about the website was a quick 4 picture comeup that quickly blanked out and went to a sign up for something. I was turned off by presumably having to register to get into their site. Their name is at the top but with all the visuals, it took me a few minutes to find it. To me, there was just toooooo much going on too fast.
I really liked this website. It loaded quickly, had pictures in their services bars and their navigation bars were prominent and easy to use. It also had a strong, professional, engineering color scheme. Content was laid out well and easy to use and follow.