Design 101: The 3-Ingredient Workflow You’ll Need to Begin Web Design

If you’re a graphic designer and you’re starting to branch out into web design, you’ll need to be well equipped with some great direction. More specifically, like learning any new skillset, you’ll need to be well equipped with a great workflow in order to utilize it effectively. As I began web design work myself this summer, I created an effective 3–ingredient web design workflow that ensures great results. Let’s get started!

Ingredient #1: Style Tiles

The first ingredient you’ll need in beginning web design are the style tiles. What are style tiles you ask? Plain and simple, they’re a website’s visual brand guidelines. They usually display typical elements you’ll see on websites such as colors, button styles, font choices, a simple header, subheader and body copy layouts, pull quotes, iconography, image styles, etc. To get these glorious blueprints, you’ll first have to find time to speak with your client. A good rule of thumb is to collect information from your client, create 3 different tiles and from their feedback create one final tile that will help you in designing your web pages.

Read more about creating kickass style tiles for your next web project

Once you’ve read up on how to properly create some kickass style tiles, we’ll move on to ingredient #2.

Ingredient #2: Inspirational Sketches

Now that you have all of the pieces you’ll need to build out your web pages, it’s time to find some inspiration and get to sketching some wireframe and layout ideas… by hand. Yes, I meant it when I said to draw these layouts.

Steven White (@sketchySteven) wrote in a codrops article, “By sketching, you can do rapid, almost train-of-thought development to get your ideas down quickly. It works on-the-fly, so you can spend less billable hours at the monitor and more time generating ideas.”

In other words, you don’t have to be Michelangelo; you just need to put your ideas to paper as fast as possible to have an effective creative brainstorm. If you hit a wall, try getting inspiration from sites like Crayon, siteInspire, Awwwards or even searching for web design in Pinterest.

Ingredient #3: Sketch

It’s time to build your pages in Sketch. I’m sure you’re thinking, “…wait, what about Photoshop?” Let me tell you right now that web design in Photoshop is dead.

Read more about how Photoshop for web design isn’t just outdated… it’s bad practice

So what’s Sketch? Sketch is a responsive-ready web design software that works pretty much like Adobe Illustrator. You can build multiple-page layouts inside one file, build vector shapes and icons on the spot, and even create CSS text styles. Did I mention that you can “copy the CSS styles for any element” in your document for your developer and if you want, you can see a real-time preview of your designs on your iPhone, iPad or web browser? It’s a completely developer-friendly software. Here’s where you can purchase Sketch, and here’s where you can learn how to use Sketch.

Web design is fun. It’s also a new thing you’ll need to learn how to tackle. As long as you remember to talk with your client and work with them to create a finalized style tile, sketching your wireframes and layouts on paper and to use Sketch to design and build your web pages.

Kyle Christensen

Kyle is the Brand Director at Red Branch Media.

Kyle leads our Graphic Design Department at Red Branch Media. His ability to manage incoming tasks, collaborate with the design team, hit deadlines and keep our file storage system well-organized has helped to shape the design department clients love today. While he’s away from the branch, he spends his time playing drums, video games, cranking the latest emo, pop-punk and screamo songs on Spotify, drinking local Omaha brews, and enjoying life with his wife. Kyle has a BASA with a Concentration in Graphic Design and a Minor in Art History from UNO.