Mercedes Beach This is a screenshot for the music based website, Pitchfork. Their site has grown tremendously within the past several years, and this is a recent redesign to accommodate the amount of content they produce daily. Their content spans from video footage to album reviews, from music news to artist interviews. To deal with the amount of material, the site remains simple and organized. The website’s strengths are legibility, clear hierarchy, contrast, and organization. Pitchfork stands out very clearly as the complete title of the site. The content is used to grab attention, while the title of the particular divided section is smaller (ie: “Bon Iver Expand Tour” is larger than the “NEWS” title above it). News article titles are linked and slightly gray. Color is also employed on the front page to highlight featured articles underneath the navigation bar. There is also strong consistency throughout the different sections - for instance, titles and links change color over hover to coral, and album titles are italicized in longer links. To be honest, the amount of information on just the front page alone is overwhelming. The designer had a lot to consider and incorporate.

Mercedes Beach


This is a screenshot for the music based website, Pitchfork. Their site has grown tremendously within the past several years, and this is a recent redesign to accommodate the amount of content they produce daily. Their content spans from video footage to album reviews, from music news to artist interviews. To deal with the amount of material, the site remains simple and organized. The website’s strengths are legibility, clear hierarchy, contrast, and organization. Pitchfork stands out very clearly as the complete title of the site. The content is used to grab attention, while the title of the particular divided section is smaller (ie: “Bon Iver Expand Tour” is larger than the “NEWS” title above it). News article titles are linked and slightly gray. Color is also employed on the front page to highlight featured articles underneath the navigation bar. There is also strong consistency throughout the different sections - for instance, titles and links change color over hover to coral, and album titles are italicized in longer links. To be honest, the amount of information on just the front page alone is overwhelming. The designer had a lot to consider and incorporate.

Joanne Lim I chose the ascreativedesign website. I like the consistent san serif fonts that are used throughout the webpage. Nevertheless, the interactive color logo uses a splash of color and a switch up of sans serif to create a contrast. The webpage is really well aligned , you could see a simple 3 column layout. With a easy black/beige theme to follow throughout the website. As you could see, the website focuses on its simplicity and appreciation to type fonts. There aren’t too many distracting elements going on the page. It could be easily navigated. There is a clear distinction between the header, body and footer of the page.

Joanne Lim

I chose the ascreativedesign website. I like the consistent san serif fonts that are used throughout the webpage. Nevertheless, the interactive color logo uses a splash of color and a switch up of sans serif to create a contrast. The webpage is really well aligned , you could see a simple 3 column layout. With a easy black/beige theme to follow throughout the website. As you could see, the website focuses on its simplicity and appreciation to type fonts. There aren’t too many distracting elements going on the page. It could be easily navigated. There is a clear distinction between the header, body and footer of the page.

http://www.whatalovelyname.com/ This website has a beautiful serif typeface that juxtaposes the hand drawn layout and it gives it a cool look. The large and clear categories, mixed with the typeface of the logo, added with the colors of the page give it a baby feel but not too feminine. Some words in the menus are larger than others and this allows you to see the typeface better. The search bar has a nice and elegant typeface and when you use the search bar it takes you to a page with large title heads and image. The overall typeface gives it “an air of elegance and dignity” while still keeping it playful.

http://www.whatalovelyname.com/

This website has a beautiful serif typeface that juxtaposes the hand drawn layout and it gives it a cool look. The large and clear categories, mixed with the typeface of the logo, added with the colors of the page give it a baby feel but not too feminine. Some words in the menus are larger than others and this allows you to see the typeface better. The search bar has a nice and elegant typeface and when you use the search bar it takes you to a page with large title heads and image. The overall typeface gives it “an air of elegance and dignity” while still keeping it playful.

Grandpeople Review http://grandpeople.no/ The design firm Grandpeople explores the use of typography and integration of text and image. They push the limits of legibility and aesthetic to create some very innovative, creative designs. The thin weight of the type gives the layout open space that balances with the large images. Their gallery page has a nice navigation which allows one to comfortably browse through their work and gain a visual understanding for the company. The only design choice I would change is the about page. It doesn’t feel as designed in comparison to the other pages, also the body text is too wide and thick. It feels like a default type and could have been more carefully considered. Meg Smart

Grandpeople Review

http://grandpeople.no/

The design firm Grandpeople explores the use of typography and integration of text and image. They push the limits of legibility and aesthetic to create some very innovative, creative designs. The thin weight of the type gives the layout open space that balances with the large images. Their gallery page has a nice navigation which allows one to comfortably browse through their work and gain a visual understanding for the company. The only design choice I would change is the about page. It doesn’t feel as designed in comparison to the other pages, also the body text is too wide and thick. It feels like a default type and could have been more carefully considered.

