ARTM2210 Intro to Web Design

Just another Intro to… site

5 SITES!

After a trip to webdesignledger.com, one may notice that several sites posted to the blog have different ways of navigation. For example, on the Fantastic Examples of Package Design post, different posts use different tactics of bread crumbing. The “Ish” Watch page requires using the back button to get back to webdesignledger.com. The next page, Grady’s Cold Brew, opens up into a new window. This makes it easier to get back to WDL without using back buttons for much navigation. Both sites are from lovelypackage.com, and have a one page layout that scrolls down with images of different packaging types. The blog reviewed was smashingmagazine.com. The first post was entitled The Elements of Navigation. On the top of the site the logo enables viewers to go back to the Smashing Magazine homepage. There are horizontal and vertical navigation bars, however, the vertical one gives more specific options for viewers to navigate different areas of the site. The part The Elements of Navigation was under is highlighted as “UX design.” Since this part is highlighted, viewers know where to go to find similar articles. Different subjects have blue type, and subcategories are black. On the side of smashingmagazine there are several sites that are related to design and web development. One of those websites is teamtreehouse.com. The homepage gives options to visit either web development, web design, or iOS development sections. The main navigation bar is placed horizontally on the top. The Web Design option when first click starts off with an overview video. There is then an option to “get started.” The last navigation page in the web design portion gives links to several instructional videos on how to learn web design techniques. Then to get back to the other options, the viewer is required to click the home button on the top navigation bar. Next to the navigation bar is a search bar, incase the viewer has specific keywords or terms in mind. The last website viewed was abduzeedo.com’s Roy Lichtenstein tutorial. The navigation bar is placed vertically on the left, and gives viewers four main options that branch out into subcategories once scrolled over. Underneath the navigation bar are contact options and for users to login to the site that have a smaller font size and are grey text instead of white like the main search options. The search bar is placed on the top right corner. It is easy to navigate from this article to others because the titles of each tutorial state what programs they use. Also, each article has a description of what programs are used and where to find them in the navigation bar. The bottom of the article also has options for the viewer to learn more about different programs. Many of the sites reviewed used vertical navigation systems and different color choices to differentiate search options. Since many of the articles have similar topics, it is understandable why similar navigation tactics are used with each website previously stated.