How to Design and Build a Website – Part 5

Welcome back

What’s up guys. Thanks for coming back to .CeeJayS to read part five in my how to design a website series. If you have been following my series, you will know that I am giving you guys an outline of the steps that I use when designing a website for a client or myself. If this is your first time visiting, take some time to catch up by reading my previous posts about the beginning stages of my web site creation process. If you have been riding with me from the beginning, thanks for returning.

Wireframes Ahoy!

wireframe

Create a wireframe early on in your project to give the client an idea of the layout of the website.

Now that we are done with the discovery phase, it is now safe to say that it is finally time for the design portion. My first step in this phase would be to create a wireframe. I know I touched on this before and your process could very well be much different than mine, but I do not always follow the same pattern with each client. I might jump around but I will always include each step of the process…this makes stuff execute smoothly.

Tip: Keep your wireframes as simple as possible. Stop when you feel yourself getting too detailed.

A wireframe should be very basic and without much detail. This tells the client that a logo will be placed here, the navigation bar will go there, a CTA button will be placed there, etc. I think you get the point. The wireframe is presented to give the client a sense of how the end product will be structured. As I stated before, the wireframe can be done with a pencil and paper or one of the numerous wireframe software or SAAS programs. To read more about how to construct a killer website wireframe, I suggest reading this great article written by .

Pick your Poison – Photoshop or Fireworks

Once the client has agreed upon the layout and structure indicated by the (simple) wireframe, I can now work on the site as a layered mock-up in Photoshop or Fireworks. This will be a detailed representation of what the end product will look like. But of course, nothing is written in stone. The numerous cycles of modifications and approvals will begin here. A color might be changed, an image might be moved or even removed or a client may decide to omit an entire page! This is another step that will make writing the code for the project that much simpler for you or your developer.

Adobe Photoshop vs. Adobe Fireworks

It doesn’t matter what tool you use, just as long as a detailed mockup is created in the image editor of your choice.

After the client has finally agreed with a mock-up, it is now time to slice the images from your PSD or PNG  that can’t be reproduced with CSS. It may help to place all images, text, icons, etc. in their own folder. I suggest reading this article by the guys over at Photoshop Etiquette about a more practical approach to naming, saving and optimizing PSD files.

Tip: Arrange all of your items according to file type and be specific when naming your files.

Well, that’s all that I have for now. The creative process that comes along with designing for a new client can be very fun. I’d like to know what tools you use? Are you a developer looking to sharpen your design skills or are you a designer wishing to learn a new front end or programming language? Leave a comment below to let me know what you think. Please make sure you come back to visit. Next time I will talk more about my creative design process. In the meantime, have a look below for furthered readings.

Until next time, peace.

Leave a Reply

Your email address will not be published. Required fields are marked *