Meg Smart

BYOUNGOK KIM Contrast White text on the solid blue background makes it easy to read. I think it has enough contrast. I changed it to the grayscale, and it still looks fine. I personally like white text on the solid background. Size Size of texts iS big enough. I like the big bold heading and subheadings. The smallest body text does not go below 12px which is fine. Hierarchy I think hierarchy is very clear. texts vary size according to the hierarchy, and the font weight also different. In addition, different typeface is used for body text and titles. Space This website is quite dense.I don’t see much blank spaces. The line spacing is below 140% of the text size. I think it needs more line spacing to make it easier to read.

BYOUNGOK KIM

Contrast

White text on the solid blue background makes it easy to read. I think it has enough contrast. I changed it to the grayscale, and it still looks fine. I personally like white text on the solid background.

Size

Size of texts iS big enough. I like the big bold heading and subheadings. The smallest body text does not go below 12px which is fine.

Hierarchy

I think hierarchy is very clear. texts vary size according to the hierarchy, and the font weight also different. In addition, different typeface is used for body text and titles.

Space

This website is quite dense.I don’t see much blank spaces. The line spacing is below 140% of the text size. I think it needs more line spacing to make it easier to read.

Kristen Erdelyi. 2 x 4.  A website that uses typography well is the design agency, 2 x 4.  The approach is minimal, simple and clean. It incorporates sans-serif fonts for the headlines and serif fonts for image descriptions and smaller text.  The website incorporates a color palette of black, grey and orange. The orange is used as an accent color and to draw attention to more important information. Hierarchy is presented clearly on this website as the titles are positioned at the top of the page in a bold sans-serif typeface while the titles of the images are positioned under the images in a very small serif typeface, thus achieving contrast. A short paragraph description of the work is presented in white type against an orange background. I think the orange background works in this context since the type is large and it only occupies a small portion of the page. However, if the type was small and took up the whole page, this would be very distracting and difficult to read.  The  organization of space works well on this site.  It appears clean and spaced out and at no point does the website feel cramped.  

Kristen Erdelyi. 2 x 4. 

A website that uses typography well is the design agency, 2 x 4.  The approach is minimal, simple and clean. It incorporates sans-serif fonts for the headlines and serif fonts for image descriptions and smaller text.  The website incorporates a color palette of black, grey and orange. The orange is used as an accent color and to draw attention to more important information. Hierarchy is presented clearly on this website as the titles are positioned at the top of the page in a bold sans-serif typeface while the titles of the images are positioned under the images in a very small serif typeface, thus achieving contrast. A short paragraph description of the work is presented in white type against an orange background. I think the orange background works in this context since the type is large and it only occupies a small portion of the page. However, if the type was small and took up the whole page, this would be very distracting and difficult to read.  The  organization of space works well on this site.  It appears clean and spaced out and at no point does the website feel cramped.  

I chose cofinery.com for its great use of a grid-based design, as well as its spacious and organized structure.  I think this type of structure is very effective for a home page.  While searching for a site I felt overwhelmed at times by homepages that contained too much information.  It made it uninviting and I wasn’t sure where to look first.   On cofinery.com we immediately see a stark contrast between one half of the page and the other.  The top, darker half contains an image and is basically a banner displaying the company’s logo and a very brief description of what “cofinery” is.  The negative space and lack of content helps us to focus on the content contained in the center.  A hierarchy is established pretty immediately as well.  The font reduces in size and boldness from their logo down to the bottom row of categories (Latest project, twitter, contact). The bottom white space is dedicated for details.  The white space is further broken down by font color contrasts, font sizes, weights and widths. There are clearly six separate categories which can be identified with all capital letters, a narrower width and bolder weight: 1) Who we are, 2) What is a co-op, 3) Shop, 4) Latest Project, 5) Twitter, 6) Contact. Although the information contained in each of these categories is a shade of gray and a smaller font size than the headings, the wider width and contrast of the font allows it to still be easily legible. Overall I think this site uses typography very well to organize the interface.  It considers the use of legible fonts juxtaposed to contrasting fonts.  Without explicitly using a grid structure, the designers created a strong structure that directs the users where and how to read the page. 

I chose cofinery.com for its great use of a grid-based design, as well as its spacious and organized structure.  I think this type of structure is very effective for a home page.  While searching for a site I felt overwhelmed at times by homepages that contained too much information.  It made it uninviting and I wasn’t sure where to look first.  

