siteredesign

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.

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.

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.

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.

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.

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.

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.

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.

This is the final comp, for the final part of project 4, website redesign. For this page, we had to show how we would display the artwork of Dan Varner, a close friend of the Oceans of Kansas website. For the design, I wanted to create a hub like device that would display one large piece of art along with a description of the work. On the left side of the artwork there are small thumbnails that scroll up and down to display more of Varners’ work. The piece that is enlarged is in full color on the thumbnails, while the other pieces are darker to show they aren’t being viewed.

For the final part of project 4, I needed to create a 404 page not found for the Oceans of Kansas redesign. For this page, I wanted to be some what humorous, while still being helpful to the user. The page has a piece of art by Dan Varner made into a single pannel comic which is followed up with a description of why they may be seeing the page, and what to do from there.

For the Oceans of Kansas site re design, we first made the site map (previous post) and then we needed to make a wire frame. A wire frame is essentially a simple box layout that shows where and what will be on the website. For my redesign, I wanted it to be as simple as possible and be mostly picture driven because much of what makes the website and paleontology exciting and interesting is imagining and seeing what the creatures looked like.

Another inspiration website I found was Foodsense. It is about the furthest thing away from my subject, but the use of white and pictures, then a simple color palette that popped off the screen well. I would like to keep a simple pallet with my site redesign, I want to try to stick to shades and hues of a similar color, and stay away from contrasting colors.

This website is Google Ventures, which is a Google product that deals with design, inspiration and start up. Though it may have nothing to do with my subject per say, I do like the the use of the full width picture at the top. It has great color, then contrasts with the white below it. It is a great element to bring the viewers eye into the web page.