Photo

For the final step of project 6, Foul Play Books website redesign, I needed to create an html email layout that would help to promote the store. I wanted the email to share many aspects that the web pages had, but still have minor differences to set it apart.

Photo

These are the final, and smallest set of redesigned webpages for the project 6 redesign of the Foul Play Bookstore. As with the computer and iPad, it is visually cohesive, but much more simplified when compared to the others. I also show how the navigational would work as a pull down, that way when on a mobile device it won’t clutter the screen with navigational links.

Photo

These are the redesigned pages for the Foul Play responsive redesign. I tried to keep with the same visual consistency, but remove some of the less important information that was on the computer based homepage.

Photo

These are the final Computer based pages for the responsive design Project 6. For the redesign I have chosen a red palate and used different tints and shades. The text stays white in most cases on each page. The fonts I used were Trochut for the Navigational areas, as well as Rambla, both regular and bold depending on word importance or paragraph.

Photo
We were given the option to clean up the original logo, or we could create a completely new one. I have chosen to create a new logo, this was the final result.

We were given the option to clean up the original logo, or we could create a completely new one. I have chosen to create a new logo, this was the final result.

Photo

The final wire-frame mock up made for project 6 is the standard laptop screen size. It is the websites largest size, and the most horizontal of the three. One of the most differentiating aspects of the laptop screen size is with it being wider, there is not much interaction vertically. It also allows the navigational bar to be beside the logo for the first time, instead of under it. These wire-frames are just rough ideas as to what I had in mind for the overall layout, and the final may stray from the initial frame designs.

Photo

Continuing the wire-frame aspect of project 6, the redesign of Foul Play Bookstore, this is the intermediate sized web page. This size of a web page is usually used on mobile devices like iPads and other tablets. Most of the information now has more breathing room, and is much more horizontal than vertically spread.

Photo

For our final project, project 6, we have been given the task to redesign another website. With the website needing to be a responsive design we started with the inspiration, then moved onto creating wire-frames for each page of the website across 3 devices. This is the mobile site, and as with most responsive designs, most of the information has been moved into a vertical format. I also have the navigation bars as a pull down addition to the logo. The logo has been redesigned slightly, but no final logo has been decided upon.

Photo

The site here for the Maryland Beer Festival, is the simplest of all the inspiration sites I have found. I say that in the sense that the graphic elements don’t move very much while resizing, and it really only has 2, possibly 3 sizes. But, even though this is simple, it is handled in such a way that no matter what device you are on, you get the information you need, without being over saturated with too much with useless info. This is an important idea to keep in mind while redesigning, keep the most important information readily available for the user.

Photo

Oxide Interactive, is another site I found for the research and inspiration portion of project 6. The site itself is very cool, and helps to show the possibilities of a website, and how traditional rules can be broken to create a great design. It isn’t in the tradition vertical format, which is certainly what I like most. The site also handles resizing quite well, it loses its angled design for a traditional vertical one when the size becomes too small to function properly as useful design. I also like that, when it is sized down, unnecessary aspects like pictures and larger decorative fonts are removed and the more important information is there in plain text.