On cofinery.com we immediately see a stark contrast between one half of the page and the other.  The top, darker half contains an image and is basically a banner displaying the company’s logo and a very brief description of what “cofinery” is.  The negative space and lack of content helps us to focus on the content contained in the center.  A hierarchy is established pretty immediately as well.  The font reduces in size and boldness from their logo down to the bottom row of categories (Latest project, twitter, contact).

The bottom white space is dedicated for details.  The white space is further broken down by font color contrasts, font sizes, weights and widths.

There are clearly six separate categories which can be identified with all capital letters, a narrower width and bolder weight: 1) Who we are, 2) What is a co-op, 3) Shop, 4) Latest Project, 5) Twitter, 6) Contact.

Although the information contained in each of these categories is a shade of gray and a smaller font size than the headings, the wider width and contrast of the font allows it to still be easily legible.

Overall I think this site uses typography very well to organize the interface.  It considers the use of legible fonts juxtaposed to contrasting fonts.  Without explicitly using a grid structure, the designers created a strong structure that directs the users where and how to read the page. 

I chose this website because I tend to gravitate towards minimalistic designs, ones that have an airy and light feel. Though this isn’t my favorite website ever, it applies the basic guidelines for typography on the web. It has a clear hierarchy, somewhat of a high contrast, and readable font size. The site also made it a point to keep the text minimal for easy and swift reading, so lowering opacity wasn’t such a huge issue, this choice also helps to showcase the Architectural photography.

I chose this website because I tend to gravitate towards minimalistic designs, ones that have an airy and light feel. Though this isn’t my favorite website ever, it applies the basic guidelines for typography on the web. It has a clear hierarchy, somewhat of a high contrast, and readable font size. The site also made it a point to keep the text minimal for easy and swift reading, so lowering opacity wasn’t such a huge issue, this choice also helps to showcase the Architectural photography.

I chose the website http://www.cofinery.com/. I really like their use of typography and space. The large bold words are striking and draw your attention, making the user want to explore the website even more. but as I navigated through the rest of the site, I was a bit confused on what these group of designer actually do! They describe themselves as “top notch freelancers with a passion for creating cool things”, which according to me is not enough. Even as you visit other pages, their mission is still unclear.

I chose the website http://www.cofinery.com/. I really like their use of typography and space. The large bold words are striking and draw your attention, making the user want to explore the website even more. but as I navigated through the rest of the site, I was a bit confused on what these group of designer actually do! They describe themselves as “top notch freelancers with a passion for creating cool things”, which according to me is not enough. Even as you visit other pages, their mission is still unclear.

The company SustainAbility provides a unique website experience incorporating nicely considered web typography.  The home page starts with a nice sanserif logo at a medium size. It is contrasted by the size of the navigation bar placed directly to the right of it where small, sans serif type is shown. The header begins with comparatively large serif type. The type works very well with the sites hierarchy because the reader immediately understands what the company is about. It is also nicely spaced, and contrasts well against all other sanserif typefaces. Overall, the site provides a wide variety of type fonts and sizes that help the reader navigate through the site easily and effectively. by Jacob Hernandez 

The company SustainAbility provides a unique website experience incorporating nicely considered web typography.  The home page starts with a nice sanserif logo at a medium size. It is contrasted by the size of the navigation bar placed directly to the right of it where small, sans serif type is shown. The header begins with comparatively large serif type. The type works very well with the sites hierarchy because the reader immediately understands what the company is about. It is also nicely spaced, and contrasts well against all other sanserif typefaces. Overall, the site provides a wide variety of type fonts and sizes that help the reader navigate through the site easily and effectively.

by Jacob Hernandez 

204BeechThe whole site is clean and organized. I especially enjoy the plain colors: grey & red. I like the title font & the red opaque circle with an icon & type that is always posted onto the photos in the blog entries. The all caps looks clean and modern. I also like how the entry is aligned to the right, while the photos are floating to the left, but that that they are all contained in the middle, while the list of categories lie on the far right-side. I love the cleanness of the sight and simplicity of the sight. I would probably use a different serif font, but I like how they use both sans & serif fonts.

204Beech

The whole site is clean and organized. I especially enjoy the plain colors: grey & red. I like the title font & the red opaque circle with an icon & type that is always posted onto the photos in the blog entries. The all caps looks clean and modern. 

I also like how the entry is aligned to the right, while the photos are floating to the left, but that that they are all contained in the middle, while the list of categories lie on the far right-side. I love the cleanness of the sight and simplicity of the sight. I would probably use a different serif font, but I like how they use both sans & serif fonts.

