You may feel intimidated to create your own website, because it seems like so much work. Remember this: how you look at the challenge before you is everything. 

 

To get started with ease, your first step is planning. What is the purpose of your site? What content do you want to display? Who is your audience?  What actions do you want your audience to take?  With today’s endless supply of pre-designed templates and technologies, it is important to start with what YOU want.  Make a list of your must-have features, and then list the additional effects you might like to see that you have experienced on other sites. Then put all this aside. 

 

Now let’s get you designing. 

 

As a designer, I create a mood board, then wireframes, then mockups, then the actual site itself.  Taking each of these steps will save you time and assure satisfaction, so you won’t end up saying, “No, this is not exactly how I wanted it to look like” or “In my head it was so much better.”

 

It is helpful to go one step at a time:

 

Mood Board: A mood board is a collection of the color, look and feelings you would like your website to evoke.  Pinterest is great for creating a mood board. It is free and easy to use--what’s not to like?!  Use Pinterest to collect images, fonts and colors that will generate the feelings you want people to get from your website.  If not Pinterest, you can create your very own mood board the old fashioned way. Just start placing cutouts from magazines or color cuts on an inspiration board, and use this to come up with a style or concept for the website.

 

 

 

 

 

 

 

 

 

 

Now we are just about ready to design wireframes for
our site.  Let’s first discuss sitemap, another essential
aspect of web design. The sitemap is pretty much all the
pages you want for your site. It is the navigation of your
website. Once you have that, you will know exactly what
pages you need to create, and a better sense of content
for each page.

 

Having everything completely organized makes life and
your design so much simpler.

 

So what is a wireframe? A wireframe is like a blueprint. It is your layout showing exactly where you want things to be placed. It lets you see your spacing and how things are situated, so you can make adjustments. I like to create wireframes for each page of my site, but if there are pages that have the same layout I would just make note “used for pages X and Y.” 

 

 

 

 

 

 

 

 

 

 

 

 

 

Now you may ask, “What do I use to design my wireframes?” If you do not have software like Photoshop, or Illustrator, don’t fret. Get yourself graph paper. The grids on graph paper are really helpful for designing the layout, adjusting sizes and making boxes to mark it for images or text.

 

Mockup: Now that we have our site layout and site map, we can turn our attention to colors, fonts and things visually pleasing.  For this I revisit my mood board and regain the feeling of what I was trying to achieve when I began. I look for color inspo and font inspo in my mood board, and get geared towards the right direction again.

 

You see how following each step makes it easier to get to your end result?

 

Now we have come to the exciting part:  Developing the site itself. You don’t know coding?  I don’t either. So, no worries. I use websites like WIX, Square Space, or WordPress to bring my paper design to life.  These websites guide you and make it truly easy to develop your website using the mockups you have designed.

 

Many times a pre-designed template is close to my own design; I can choose the pre-designed template and adjust it to what I wanted. If you don’t want to take this route, then hire a developer. Once you have taken care of the meaty parts, getting yourself someone to code everything you have done can be quick and easier on them and you.

 

I hope all these tips helped and have you excited to start your website. Good Luck!