Category Archives: Intro to Web Blog Posts

Blog Post #8 | File Organization

Photoshop Organization

In class we talked a lot about the importance of file organization and recently how to design our websites in Photoshop. Not only is it important that our files in Dreamweaver are organized, it’s important that our Photoshop files are organized as well. I guess I would call myself a hypocrite for talking about the importance of file organization, especially in Photoshop because I am very guilty of not giving my layers unique names and even putting them in folders sometimes. Which is why the website called the Photoshop etiquette for web designers site would be perfect to talk about in the last blogpost because we are all designing our final project sites and using our Photoshop comps as our main tool to do so. This well designed one page website reinforces all the tips we learned in class not only about file organization but design tips and practices as well.

The Photoshop Etiquette Manifesto for Web Designers
One of the things I like about this site is the side navigation that works as the facebook and twitter links that looks like the Photoshop tool bar. It’s really creative and sticks with the Photoshop theme of the site.

The site is broken up into eight different categories: External File Organization, Internal File Organization, Type, Images, Filters, Design Practices, Before Exporting, and Exporting.

The section I want to focus on is Internal File Organization. This section is broken up into five main tips.

internal file organization

  1. Name layers and name them appropriately
  2. Use Folders
  3. Delete unnecessary layers
  4. Globalize common elements
  5. Use layer comps and smart objects
naming-layers

example of how to properly name your layers

These tips seem easy enough to follow, but if actually done, can make working so much easier.

I would definitely recommend that everyone in class take a look at this site and bookmark it because having these tips in mind will help you be more productive and make building your site easier in the long run.

Blog Post #7 | Website Dissection

The Site

emotions by Mike

The website I chose to dissect is a freelance portfolio website called Emotions. I like the use of whitespace in the site and the format is really interesting to me because most content for websites that I see are centered and this one is off centered by a graphic and by leaving a lot of open space on the left side of the screen.

HTML

wireframe

organization

The homepage of this site is built using nine divisions.

  • The wrapper that holds all the information of the site.
  • A division nested inside called “all” that holds the main graphic, all the pictures and content.
  • A separate division just for the main graphic that is styled in css.
  • The division for the content that holds an unordered list for the navigation, the header, and a division for the text content.
  • The text division which is nested inside the content division contains the about the site, the divisions for the line graphics and the thumbnails for examples of work. The examples of work are listed as definition lists and use javascript for pop-up windows.
  • A division called empty which doesn’t have any content inside
  • The footer

CSS

backgrounds

The green background for the website is made using two different images. There is one small repeating background image to make the two shades of green that you see for the background and the navigation. That image is placed in the body and repeated along the x-axis. To create all the shadowing for the website, there is a large background image placed in the wrapper with a transparency to get that shadow effect.

To create the feet that you also see in the background a seperate image was created and placed as a background image in it’s own division that is floated to the left. The same technique is used for the background in the content. Although it seems like one seamless background it’s broken up into sections to get that depth and shadow.

navigation


When first looking at the site I assumed that the navigation was built using sprites. When looking into the css of the document, each list item for the navigation are different classes and the image replacement for the navigation are different images instead of one sprite image.

content

Basically all the titles and headers and the footer use the image replacement technique except for the written content using the Tahoma,Arial,Helvetica,sans-serif font family.

The rest of the site pages use the same organization and techniques

Blog Post #6 | Final Project Visual Research

THE STAT

106,000 aluminum cans are used every 30 seconds. Reading this statistic really got me thinking about how much we use items that are recyclable materials and don’t actually recycle. It also got me thinking about alternative ways we can recycle things such as cans and bottles without even throwing them into the trash or recycling bin.

MOOD BOARD

INSPIRATION

navigation

When looking at websites for design inspiration, I was paying a lot of attention to the navigation. After quickly glancing at the homepage, the next thing the user does is look at the navigation. The navigation I was most attracted to was navigation that included icons and text either together or just showing he text and then an icon in the hover.
For example, The website HelloGiggles has horizontal navigation that has both text and icons. HelloGiggles website
Another website that does a similar thing with their navigation is carsonified.com carsonified-grow

This website has horizontal navigation in the top right corner. When just looking at the site the links are just white text but when you hover over them, there is an icon that appears above the text and that same icon has a selected state that stays active when you’re on that page. The reason I chose to show this site is because I would like to try something like this for my site about recycling. I also like the aesthetic, typography and illustration in the site.

organization

