sdeere1

[sdeere1]

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.

[sdeere1]

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.

[sdeere1]

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.

[sdeere1]

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.

[sdeere1]

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.

[sdeere1]

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.

[sdeere1]

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.

[sdeere1]

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.

[sdeere1]

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.

[sdeere1]

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.

[sdeere1]

This site, Golden Grid System, is inspiration, but it is less for visual ideas, and more for understanding. The site helped me to understand the resizing, and exactly what is going on in responsive design websites. It really gave a lot of insight into a fairly new subject for myself, and showed a lot of site aspects and their relation to size.

[sdeere1]

The site seen here, Worm Sign Shirts, is a site dedicated to shirts influenced and designed by music. What was helpful about this responsive design site was when it was re-sized, each different size took away a column of shirts and added a row. That way, the scrolling for each size was limited to just vertical scrolling.

[sdeere1]

Fiafo, the site seen here, is essentially a firm that helps take companies to the next level. They aid in re-design and other visual aspects of companies. Their site uses the responsive design I am looking into to better understand, but what drew my attention the most was when the site was taken down to a mobile device width, the navigational buttons relocated from their initial horizontal arrangement on top, to a more helpful, mobile friendly vertical layout.

[sdeere1]

For the Foul Play bookstore site redesign for project 6, I have gathered a few websites that take advantage of responsive design for web use across many devices. There are certain aspects of each site that I like and find interesting enough to possibly affect my design. The site seen here, Sweet Hat Club, is essentially a social media interaction site for hat enthusiasts. I like the overall layout of the site, but what I like the most I can not show properly here. The site had a very fluid interaction between the boxes and elements when it was re-sized.

[sdeere1]

This is a screen shot of the website that I will be redesigning. It is the final project for the fall 2012 web design course, and I will be mocking up layouts for a responsive web design. As you can see, the site itself, foulplay, has information presented in a fairly logical and helpful manner. The design of the website however could certainly use a helping hand. That being said, they designed it in house themselves and without much in the way of computer training, so I must give credit where credit is due. Like the previous site redesign problem, I will only be creating a series of mock-ups, and not actually coding the site.

[sdeere1]

This is also a final for project 5. We had to also create a 404 error page that would redirect back to the homepage. I kept the same design style as with the homepage, but made it more dominated with text. It is also hosted online here if you would like to see it.

[sdeere1]

This is my final design for the project 5 website problem. I have stuck with the simple color scheme and design and am fairly happy with the outcome of the design, especially for my first time coding in the dreamweaver program. If you would like to visit it you can go here.