style tile

The Process of Making a Website

What’s it like to make a website? What are the steps we go through to bring it to life. I thought it might be helpful to layout the process we go through to make a website, for those that are curious.

Identify Goals

The first step is all about our client. We try to get to know our client- who they are, their business, their target audience, and the specific goals they have in mind for their website. Oftentimes they themselves don’t even know the answer to these questions. Most people just want a website, but don’t know what a website can do for them or how to leverage it. So we talk through these things.

Layout and Functionality

After we have established some goals, we begin to draft wireframes, layout, and identify functionality. A wireframe is a sketch (usually pen and paper) of the layout of the website. We decide where the menu should go, the navigation, content, and other things. It really all depends on the goals we decided earlier what goes into the website and where. For example, if the main goal of a website is to get people to sign up for something, we’ll place large call to action buttons and text prominent in the layout. If the main goal is to sell stuff, we’ll make sure to sprinkle store items throughout.

During this stage we also start to make decisions on specific ways to implement the goals from the first step. So if the client wants a calendar of events, we decide what calendar to use. If they want to edit the website pages themselves we go a different route. It’s really about taking the client’s goals and identifying specific ways to make it happen.

Implementation

When we’re settled on layout and functionality, it’s time to bring it to life. During this step we enter all the content (text, photos, files, etc.) into the website. We don’t write or create the content ourselves (usually) but rather insert what we get from our client. If they don’t have enough to fill a page, we give tips on how to write good content. We also test out all the difficult stuff like slideshows, sidebar items, dynamic lists, and forms. We make sure everything is showing up properly and in the right spot.

Design

The next step is design. Kim usually handles this step, though she gives a lot of input on the other steps as well. The design is basically adding color, vibrancy, and fun to the wireframes. If the wireframe is a skeleton, then the design is the skin. The design involves choices like ‘how big should the margin be here’, or ‘what color should I make these links’, or ‘how big should the text be’? Everything on the website needs a designers touch, and everything can be influenced by design, from font choices, to image size, it’s all in the design. So this is a very big part of the process.

Kim uses the Adobe Suite (mostly Photoshop) to create design mockups that show me what it’s all supposed to look at. You don’t need a design mockup for EVERY page on the website. But it is helpful to have a mockup for every kind of page. For everything else we use a style tile, which is a document that outlines design choices like fonts, colors, and sizes. It basically says “paragraphs should look like this, headings should look like this, buttons like this, etc”. It fills in the unknown.

Launch

When the design is done, and the website is working properly it’s time to launch. This is when we either upload the site to a live server, or change the website domain name to a publicly accessible one. Either way, when someone types in www.my-cool-site.com the new website comes up. The final thing we do is make sure the site works across a variety of browsers and screen sizes. We do a lot of this during the design phase, but it’s important to test it all out again once the website is live.

So there you have it. This is the process we use to make websites. These steps can vary and overlap a bit from time to time, but this is the typical pattern we follow.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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