Zachary Miller

IT IS 2300 – L01

IT IS 2300 – Lab 4 – Website Design Critique

Criteria 1: Not a good design

Site URL:

Title/Company: MarkerTek, “America’s Broadcast Supply House”

Users:

  • This is a site that we use a fair amount at my part-time job. We use it for the same purpose that is stated on the site, to buy broadcast equipment and accessories. So that tells me that the users of this site would primarily be those in a commercial or enterprise setting who are searching to buy anything from computer rack screws, to bulk cabling, to HD cameras, to any other type of infrastructure.

Visual Design:

  • From the first second this site is opened, you are bombarded with various labeling and advertisements. While on one hand, those who need to use this site may not be impacted by the cluttered design because they know what they are looking for, it still does not follow design guidelines to make for a better user experience.
  • The main thing that keeps this from being completely unusable is the dominant navigation bar at the top of every page that catches the user’s eye. The fact that it is also a more dominant color compared to the rest of the page also contributes to its usability.
  • To the average person, the design that you see upon first logging on appears extremely cluttered, which could drive away first time customers (as stated in the intro video on Moodle).

Navigation:

  • The two options apparent to me for navigation of this site are the main navigation bar in the header, or the search function.
  • Being that this is a wholesale site, the navigation bar is broken up into several categories of technical equipment. When you hover over one of the options, a drop-down menu appears that has either a few, or very many links to sub-categories. Once you figure out which sub-category you want, you click on that link and it redirects you to product pages that match that description; kind of like amazon product pages.
  • The search function is incredibly simple to use compared to the navigation bar. But it does have one caveat, which is that you must know what you are looking for. Once you have entered your search, it will take you directly to product listings that match the criteria you entered, and that is all that you have to do.

Implementation:

<html>

<div id=”Container”>

</div</html>

Criteria 1: Great design

Site URL:

Title/Company: BlackmagicDesign

Users:

  • BlackmagicDesign is another company that is well known at my job, they produce and distribute high-end video production equipment for live and recorded broadcasts.
  • The users of this site would be those that are looking for such equipment to buy, software packages, user manuals, and community forums.

Visual Design:

  • To my eye, this site is beautiful and well-designed. The colors do not work against each other and all of the content is ordered in a non-confusing way so that the user can find exactly what they are looking for.
  • This site is aimed towards the same market as the site I reviewed first, but the execution is far more thought out and well done. Every page is compiled in the exact same way so that the content is presented in a good looking and user friendly manner that limits frustration when looking for a product.
  • The color choice was kept simple for this site. Just like their products, the dominant color for the navigation bar and the division headers are gray, with orange accents scattered throughout the site. Overall I think that the choice was pleasing to the eye, and makes a clear representation of their product and what they are about.

Navigation:

  • The one and only option for navigation on this site is the navigation bar.
  • This particular navigation bar is broken up into everything that their site supports. So instead of having to hunt for a link or resource, it is all right there at the top.Just like any other product vendor, when you click the products link, you are taken to a great looking product page that presents their items in an unconventional but very nice way.

Implementation:

<html>

<div id=”Container”>

</div</html>