Final Designs

These are photos of my final design. I have to say I am pretty proud of myself for implementing Javascript to make my pictures change upon reload. It took many hours to figure out but I am so glad that I suck it out and made it work. I like that I included that since my design is fairly simple.

Homepage and Subpage Designs

After trying to make the page a bit darker to feel more fancy I found that two dark made the place look deathly and so I picked a happy medium. Instead of incorporating a gray or black backround I stuck with the tan and just made it darker. I also took my "reserve a table" and "donate" and included them in the nav bar to make the design more clean. One thing that I enjoy about this layout is the space it has. There is not a ton going on and having that white space around it makes it more appealing to look at. The last thing I wanted to do was fill it with clutter especially because it is a gourmet restaurant.

For the subpage all I did was took the middle section out and filled it with the story of how this was established but one comment that I recieved from class was that on my first page my pictures extend to the end and line up with my social networking sites. In the final copy of this I took the cardboard behind the content and extended it to the end and incorporated the red door from the Bowery Mission which is where money can be donated through our site. The red door was a symbol of all is welcome and is an important to the people that run it and the people who go there. I wanted to make that a part of the design because I felt it was an important part of the place and it needed to be represented.

Edge of Society Homepage #1

This whole project was a bit of a challenge. I liked what I was doing with the photos but the "Reserve a Table" and "Donate" section just wasn't working in the design at all, not to mention the ampersand did not really do it any justice. It looked incomplete and something needed to change on it.

Edge of Society layouts

I did not really care for any of these as they are but I took bits of the second layout and made a new background that was more suitable for this site and the feel I was going for. It is hard to really find that right material for a place that has two totally different feels. Edge of Society is a resturant that is both gourmet but also a bit grunge and it was difficult to get the right amount of both for this site.

Edge of Society Site Map

Here is a site map of my Edge of Society it features Home, About, Menu, Location and Contact as well as social networking links that will appear on every page. Online Reservations and Donate will also be on all the pages since both are extremely important to not only the restaurant but the customers.

Card Sorting

I was unable to get anyone to do the card sorting online but I did have a few people of different ages set these cards aside in the order that they thought was best. Here is an example of one:

Mood Board

This is my mood board. This restaurant is somewhat based off of the musical Rent and the Lower Eastside of New York City. It is a gourmet restaurant that serves expensive street food and is a rough and dirty looking place that really sets into the time period of when things were tough with poverty, drugs and aids. The restaurant donates so much of every meal to the Bowery Mission in New York City. I wanted to incorporate rough textures and some deep colors to really represent people in those situations as well as a bit of grunge materials.

Content Audits

We had to make three content audits based off things associated with our restaurant site we will be making. The first is from Hallo Berlin Restaurant which is a poorly designed site but beyond that there is some things to say about it. With two locations, and two menus I thought it was nice to have two seperate pages for that as well as being able to select the text on each page, no pdfs. I do think that the location section of the webpage is unnecessary since the two locations are shown on the homepage, that is one thing that I will be eliminating from mine.

The second audit is for the famous street vendors King of Falafel. They give a nice introduction  about themselves on the first page as well as important information like their phone number as well as their phone number. I think it is nice that they share their recipes with us and I enjoy the way they show their menu with pictures, giving a visual idea of what they food looks like.

The final audit I did was on a more fancy restaurant since mine is a bit more on the classier side. I felt it important to get some ideas of how to set my site up from a restaurant that would match up with its scenery a bit more. One thing that I noticed about gourmet restaurants is that most use flash in displaying their material which can cause a problem for people with smart phones. That is something I will be leaving out for the pure fact that many people would miss out on information they might be in need of. While I enjoy the way it looks visually it looks more like a venue instead of a restaurant because they do not really display any of their food. I think sometimes it is important for people to see the quality they are getting and this site lacks that.

Final Zen Garden Site

