Four steps to effective web design

Most designers complain about the web design process being drawn out and incredibly complicated. The design team at Digital Firefly Marketing disagrees entirely. While you obviously need to have a solid skill base and a knowledge of the programs, we’ve created a process that is, frankly, quite simple.

 1. Brainstorm

Take time to do some background research on your client. Look at the industry they are in and analyze their competitors design ascetics. Start asking yourself some questions—what works well? What doesn’t work? How can we make our client stand out amongst the competition? After discussing with your client what their needs are, put together a mood board—a collection of inspirations pieces—to keep in mind when deciding on color, mood, feel, and design ascetics.


2. Sketch

This is an opportunity to explore which type of layout will work best for this client. Features and functionality necessities vary greatly on a client-to client basis, so sketching allows you to pick and choose element that are necessary for this particular client. You might already have a portfolio of simple website blocks to get you started, but you can always visit Design Shack to get your juices flowing.


3. Wireframe

For this step, we use a program called Balsamiq, but you can use any program that allows you to generate digital wireframes. Creating wireframes allows you to give a visually accurate representation of what the website will look like, allowing the client to—for the first time—see their site coming to fruition. Create a wireframe for each page type; we typically design the home page, a sub page, and a blog page because they have a tendency to have the most differentiation. With all the elements in place, clients get an idea of the functionality and design, allowing them to make and offer feedback before the actual building happens, saving time, energy and money.


4. Build

Now that the client has decided on a wireframe, you just have to fill in the blanks. The wireframe acts as a blueprint for your site, making the design process run much faster and smoother. Because you’ve already decided on a color scheme in the brainstorming stage (or at least couple for the client to choose from), the only edits being made should be very small and particular. Once it’s built out, the client can make any final edits before being sent to the developers.

How much less complicated can a process get? By following these steps, the most time-consuming step (the build) is minimized by allowing most of the decisions to be made prior to this step. Web design just got a lot easier—and more efficient.