Fictional "Sushi Roca" Site: Secrets unleashed

Mockup Sushi Website: Breakdown of the Web Site Mockup Phase

I've been wanting to share the process I go through when mocking up, marking up, styling and developing a site for a while now. I've decided to build a fictional Sushi Site called "Sushi Roca". This site is unintended for actual use, but it will make a great portfolio piece once it's done. I plan to document every step in the process I go through when building an actual customers site. My hopes are for professionals and novices alike to join in and comment & critique my work. I wanted to kick this first post off with a few images to try to show how the design process for the site transpired. I will be using Photoshop, Fireworks, Dreamweaver and XAMPP to complete this project.  

 

 

The hand with the chopsticks will always pop out from the left side of the browser window, with no white space no matter what size the screen. I wanted to make it look like someone was sliding in to grab a roll. The size of the hand is pretty realistic in proportion. I've never tried this style and wanted create something different.

 This is the design I initially started with. It's always a very dynamic process when I'm creating and I'm constantly changing colors and moving elements around. I didn't lay it out on paper at the the start because I had the image of what I wanted already in my head. I just want to note that paper and pencil is still a vital tool in your arsenal whether your laying out a graphic design, or a site framework when developing. The light grey boxes are the area's where content (text) will be located. The box height will more than likely change but it's a good idea to layout some rough area's where you want the content to go. The site will be a fixed width design with a width of 960 pixels, center aligned and I'm shooting for clean and simple.

I decided to throw in some Japanese Kanji meaning "eat"(top) and "fish" (bottom). I would definitely choose better symbols if this were an actual clients, but for now I think it looks visually appealing. I gave the content box a solid grey fill so you can better see where the content is gonna go.

Remember that the content area's will more than likely change. At this point there rough area's. I'm debating on whether or not to give the Kanji symbols a glow effect. The three grey boxes up at the top are going to be image/descriptive quick links to popular pages in the site. Quick links for possibly the "menu", "location" and or specials. Like I said, this is a dynamic process.

This is the design a little further into the process. I've given it a background, which I blurred a bit to make the hands pop. I also darkened the Kanji symbols and gave the hands a white glow. I liked the chopsticks so much I brought it to the top layer. Oh, and I kinda like the solid grey quick links so I spiffed them up a bit with a inner white radial gradient.

That concludes the first post on our fictional Sushi Roca Site. Hopefully I've sparked your interest and you guys will leave some comments and interact a bit with the blog. Until next time. I'm hoping to continue this project sooner rather than later. FYI! The actual design looks way better in full size and in a browser window. Goodnight guys.

Brandon Fowler
Graphic Web Designer & Developer
brandonfowler01@gmail.com