Here is the final design that I came up with. I originally wanted the tree to take up most of the design and to have the main body copy next to the tree but when it came time for me to put that part of the design together the body was much longer then the tree, the whole design looked a little visually heavy and unbalanced and I know longer enjoyed the design I had started with. I then took the design I had and made it into something different. Taking most of the element I had before I just moved things around, made the tree much smaller and and made the design overall a bit more readable and effective. I like the way the final design turned out much better then the original design I had. I think that it is more appealing to the eye and explains the concept I was going for much better. Overall this project was a challenge for me to push myself a little bit more. I definitely think there are elements I could have incorporated better but I tried the best I could and I'm happy to say that I actually learned quite a bit in doing this assignment.

(I couldn't get a good screen shot of the whole thing so i took several shots and tried putting them closely together. Also, there is a bottom to the design but when I took the screen shot (being that there is only a little left) it was much bigger than the rest of my shots so I left it out.)

 Here is some of the html file.

Zen Garden Design

Here is layout sketch of what I wanted my Zen Garden site to look like. Doing this allowed me to explore what I really wanted my design to be about, what message I wanted it to bring and how all the elements I was thinking of could come together. 

This is my original Photoshop design of my Zen Garden website. I did not want the design to reflect this everyday scene of pretty birds flying around or sitting on a tree, under the nice blue sky so I played around with the idea of other shades that the sky may change through out the day and ran with the color yellow. It kind of made it a bit eerie but still playful which I thought added to concept a bit more. I did think that the design was getting a little heavy though and everything wasn't flowing properly and thus the design has changed since this original design.

 

Zen Garden Mind Map and Concept

This is my mind map for the Zen Garden project we were assigned. The point was to see what we thought of as Zen being the central word. We then needed to branch off and continue connecting words to one another. This process then allowed us to come up with a central theme that we wanted to make our project about. For me I had two ideas, this idea of Earthly Movements, birds, wind, trees, all of these elements that move or my other idea was this idea of Friends and Pictures, spending time by a fire, playing music and having conversation. I ended up following the Earthly Movements theme and branched off a few ideas there and ran with it.

These were just four small pictures of the idea I was planning on running with, a sky with clouds, a willow tree, birds and leaves.

Website Recreation

For this assignment everyone in class was given a website to redesign. I was given the Society of Design's website (http://www.societyofdesign.org/), which has changed many times since I started the redesign process. While my website was more on the simple side, I found that it was difficult to recreate something mostly because if something did not work out I was forced to find the answer because I couldn't take the design in my own hands and change things. This process pushed me to learn new things and taught me how to put together elements that before I started making this, had no idea how to put together. I did have some issues with the footer but overall I think I did a fairly good job at completing the design. It is nice to continue to learn new pieces of how to put together a site and to see the results.

Original Site

Redesigned Site

Typography & Web Design Website

This is my rendition of our one pages site project. The process of making this site started out with the sketch I shared earlier and was then taken into DreamWeaver to complete the design. I knew that in designing this I wanted to use more earthy tones with a little bit of color for a bit of a pop, nothing crazy or bright though. I think that after getting feedback from my classmates I would have liked to incorporate more brackets though out the design to allow for more recongnition to that element. It is nice that for this project I did not have many struggles. In the very beginning I could barely place a background image in properly but practicing and remembering allowed me to do this assignment much more smoothly.

Here is a shot of the header I designed in Photoshop that was then placed in my Dreamweaver file.

Here is a shot of the complete design I made and placed in Dreamweaver

Typography & Web Design Mind Map

Here is a starting sketch of my one paged type website. We needed to sketch out the size of each piece in the design so that each piece would fit together properly. As far as the design goes, my plan for this was to incorporate some movement in the design to draw the eye around the site more effectively.

MU Art & Design Website

For this project, we needed to take the MU Design website and apply different backgrounds to them. This was confusing for me at the time but I have since then understood the process of aligning things properly and getting each piece to function the way it was intended.

Beginner HTML- Sweet Summertime

This summer I went to the beach twice with my family and that was an amazing time as always. I also played a lot of games with my younger sister and her friends during the rainier days. That has always been a big joy for me. =)