Wednesday, September 30, 2009

Minor Project 6

  • Comment on what David Siegal did in 1997.

  • David Siegal invented HTML as a method to visually lay out websites. Distributing content through tables was restrictive in that designers became contingent on visual layout of the page. It was a solid advancement in the way sites were produced, but as time goes on designers have found other methods that don't impede the presentation of the site as much.
  • What's wrong with <>
    elements?

  • <>elements were meant to replace the cells within a page, but they increase the size of the file, and errors within the page are much more likely.

  • What is the "naked structure"?

  • The naked structure is displayed when the cascading style sheets are removed from a web page. Viewing a page while it is "naked" will give you all the content of the page without any of the visual content impacting it. This is a good reminder for designers to place page content above visual layout.

  • What significance of lists?

  • Lists are useful because they are a convenient way for designers to arrange the content on a page that is logical and understood by everyone.

Minor Project 10: Site Map

Minor Project 11: Static Home Page


Wednesday, September 23, 2009

This is the work flow I would use in order to isolate each design obstacles and come up with the best solutions to make a quality website.

Work Flow:

Design Brief
Thumbnail sketches
Content research/information architecture
Wireframes
Site Map & Navigation flow charts
Writing for the Web(navigation, labels, heads & copy)
Prototypes using Photoshop
A working prototype/mockup using Photoshop, Fireworks or Dreamweaver
Addition of placeholder pages/images/dummy text
Replacement with actual content
Usability testing
Revisions/final testing
Finish site/client presentation

Minor Project 8: Grey Boxes

Tuesday, September 15, 2009

Minor Project 4: Design Brief

I chose to make a website for the Nicaragua Alternative Spring Break.

There is no reason a simple informational site like this should have a navigation system that is even remotely confusing. I would like to stress simplicity/intelligibility above all. The secondary objective is to provide the site with quality aesthetics; but these two objectives go hand in hand with creating a site that is both effective and approachable.

For the sake of simplicity, each page will feature a similar layout, so the viewer can locate the necessary information contained within each page with very little effort. Each page will be themed with its own tertiary color, which will also be reflected within the navigation. This will assist with making the the site more logical to navigate and it will also support the aesthetics of the site by giving each page its own unique look. Each page will contain a considerable amount of photos elements. This will give the pages diversity as well as make the page more pleasant to view. The photos can also portray the trip in ways that text can't. When I go through all the information and decide which pieces of information are going into each page; I may decide to add a sub navigation within certain categories, but seeing how this could farther complicate the site, I will try my best to organize each section with visual hierarchy so that each item of information is clearly defined and contained within its own space.

I have some pretty solid ideas as to how I want the many elements on my page to look and behave. I hope I can achieve the goals I have set for myself because I believe it has the potential to become a fantastic website.

Tuesday, September 8, 2009

Minor Project 2: Student Website Critique

I chose Alison Ambrosi's website to critique from the websites about Quinnipiac's alternative spring break trip

1. Describe the "look and feel" that governs the web page/web site.

The design of the site is relatively simple, for the most part, the information is logically distributed among the various pages, which are all easily found with the above navigation. Each page consists of a main photo element followed by the main text content of the respective page. There is also a side bar on each page which provides additional images and bits of information. I feel like the site's heavily reliance on images goes a long way to express to the visitors what the trip was like, and it gives future students who go on this trip an idea of what to expect.

2. Comment about how the use of the formal elements of design support (or do not) this "look and feel" as it applies to: color-contrast and harmony; selection of images; the color key of those images; color for information architecture; type family choice and type setting; use of white space (negative or empty space), spacing in general and the use of graphic elements such as rules etc.

The site generally makes good use of the space it is given. The two main colors(pale yellow and blue) of the color scheme are not the colors I would chose, but they work. The third color should be rethought. The darker yellow does not go very well with the pale yellow. The darker yellow is actually the theme of the "About" page and when you compare it to the green, red or bright yellow-orange of the other pages it is evident that it is a weak color choice. The dark yellow is also used in the navigation.

3. Comment about the layout of all the web pages of the entire site. Does the design of the basic page architecture (header, body, footer and other elements) create a over all unified design?

The pages of the site have some elements that are inconsistent. All of the pages have the information contained within neat white boxes and colored banners which colors follows the theme of the page. The "About" page has its first grouping of information without a white background or colored banner, which looks out of place when all of the other content on the site follows a different format.
It is also bothersome that there is no clearly marked link to go back to the home/splash page.
This is especially troublesome because there is a page that can only be navigated to from the home page. I feel like both of these pages deserve a spot in the main navigation; they could take the places of the "ASI" and "Blog" links because these links belong in an "additional information" section, plus they are a little confusing because they take you to 3rd party sites.

4. Comment about the following if it applies: visual hierarchy of elements and of type and how it promotes readability.

With the exception of the "About" page, every page follows a logical visual hierarchy that makes use of both text and color. These pages all have a main colored banner which states what the subject of the page is. Sub categories use similar banners, but they are smaller and use different text. This system allows people to quickly understand how the information is laid out on the page within the first second of of viewing.

5. Does the web page work? Is it successful? Why or why not?

The site undoubtedly has its flaws but it contains elements of a successful site. It has a simple navigation system and it is very informative with logically placed photos and text.