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:
- Capturing a "brand identity" for design consistency and purpose
- Designing the website using graphic softwar
- Developing the website using HTML/CSS/JS and a backend language
- Optimizing the website for Search Engines, Conversions, and Performance
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.
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:
- Wireframe: quickly drawing the layout of every page, keeping user experience and the overall goals in mind.
- Sketch: translating the wireframes into visible UI components that follow the brand identity and design style.
- Responsive: converting each sketch into the optimal interface for multiple screen sizes.
- Graphics: creating the logo, icons, and other graphics that fit seamlessly into the user interface.
- Revisions: the first draft is never the final - take some time to tinker with the design to make it look masterful
Make sure to check that your client (or user base) likes the design before you move to 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.
- 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.
- 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.
- 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.
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.
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.
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).
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.