How to Design and Develop a Fully Functional Website: Fictional Sushi Roca Site Part 2

Where We Left Off

The last post was an introduction about the project "Sushi Roca" and I presented some basic graphic mockups for the fictional site. Here's the next snapshot of the mockup, and you can see how it's progressing.

Here's one of the first of many mockups I will produce. From this point I will come up with a few different variations of this mock and try to come up with one or two totally different looking mockups. It's a process and you should always give your client at least three to four mockup choices when presenting to them.

What Graphics Authoring Program I Use

I'm using Adobe Fireworks CS3 for mocking up and production. I actually prefer to use Fireworks over Photoshop for numerous reasons. It's user interface is extremely easy to use and it's file type support has always been vast. Photoshop use to be exactly what it's name implies and has only evolved into a web design authoring program. Fireworks has always been a program specifically for producing web graphics. Don't get me wrong though, I still use Photoshop for a lot of different aspects of my web design work and it's an indispensable tool in my arsenal.

Layout Breakdown

I've decided to use a 960 pixel layout just to stay safe. The reasoning behind the 960 is because almost every device will display the layout properly. I've added a few more content sections and an area where I might use some jQuery. The jQuery section is located where the single rolls in a line are. I plan to possibly create an interactive set of sliding panels so that the user can view the different rolls that are served at Sushi Roca. This could also evolve into a menu section where the user is able to click on the roll to add it to their pick-up order. For now it's just a concept in it's rough draft. At this mockup stage things can change very quick. Until next time guys!

Brandon Fowler
Web Designer & Developer
brandonfowler01@gmail.com

P.S. Start following me if you would like this demo to get more detailed and posted faster. Come on guys I need some incentive. (lol) 

Web Designer and Developer Ultimate Online Resources

College Education in Web Design and Development for Free or Little to Nothing

"Today college is obsolete for the Web Designer and Developer. Just learn and then showcase your skills"

 Brandon M. Fowler

The Web Developer has a lot of competition these days and it seems like more and more people are trying to join the field. Everyone thinks it's so easy to build your own site or a commercial site for profits. I've immersed myself for the past 10 years to the point of dreaming and sometimes even drowning in code. No one can ever say that I don't know how to commit to anything (lol). The funny thing is I don't have one degree, I don't even have a certificate for anything accept fixing computers (A+ Certification) and my last 5 jobs have been as an in-house Designer and Developer for a few reputable companies. I'm not saying that the road has been easy and I sailed into my positions, but I'm pretty sure it would have been similar even if I had a degree. In short I want to open my tool box up for the aspiring developer trying to make a splash in this big pond of ours. Here's the list of my own top educational site's from which I educated myself. I've also included a few other great resources to get you up and coding.

1. W3 Schools Online

 This is literally a site I use on a daily basis, it has references and examples in plain English and is by far one of my favorites. Simplicity is the key focus to W3 Schools Online. It will help you to build your foundation in code. I do recommend this site especially for the newcomer who doesn't know HTML/XHTML Yet. This is also a FREE resource.

2. Lynda.com Online Video Training 

When it comes to spending a little money on your education this would be the site to start with. I've been using Lynda.com on and off for about 10 years now. For around $30 bucks a month you can truly get your education with ease. Offering specific step by step video tutorials on a vast and evolving list of products and categories. It is for novice and experienced developers alike. Well worth the money. Just remember to get the $30 package so you can download the tutorial files. If you don't you will have to hand code everything. You'll know what I mean once you start.

3. Free Video Lectures 

Have you ever wanted to sit in on a Harvard Lecture. Well now you can and it's great. You can even participate for FREE and get involved in more than just watching the lecture. The Syllabus, Handouts and Citation are all available to you for free. They have done a pretty amazing job for people that don't have the money to attend Harvard. Check it out and you will see the depth of this FREE online program. The site covers numerous topics and will be worth spending some time there.

4. XAMPP 

This program is not what I consider an educational resource but it is an all-in-one installer for converting your PC or MAC into the testing server you require for testing your new development code. In a matter of a few clicks you can be running a development environment with PHP (programming language), MySQL (database) and the Apache (server). This trio is perfect for developing web sites locally on your own system. Trust me when I say it doesn't get much easier than this.

5. PHP (official language site)
The PHP official manual is an excellent source of free information. PHP is open-source, which means FREE

and the online resources, tutorials and frameworks for this great language are as vast as the ocean. You will almost always find answers to your problems on the web. Go with PHP and you won't be disappointed.

6. MySQL (official database site)
MySQL is a database that works very well with both PHP and the Apache server. I recommend using it because like PHP it is also open-source (FREE). The link above will take you to the MySQL official site where you can download it and read up on all it's syntax. I don't recommend downloading it and trying to install it yourself. Use the XAMPP executable program that I mentioned above. Once you learn MySQL, learning any other database query language will be a breeze. MySQL is basically just a place to store all the important data for your projects. For example products, customers, images, phone numbers, addresses and anything else you see fit. It's an Excel Spreadsheet on steroids. It's awesome! I've included a few links below to some really great books about using PHP and MySQL together.

7. Apache (official server site)
Although I don't know an extensive amount of knowledge about Apache, I can tell you that it's a server and it will enable you to execute server side code (like PHP). Ultimately you are just installing it so that you can test your work on your own personal computer. Otherwise you would have to upload all your work to a live server to test it and trust me, you don't want to do that. Plus Apache is open source (FREE). Check out their site and familiarize yourself with it a bit. 

8. jQuery (official site of The Write Less Do More framework) 
JQuery is really an awesome javascript framework that is exactly what it's catch phrase describes. You will definitely want to get involved with this language once you get the basics of development down. Also, jQuery is an open-source framework. Check this jQuery reference book out.


Well, every development language I described above is open-source and available for you to use. Once you learn how they work and interact with each other. You will be on your way to developing web applications for the world. I would love to see this blog get some followers. Sign up and follow me, it will give me incentive to keep posting. I really would like to get some like minded people who are as passionate as I am.

Brandon Fowler
Web Designer & Developer
brandonfowler01@gmail.com

P.S 
If you're looking for a great program that will help you author professional looking websites, try Adobe Dreamweaver.

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

Nevada Outdoor Living Custom Web Development Project By: Brandon Fowler

It's been a while since my last post and the image of the site to the left is the reason why. I've taken on a pretty huge job with Nevada Outdoor Livings web site. I chose to build it from scratch instead of using one of the popular CMS's currently available for use these days. The reason I went this direction is primarily for control over my work. I will be trying to post as much as possible the rest of the month since I'm now semi caught up with this current project.

My ultimate goal is to create a Web Design and Development community. Please follow me and show some support with the Dark Star Blog. Thanks to all the visitors so far.

Brandon Fowler
Graphic Web Designer & Developer
Las Vegas, Nevada

I used the Adobe Creative Suite to build this site.