7

The grid in the MarkBoulton.co.uk website is functional on many levels and contributes to the usability and design of the site.

The grid is composed of five thin columns that serve as the base for the website. This grid is followed throughout the different pages, but it is not quickly followed. 

The grid is broken in several areas, mostly by graphics and larger titles / headings. When the grid is broken, it keeps the site from becoming boring and redundant. Breaking the grid allows for some freedom when designing too, making it easier to accommodate odd-sized graphics. 

Korn Design is another example of a website with a well functioning and clearly designed grid. This site operates on a three column grid and, like Mark Boulton's site, it breaks the grid when necessary to keep the site fresh. 

6

Sexy Web Design

This reading does a great job at explaining the importance of aesthetics in web design. I thought the examples the author gave of websites that he had worked on to illustrate his points was very helpful.

I also loved his sense of humor, it made the read easy, fun, and informative.

It was helpful that the author went into detail about the design process for creating websites, especially when he explained the different steps a designer has to take when speaking with a client. 

I found it useful that he differentiated the steps and processes between designing for the web and designing for print.

ALA Article: White Space

I did not learn too many new ideas from this article, as I have learned extensively about white space, but it was a good refresher to read about some of the technicalities behind white spacing.

I found it interesting about how the author described his experience in working for a direct mail company and about how he could not use the design techniques that he had learned in school.

When looking at the two examples he gave, it made me feel as though the first design was really not a design, but an unappealing arrangement given little thought. I would find it frustrating to work for a company that WANTED this type of design. I feel as though the direct mail companies and other similar organizations putting out these kinds of designs should save themselves some money and design the collateral themselves, as it would not make much difference aesthetically.

ALA Article: Contrast and Meaning

Again, I found that I was familiar with most of the information within this article.

I liked the diagram <left> that shows the breakdown of contrast in a simple and clever way. 

The bit about exploiting human behavior as graphic designers I found to be comical, and also true. Oh the power we have!!

5

I have chosen the Modcloth website to asses for this assignment on web graphics.

Modcloth is a clothing website that features many web graphics throughout its pages. It's home page features a large slideshow that cycles through three different graphics. 

These graphics serve as illustrations and photographs advertising and rotate to keep the home page interesting for viewers. 

Other graphics on the site are composed mostly of photographs of clothing an merchandise.

There are several graphics used for structural purposes on the site as well.

A few examples of these are listed below:

All the web graphics on the site serve either a functionality or as an advertising ploy.

I do feel that the home page might be a little less overwhelming if there were less web graphics, but generally, I feel that this site uses graphics successfully. 

4

For this post I have selected two websites to review:

Wieden+Kennedy

Club Passim

Navigation:

Wieden+Kennedy is fairly easy to navigate through. It is mostly comprised of images, being that it an advertising agency, which could be confusing to users less familiar with web navigation. The site offers multiple ways to get to the same place (through images and the navigation bar), increasing accessibility. One issue that could be confusing to some is that they have two navigation bars, instead of the conventional one bar with drop-down menus.

Club Passim is slightly harder to navigate through as their navigation bar is much longer and has many more pages to view. Their site is more text heavy, causing it to be a little overwhelming upon first viewing it.

Lost?:

I did have some difficulty while exploring the Wieden+Kennedy site. Their home page features campaigns based on the location of the campaign, and not by the brand. It feels counter-intuitive to layout the homepage in this way as I would want to search first for a particular company they have done work for, and not which city the company is in.

Company > Locations

Passim has designed the different schedules of events they offer too similarly and it is easy to get confused about which schedule you are looking at. Their "class schedule" and "concert calendar" could benefit from some changes in appears for better clarification- however at the same time understanding the importance of consistency throughout a website.

How did you know where you were in the site?

Wieden+Kennedy has two navigation bars, as stated previously. Although this can be confusing to understand at first, it allows the user to see which page and subpage he/she is on at all times.

So, instead of having to click Work > Portland, with the work button disapearing once on the "Portland" page, the site shows you that you have gone to "Work" and that now you are in "Portland".

Passim uses a basic system of headers to differentiate pages. Although this method may not be as glamorous as Wieden+Kennedy's system, it works efficiently. It helps that the headers are all in the same color, font, and weight.

2

After reading this article about HTML, I understand the concepts behind presentational and semantic mark-up, as well as the importance of differentiating between them. 


I learned that semantic mark-up within HTML has to do with the logic and meaning behind the content of the website. It should not be used to style a website, but rather to assign contextual meaning to information and the way it is laid out.

For example, heading tags (<h1> through <h6>) should be used to denote the order of headings and not the size. Although <h1> generates bigger text, it should not be used to make the third heading in your code bigger. 

Presentational related objectives, such as making the third heading of your page bigger, should be created in CSS. Style sheets are used to assign visual attributes to the content in a website. 

It is crucial to use semantic mark-up for a variety of reasons. Not only does it create hierarchical organization, it also allows for disabled people to understand the layout and meaning of a website.

Semantic mark-up is necessary for screen readers to be able to communicate the meaning of content accurately to visually disabled people. 

For example, if a word is set in bold <b>, it gives little to no direction as to how to communicate said word. With the semantic tag <strong>, a screen reader knows to say the word in a powerful way with heightened emotion.

Semantic mark-up directly relates to Section 508 in that it allows disabled people to access information from websites. 

It is a non-discriminatory way of presenting and communicating information to everyone. 

 Photo shoot WIN!

Check this out

1

Below are a couple of things I have learned already from being in this class:

1. Ellen is one cool cat.

2. HTML is a mark up language

3. Simmons offers free web space for students

4. Image tags do not need to be closed

Quesiton:

Is copying code from another website illegal?