When I first thought about how I wanted my site organized it looked a lot like the One site when I pictured it in my head. I still like this organization and I feel that it would be easy to use by my viewer. with the logo up top horizontal navigation, large image relating to topic and smaller sections with picture links.

When trying to find some other websites for some inspiration on how I would go about other options for organizing my content, I came across a website called Tommy. I thought they had a visually interesting style as well as an interesting way of displaying their information with use of grid, color, type, photos, and hover effects.

Both these sites are very different, but I think they both display very good ways of organizing information on a website and show good hierarchy.

Blog Post #5 | Single page web sites

The Concept

The concept of a single page web page is to communicate information to the viewer and easily navigate them through the page without having to take them to another page. Single web page designs are a great way to creatively display or advertise a specific product or service, show a portfolio, or even communicate a small amount of information. There are many creative examples of single page web pages that are fun, interactive, highly effective and usable. There are also some that can look really cool but be confusing as well.

Thumbs up!

MOAA site
After looking at many impressive single web page designs I came across MOAA Architects. I thought this site best utilized the single page concept. When you enter the site there are only five large links to navigate you to the rest of the information. A really interesting feature about this site is that the hover for each link is unique because when you hover, new words appear that describe what each section has to offer before you click. When you do click on one of the links, a new section appears below. For example, when I click the projects section more information appears showing picture links of various projects. When you click on a picture more information appears above about that project. The MOAA site may not be colorful, or have flash animation but the way MOAA organizes and displays their information into a one page site really impressed me.

Thumbs down

It was really hard to find a one page site that I didn’t really like, but there was one in particular that didn’t seem to impress me and didn’t really utilize the one page site to their advantage. The site I am talking about is Cubamoon Creative. This one page site is separated into four small sections and you can already see two above the fold. The overall aesthetic of the site is weak to me. The colors chosen for the site are dark and have limited contrast from the backgrounds and the text making it hard to read. The vector graphic for the site isn’t really helping either, it makes the site look rather amateur. Even though the site is short enough to just scroll down, I thought it would better to have some fragment identifier navigation at the top, instead they chose to just have an arrow for each section to direct them back to the top of the page. Although having the arrow in the first two sections is unnecessary because they are already above the fold, so clicking the arrow doesn’t do anything. To make this site a little bit better I would add some more contrast to the site and I wouldn’t use condensed text. I would also add links for fragment identifiers for each section and make the first section take up the entire above the fold.

The Blow

The band I want to design a one page site for is called “The Blow.” The blow is an electro pop indie band. Aside from liking their music, the blow doesn’t really have an official site. They have a myspace, and a bio through their record company and on the indie music database. All of which are not really designed well at all, in a sense that they don’t really show the spirit of the band. The myspace site is organized well with a side navigation for the different sections for the band, but again does not give the band any kind of personality. I can picture doing a really fun site that embodies the spirit of their music.

The Blow on Myspace


The Blow on K records

Usability | Blog Post #4

The most important part about building a website, is making sure that people are able to use it. That’s when usability comes into play. Things that make a website easier to use is the use of navigation, breadcrumbs, text links, site search, submission forms and error messages.

Breadcrumbs

One aspect of usability that not all websites use but when used, really maximizes the sites usability is breadcrumbs. To quote Spyrestudios in their article Best of Breadcrumbs and How They Enhance Your Website, “There are various reasons why anyone would use breadcrumbs, one of the top choices is the massive gain in usability.” There are three different things this article covers when talking about breadcrumbs; why we should use them, why we need them and the three different types of breadcrumbs. What I got from the article is that we use breadcrumbs so the user can easily know where they are within a site and can easily backtrack if they needed to. The three different types of breadcrumbs are path based, location based and attribute based. A good example of breadcrumbs would be The Glasgow Collective,the first set of breadcrumbs are in blue and show both path based and location based breadcrumbs, that show where they are in the site and the steps they look to get there. The red set of breadcrumbs would be attribute breadcrumbs because once your on that page, it shows more links you can click for more detailed information.

Converse

