An In-Depth Look at My Web Design Workflow
Creating an entire website from scratch isn’t easy. Especially when you take into consideration all of the components that go along with that undertaking — including research, brand strategy, design, and development.
The single best thing you can do to make this process easier for yourself (as well as for your clients and your team) is to establish a clear, streamlined routine that you can follow every time.
Having this routine in place will do away with the burden of having to reinvent the wheel with every new project and ensure that every person involved is clear on objectives and timelines.
In this blog post, I’d like to help you create a routine for yourself by breaking down my typical workflow for creating a brand-new website from scratch.
Keep in mind that this process is not set in stone.
Certain aspects of my workflow will shift and be adjusted along with whatever project I happen to be working on at the time. However, this process still works as a general guideline for most web design projects.
Step One: Define website goals
This is the single most important step of the entire design and development process — and it’s often the most-neglected.
A well-designed website should offer much more to users than just mere aesthetics. It should help them understand the business, products, and brand behind the website.
And it should allow them to easily interact with the website so as to accomplish whatever they had set out to do.
This means that every single element of your website should be aligned with your overall business goals.
So before you decide to jump into the sketching, wireframing, design, and development … take out a blank sheet of paper and ask yourself the following questions:
- What kinds of users will be visiting this website? What is their level of technical competency, and what will they be looking for?
- What is the intention behind this site? Is it to generate sales, downloads, sign-ups, clicks, etc.?
- What kind of brand does this website represent? How can the layout and design of this site further that brand in the eyes of visitors?
Having crystal-clear answers to each of these questions will help to ensure that the final website isn’t just a collection of pretty colors, fonts, and images — but a powerful asset in your client’s overall marketing and sales system.
Step Two: Develop site structure and wireframing
Real estate developers don’t just start building skyscrapers out of nothing, right? Of course not. Before any construction can begin, countless hours are spent planning and preparing blueprints for the final structure.
A wireframe is basically just a rough blueprint of what the final website will look like after development.
It is a tool for designers to clearly define a site’s informational hierarchy — thereby making it easier to design a layout and craft a positive (and highly-converting) user experience.
It also allows clients to gain a clearer understanding of exactly how the final website will be designed and structured.
Simple wireframes can be created with just a pencil (or pen) and a piece of paper — and most of mine begin just like that.
But after I’ve sketched out these initial ideas, I’ll develop them further using Figma (figma.com), a cross-platform UI design tool that I’ve written about before.
However, there are also a number of specialized tools on the market designed specifically for this purpose.
With Mockflow (mockflow.com), for example, users can quickly create basic user interfaces, site maps, and even style guides. The platform is also web-based and collaborative — allowing for cooperation across design teams.
Balsamiq (balsamiq.com) offers a similar solution, featuring re-usable symbols, PNG and PDF export, as well as interactive prototypes that can be viewed and navigated by clients.
Step Three: Create visual brand and mockups
Now that most of the initial planning is out of the way, it’s time to jump into the most fun step of the entire process: design.
At this point, you’ll be incorporating visual elements like brand colors, typography settings, and iconography in order to create a sample design mockup to show clients and solicit feedback.
Before this happens, however, I like to invite my clients to collaborate on Invision (invisionapp.com). Using the platform’s handy Invision Boards, we can both add images, color swatches, and other inspirational material to inform the final website design.
I’ll also gain inspiration from sites like UI Gradients (uigradients.com) and Color Hunt (colorhunt.co) and use a tool like Coolors (coolors.co) to put together various color palettes until I find one that suits the project.
All of this gets compiled into a centralized style guide, which serves as a reference point for all of the website’s visual elements during both the design and development phases.
This guide also gets incorporated into the wireframes to create detailed mockups.
For all this, I go back to Figma (no surprises). But there are several other tools that can get the job done just as well, if not better for some projects.
Sketch (sketch.com) has become the go-to standard for modern design projects — due to its ease of use, nested symbol feature, and extensive plug-in library.
Alternatives like Framer X (framer.com) and Invision Studio (invisionapp.com) offer additional features like React code export and shared component libraries.
Step Four: Development
This is probably the most flexible stage of the process. What happens here changes, often considerably, depending on the type of project that I’m working on.
For relatively-simple websites that might require extensive post-launch edits from clients, I like to use Webflow (webflow.com) because of its pared-down Editor mode that allows clients to make quick and simple edits to their content.
Otherwise, if I’m just putting together a static HTML-based website, I’ll typically reach for Bootstrap 4 (getbootstrap.com) as my preferred CSS framework.
For websites in need of dynamic content (like blogs) I’ll hook up an API-driven CMS like Contentful (contentful.com) or Netlify CMS (netlifycms.org) — both of which are far more powerful, and easy to use, than WordPress.
Anything WordPress-related requires sub-contracting to a PHP developer who can turn my HTML content into a PHP-based WordPress theme. (I’d be interested in learning PHP in the future, but it’s not really high up on my list of priorities at the moment.)
During this step in the process, I’ll also make sure that the website is optimized for both performance and SEO.
This includes: setting up a content delivery network (CDN), site code minification, and image compression — which I like to do with a free online tool called Optimizilla (imagecompressor.com).
My favorite tool for assessing website performance is Google’s Page Speed Insights (developers.google.com), which provides recommendations for increasing performance on both desktop and mobile versions.
Pingdom (tools.pingdom.com) is another great tool that also tracks a site’s performance history and makes data-driven recommendations for improving website speed.
Step Five: Launching and Afterward
There’s no such thing as a perfect launch, unfortunately. Even the best-laid plans will still have some hiccups along the road, as well as some unexpected bugs in the final product.
The update and improvement cycle is literally never-ending, so you should always keep an ear open for how users are responding to the website — and which problems they might be having with it.
So take all of these steps with a grain of salt.
Incorporate them into your own workflow, develop a system that works for you, and understand that no process is foolproof. You should always be open to iteration along the way.