Through color, hierarchy, contrasting type, and images, the UK Oxfam website clearly communicates a message and provides smooth navigation for the user. The majority of the site is set in Arial, with the main navigation bar having the largest font size on the page, which includes What We Do, Get Involved, Shop, and Donate. It is also the only aspect of the site that is white type set on a black background. There is a second typeface used minimally on the page - a serif typeface. It is utilized for unique headers, mostly as a companion to images. The rest of the headers are the size of the body type (10pt or 12pt) and black. The highlight of the website is its universal accessibility. By maintaining a fairly simple color palette, the site maintains a strong contrast, which allows for the website to be accessible to a wider audience. The website includes a page that states if there is any use of similar colors, it is purely aesthetic and contains no informational value.

Through color, hierarchy, contrasting type, and images, the UK Oxfam website clearly communicates a message and provides smooth navigation for the user.

The majority of the site is set in Arial, with the main navigation bar having the largest font size on the page, which includes What We Do, Get Involved, Shop, and Donate. It is also the only aspect of the site that is white type set on a black background.

There is a second typeface used minimally on the page - a serif typeface. It is utilized for unique headers, mostly as a companion to images. The rest of the headers are the size of the body type (10pt or 12pt) and black.

The highlight of the website is its universal accessibility. By maintaining a fairly simple color palette, the site maintains a strong contrast, which allows for the website to be accessible to a wider audience. The website includes a page that states if there is any use of similar colors, it is purely aesthetic and contains no informational value.

http://www.dessign.net/architekttheme/

Wannina Somboonvechakarn
http://www.dessign.net/architekttheme/

According to the article ‘A guide to web typography’ -the Basics, there are four basics theory to create a good web typography which are: contrast, size, hierarchy and space. I think the website ‘Architekt’ is a good example of using good typography in the website. The website has a white background which contrast with the  grey text. The color contrast improves the readability, so does the font size that is about 12px which is a small but readable. The hierarchy is being displayed using a very different sizes of font - the most important such as the name thing is extremely larger than the normal contents which make it very clear and loud. This website has a lot of white space around each text, making it comfortable to look at and easy to read. Moreover, i think that the white space, not only the background, but the linespacing and leading, the san-serif font and the one color (grey) match very well with the whole context and concept of the website which are clean, simple and unique.


GLENN BOOZAN - The Crane Brothers The Crane Brothers website typography makes sense. Black and white type on top of a solid-colored background are readable, simple colors. A grid system with liberal use of white space logically breaks up the headers from the sub-headers. In its content, we can see the hierarchy of information represented through the type: their logo/name is up top, but it’s small in comparison to what really matters: the information on the page, “Knowledge of The Hand.”  The Crane Brothers are self-admittedly detail and suit-obsessed, so their name isn’t what matters, it’s the suit and the details about the suit. The structuring of the information (navigation up top, and repeated in smaller, simpler text at the bottom) also provides a system of information that we’re all familiar with.

GLENN BOOZAN - The Crane Brothers

The Crane Brothers website typography makes sense. Black and white type on top of a solid-colored background are readable, simple colors. A grid system with liberal use of white space logically breaks up the headers from the sub-headers. In its content, we can see the hierarchy of information represented through the type: their logo/name is up top, but it’s small in comparison to what really matters: the information on the page, “Knowledge of The Hand.”  The Crane Brothers are self-admittedly detail and suit-obsessed, so their name isn’t what matters, it’s the suit and the details about the suit. The structuring of the information (navigation up top, and repeated in smaller, simpler text at the bottom) also provides a system of information that we’re all familiar with.

The interface i came across this break was the nike website. I was on it to buy myself a pair of sneakers and saw the nike id page. This application allows you to customize your sneakers in any way you want, style or color. You can even write your own name on them. On a visceral level, I found this application very fascinating and couldn’t wait to customize and design my own pair of shoes. On the behavioral level, i found the entire process of customizing very user friendly, it could be navigated easily even by the non tech savvy. Reflecting back, I really enjoyed the experience, it was a fast a simple way of designing and creating my own personalized shoes.

The interface i came across this break was the nike website. I was on it to buy myself a pair of sneakers and saw the nike id page. This application allows you to customize your sneakers in any way you want, style or color. You can even write your own name on them. On a visceral level, I found this application very fascinating and couldn’t wait to customize and design my own pair of shoes. On the behavioral level, i found the entire process of customizing very user friendly, it could be navigated easily even by the non tech savvy. Reflecting back, I really enjoyed the experience, it was a fast a simple way of designing and creating my own personalized shoes.