Converse is a large shoe company that has been around since 1908 and have had to constantly make changes to keep with with the times and I think their site really shows the development in web design and interesting usability.
converse homepage
The image above is the Converse homepage. Everything on the homepage including the images are a form of navigation. the navigation bar in the middle at the top only contains two sections, but with in each section is a drop-down menu of all the choices to choose from for shop and the two choices that drop-down for when you want to create. There is also a set of text links below the navigation menu that when you click one different image links will appear in the homepage to help you figure out where you want to go in the site. The navigation and links are very visual to help the user figure out what shoe they want to buy.
Another thing I found interesting about this site is the color wheel in the center of the text links, this is a really fun and useful feature for this site because a lot of people specifically shop for color when they shop for converse shoes, and when you choose a color, more picture links of featured items for that particular color appear in the homepage.
Overall, the level of usability is targeted at young adults who are familiar with using the internet. This website is a fun website to visit to get information on basketball, music and skateboarding as well as making shopping for shoes fun and interactive. There are many navigation tools, such as the navigation bar at the top as well as the text and picture links. Some of the only critiques I would give this site is that I didn’t really see much use of breadcrumbs that could take the user back to the previous page they were at other than the back button. Also, the converse logo is the only link that will take the user back to the original home page, and its something that has to be figured out by the user instead of them knowing where they will go before they click it.

Canon vs Nikon | Blog Post #3

When making a purchase, especially when it is something expensive like a digital camera, most people tend to do a bit of research comparing brands and products before they make their final decision. The first place most people look for quick answers, price and quality comparison is the internet. When looking for a nice quality digital camera, two competing brands come to mind: Canon and Nikon. When most people are using the internet to decide which brand and type of camera to get, it’s important that the websites for each brand are appealing and easy to use in order to help the customer make a decision. I will be critiquing the official store websites rather than the company website because that is what most people will be looking at when making a purchasing decision.

There are a few things to look at that determine a successful website; How the website is organized such as use of hierarchy, white space, containment, and use of grids. Other elements that give a website style, such as color, texture, imagery, scale, animation and variability.

Organization

Hierarchy

How information is displayed and read is very important. When comparing Canon and Nikon‘s website I notice some similarity in organization with hierarchy. When loading both pages, I see the logo/name of the brand first in the upper left hand corner and then immediately look at the large picture advertisement above the fold, Nikon’s picture is much larger taking up the entire space above the fold. Both sites show that there is more to look at below the fold so the viewer will scroll down to see what else is on the main page, and then they would scroll back up to look that the navigation bar to find what they are looking for. One thing about Canon’s site is that it has two navigation bars and the main one is smaller which could potentially be confusing.

White space

While browsing both websites I immediately notice that Nikon’s website makes better use of white space than Canon. Nikon gives its content and pictures padding and margins so there is plenty of places for the eye to rest, while Canon’s website is still organized and uses borders, padding and margins. It uses less than Nikon and when comparing the two it feels that the information on Canon’s site is too close for comfort.

Grid


Canon's 6 column grid showing types of cameras


example of Canon's 5 column grid for showing the camera choices within a specific style.


The use of grid is used to help organize information on a page and creates unity and balance when the same grid system is used throughout the site. Both websites have a grid system and are fixed width. Nikon’s site has a good use of Modularity because the grid system is used more consistently through out the site because when you make any selection in the navigation bar everything is laid out in the same place. While Canon’s site seems to have two different lay outs if you select a general topic such as ‘cameras’ its organized into what looks like a 6 column grid and when you select something more specific, it looks like it turns into a 5 column.

Style

Color

Color used in both sites is very simple. Black, white and one accent color that relates to the brands logo; red for Canon and yellow for Nikon. Nikon uses its accent color mostly for the button colors, this is helpful to know where to click. Canon used its accent color for the navigation bar text, headings and buttons. Canon’s use of its accent color helps the user with hierarchy and makes it easier to identify the product and price.

Imagery

On a website when you’re shopping for products, imagery is pretty important because the customer has to see what they are purchasing. The imagery is pretty straight forward and is displayed well so the customer can see the product and is able to visually compare one type from another. Nikon’s images are a little bit bigger and makes it a bit easier when shopping. When looking at Canon’s site I felt like I needed to click on the product to get a larger view of the item.

Example of imagery for Canon


Example of imagery for Nikon

Other thoughts

Neither site really had much use of texture, depth, animation or variability. It’s possible that if this type of site used these techniques that it could be distracting for the user when trying to shop or compare a product.

Web Typography | Blog Post #2

The use of typography on the web is very important. With all the distractions the internet has, there needs to be some order to the chaos of information the web has to offer; That’s where typography comes in.

Why Typography Matters?

