Branding

Step One: Branding

Branding is the first steps. Begin with pencil and paper so that elements are your own and can be easily manipulated.

Who is your target market?

Step Two:
Target Market?

Next think of who you are going to market to. Who is the target audience and what are they going to want?

Draw your inspiration.

Step Three: Stickies

In my creative process, when I find or have an inspirational idea, I draw or write it down as soon as I can.

Mockup One

Step Four: Creating Mockups

When the research is at a comfortable place, begin constructing mockups of site design.

Mockup Page Two

Step Five: Mockups of Other Pages

The mockup for my about page. After getting the layout down for the index page, I began to contruct how my about page would be setup.

Who is your target market?

Step Six: Wireframes and Feedback

After deciding on a design and getting others feedback, construct a wireframe and flowchart which will make building the site smoother and more efficient.

Who is your target market?

Step Seven:
Making Connections to Begin Construction

In this case, I had two designs that I thought would work, so after some feedback from peers I made a decision to go with the first design.

Who is your target market?

Step Eight:
Layouts and Grids in Illustrator

I created a mockup in Illustrator to arrage the grid layout for mockup one.

Who is your target market?

Step Nine:
Which Grid and Typography Works Best

I created a second mockup in Illustrator to arrage the grid layout for mockup two.

“I am looking to use my designs in a creative & inspiring way to assist others.”
Learn More...
Services:
Recommended:
Web Design Tuts is a site full of great resources for building websites: including tips and tricks, as well as icons and examples.

This app is a great resource for determining if your chosen web colors have an appropriate contrast that is user-friendly for all viewers.

This site is a great tool when deciding on web safe fonts. It allows you to preview different font choices at different styles and provides you with the CSS for it.
© 2010 Heidi Makoutz