mmastrof_project2_examples

Examples of Webpage Layouts and Grids

 * Cool Hunting** [|[link]]
 * [[image:mmastrof_coolhunting_1.jpg]] || What's good about this website is its simplistic nature in its presentation of information. The menu and any secondary information is in the left coloum while the daily news/entries are presented in the middle of the page, each entry provides tools to which the viewer can print, email, save, etc the information they read. ||
 * [[image:mmastrof_coolhunting_2.jpg]] || At the bottom of each page the website provides its "favorite readers finds" with an image and explanation, a good tool in keeping the viewer interested and remaining on the site. ||
 * [[image:mmastrof_coolhunting_3.jpg]] || This site is also very visual, having images for every entry, including the favorite readers finds, something that i think is important for keeping interest. ||


 * Design Observer** [|[link]]
 * [[image:mmastrof_designobserver_1.jpg]] || The page layout for this site is good based on its simple layout and clear hierarchy. There is a clear separation between the primary info and the secondary info (ads, comments, etc) based on the grid and use of changes in colour, type size, rulers, etc. The website is also very consistent from page to page. ||


 * Feed Me Cool Shit** [|[link]]
 * [[image:mmastrof_feedmecoolshit_1.jpg]] || The grid is broken down into 5 coloums, having the primary information (daily news, updates) on the left, secondary information (menu, gallery, interviews, etc) in the middle 3 colourms, and then tertiary information (ads and links) to other sites in the right-hand coloum. This site it a bit too over crowded for my liking, but the information is clearly separated and grouped off. ||


 * Gestalten** [|[link]]
 * [[image:mmastrof_gestalten_1.jpg]] || This site is basically broken down into 3 columns, but the layouts of each page and each portion of a page vary (crossing over 2 coloum widths, single coloumn, etc) but each section of information still remains distinctive and consistent with one another. ||
 * [[image:mmastrof_gestalten_2.jpg]] || Again, good use of visuals, having images for every section and every entry. ||
 * [[image:mmastrof_gestalten_3.jpg]] || Different pages show different grids of information, but the layout still remains very consistent from page to page. ||


 * HighSnobiety** [|[link]]
 * [[image:mmastrof_highsnobiety_1.jpg]] || This site layout is good becaus it keeps all the different menus (all of which are grouped off) at the top portion of the site. It also has a simple breakdown into 2 coloumns, the left having the main daily news and the right having all the secondary info (links to other columns, ads, etc) ||
 * [[image:mmastrof_highsnobiety_2.jpg]] || Furthermore at the bottom of the page it shows links to other posts and submissions along with links to its sister sites (Highsnobette and selectism) ||
 * [[image:mmastrof_highsnobiety_3.jpg]] || Although they're different sites, the viewer is aware they're related, much of the layouts are the same, except for the colour schemes and dividing rules. ||
 * [[image:mmastrof_highsnobiety_4.jpg]] ||  ||


 * Instructables** [|[link]]
 * [[image:mmastrof_instructables_1.jpg]] ||  ||
 * [[image:mmastrof_instructables_2.jpg]] ||  ||