One of the blogs that I visited wrote an article about why type is important to the web. Typography is important because it can create a mood or feeling for that website depending on the font chosen for the site. They describe web typography as information design because the web is mostly made of text and we need typography to sort this information and create hierarchy for the reader. They break it down with two terms: Macro-Typography and Micro-Typography.
They define the terms:
Macro-typography, which comprises of overall text structure of the document.
Micro-typography, which covers the smaller and much detailed aspects like the font type, line-height and spacing etc.

Another article I read is from the same website but touches on The Eight Important Factors of Good Web Typography. It goes on to reiterate what the first article says about how typography is important because it creates visual hierarchy and makes text easier to read. I found this article helpful because it gives advice and important things to consider when designing a website yourself.

The last article I read was How to Use @Fontface. This article talks about web designers used to face the challenges of designing a site with only a limited choice of web safe fonts. But now there are some services that allow designers to use the fonts they want in their designs. Among those there is one site that is being developed that will solve all font compatibility issues between browsers called @fontface. The way to use @fontface is by implementing it through a few lines in CSS.

This is an example of how to use @fontface in CSS.


The benefits in using @fontface and web-fonts are that when you design a website and choose a specific typeface, every browser will be able to display it, so everyone that views the site will get the same experience.

Web vs. Print

The differences between designing for the web and designing for print are two very different things. When setting type for a magazine ad, billboard or flyer you have to attract the viewers eye and be clear and to the point in a matter of seconds. Designing for the web, we have to consider that there is a lot of information to organize and it is much harder for the viewer to read on screen than in a magazine.

An example of a website that I thought had interesting typography for the web was Coldplay’s website.
I chose this site for a few different reasons. I like the overall look and feel of the site created by typography, illustration and color. I think the hand rendered type for the subtitles contrast well with the serif typeface used for the body copy of the blogs.

Another site that I liked and thought the typography was really interesting was justdot.gr
The illustrative type really works with the concept of their website. Even though the background looks like sketches and equations on a chalkboard. All the information is easily organized and readable by the use of grids and two different typefaces to show hierarchy.

A Critique. Blog Post #1

As a college student I enjoy spending my time procrastinating doing my homework. I pass the time by surfing the web to find any funny article or video to prevent me from actually writing that ten page art history paper. The website I frequent the most is www.collegehumor.com. CollegeHumor is a website that puts out hilarious original articles and sketch comedy videos made by the staff who run the website. They also have a section for users of the site to post funny pictures and videos for the whole community to view.


Here is a screen caption of what is above the fold on the main CollegeHumor page.

The main page shows the top rated and staff picked videos, as the viewer scrolls down they get a glimpse of the newest CH orignal videos and articles. To access other specific areas of the site the viewer is easily informed when they visit the site that they must go to the top banner to view more videos, pictures, articles, hotlinks and more. Another nifty thing which is slightly new to the site is the thin black CHMedia banner at the top. The first link will give you a history of the site and the other links will direct you to the other websites that CHMedia owns and runs such as Dorkly, Sportspickle, TodaysBigThing, and Bustedtees.

Even though I absolutely despise the giant advertisements that take up the frame boarder of the webpage, I do believe that College Humor is a successful website. Following the rules of C.R.A.P, CollegeHumor’s website successfully shows contrast between the ads and the actual content. Let’s compare with a similar site called Topless Robot.

On the left we can tell that the content that is meant to be viewed is grouped together and boxed in with a light blue highlight that contrasts with the ads and even the white space. While on the right, everything seems to have a blue/grey tone that shows no contrast between the featured videos, articles or advertisements.

Another thing that CH is successful with is repetition because they use a grid when laying out the content of the website. Each page is consistent in layout which unifies all the different content to the same site. CollegeHumor’s use of the grid and repetition helps the viewer navigate the site.

Alignment is also achieved with the use of the grid, the text on the banners align with the content of the web page and even in this page the four larger videos align with the six smaller videos below it (also an example of Hierarchy).

The last but not least thing that determines a successful website is proximity. We can compare CollegeHumor again with Topless Robot and see that the grouping and spacing between the four videos shows that they belong together and not to be grouped with the advertisement because it is spaced further apart. If we look at Topless Robot to the right, the banner of links are very close to the videos at the top and pretty much all the videos, articles, and ads are grouped tightly together when they shouldn’t be. The poor proximity makes it harder for the viewer to visually separate the information, making it harder to navigate the page.

Overall, CollegeHumor is a successful website because the content caters to the interests of young adults age 18-34 which are the target audience. The layout is consistent and easy to navigate while still having contrast to keep us away from boredom. So, if you’re ever in need of some entertainment and a good laugh, definitely check out this site.