Our Process: Create

Web

Marshall Brandt | Jan 20, 2018

4 minute read

Our Process: Create Graphic

Overview

1. Brand Building

2. Website Design

3. Development

4. Optimization

Creating an exceptional website requires a focus on aesthetics, accessibility, and high-performance to ensure a high-quality user experience (UX).

We break this down into four steps:

  1. Capturing a "brand identity" for design consistency and purpose
  2. Designing the website using graphic softwar
  3. Developing the website using HTML/CSS/JS and a backend language
  4. Optimizing the website for Search Engines, Conversions, and Performance

Brand Building

Effective brands are no longer judged solely by their logo or company name. Instead, modern brands have a fully-fledged personality that resonates with their target audience. In a progressively online world, having a website design that doesn't exemplify the brand's personality simply doesn't cut it.

Once you're aware of the website's target audience and goals (see "Our Process: Research"), it's critical to make design decisions that reflect these points. Typography, Color Scheme, Design Style, and Micro-Interactions are just a few ways to make a brand thrive online, and they need to be the focus during the website creation process.

Blog helper graphic

A clearly-defined brand identity makes website design easier and more effective.

Website Design

This portion is no easy feat. Designing an interface that's accessible and radiating with unique style can be quite the balancing act. Our process for sketching mockups and generating graphics is as follows:

  1. Wireframe: quickly drawing the layout of every page, keeping user experience and the overall goals in mind.
  2. Sketch: translating the wireframes into visible UI components that follow the brand identity and design style.
  3. Responsive: converting each sketch into the optimal interface for multiple screen sizes.
  4. Graphics: creating the logo, icons, and other graphics that fit seamlessly into the user interface.
  5. Revisions: the first draft is never the final - take some time to tinker with the design to make it look masterful
Blog helper graphic

Designing usually requires multiple iterations before it looks right. Don't rush it!

Make sure to check that your client (or user base) likes the design before you move to development!

Development

With a beautiful design in place, this is how we make it come to life. During development, there are two main goals: implement the design in a way that looks great on every device and code it in a way that's easy to edit in the future. To do this, we organize our workflow to a 3-step process.

  1. Build Components: a "component" is a section of the user-interface that can function as a stand-alone element. We create each portion of the UI as a separate component using HTML/CSS/JS, allowing for easy edits and reuse.
  2. Stitch & Test: using the back-end language of your choice, generate each page by rendering each component you created. With the basic layout of the website done, test the interface on multiple devices and browsers.
  3. Refactor & Fill Content: To put muscle on our skeleton of a website, we need content to be the focus. Using your back-end language, route each dynamic component to a data source that your client can edit (our favorite: Prismic). Editing basic website data should be completely separate from changing the design or style. Refactor the code so you can save your future-self a lot of time.
Blog helper graphic

“It is not enough for code to work.” - Robert C. Martin

Optimization

Once you're happy with how the website looks and feels, it's time to make it even better. Many developers overlook this step or are too lazy to do what it takes. Optimization has three main tributaries: optimal visibility, optimal conversion, and optimal performance.

Visibility

Search Engine Optimization (SEO). This word gets said a lot more than it's actually done. Optimizing a website for Search Engines includes: following W3 HTML standards, using the <title> tag to your advantage, putting alt attributes in your images, and more. Check out this article for a more comprehensive list.

Conversion

Which is better: a website with 1000 visitors/month and a 5% conversion rate or a website with 500 visitors/month and a 20% conversion rate? Conversion rates are just as important as the amount of traffic, so don't take this task lightly.

Due to design psychology and the easily-influenced human brain, some designs will lead to higher conversions than others. There are many resources to boost your knowledge about what works and what doesn't (check out goodui.org), but one sure-fire method is A/B testing (discussed in our Growth Article).

Performance

According to KissMetrics, a 1-second delay in page response can result in a 7% reduction in conversions. Additionally, 40% of people will abandon a website that takes more than 3 seconds to load. In other words, make your site load faster! Minifying your assets, caching resources, using a CDN, and upgrading your server will all help reduce load times. In addition, using tactics to make your website seem like it's loading faster can help, such as smooth loading animations and asynchronous requests for non-essential assets. Check out PageSpeed Insights by Google for a diagnostic test for your website.

Blog helper graphic

Make sure your website is lightning fast; not everyone has good internet.

Websites 101

Download this short pdf that explains SEO, Conversions, Pricing, and the Development Process.

Other reads for you

Our Process: Grow Preview

Jan 20, 2018

Our Process: Grow

The keys to website superiority are search engine optimization (SEO) and refined user experience (UX).

Our Process: Create Preview

Jan 20, 2018

Our Process: Create

Website creation with a focus on aesthetics, accessibility, high-performance, and user-friendliness.

Our Process: Research Preview

Jan 20, 2018

Our Process: Research

Behind every effective website is a body of resesarch that supports each design, content, and marketing decision.