MattBurt, Author at Go Fish Digital

A Beginner’s Guide to Achieving Web Design Consistency

MattBurt — Tue, 12 Sep 2023 13:00:37 +0000

A Beginner’s Guide to Achieving Web Design Consistency

The need to be consistent in web design is one of the first things many designers learn. And despite the fact that it is a core tenant of good design, consistency can be difficult to obtain. Whether that is due to the scale of the project or other stakeholders want to have their say, entropy is a law for a reason.

In this post we are going to take a look at some steps you can take to make sure your website has consistent design.

What is Web Design Consistency?

Consistency in web design is the practice of maintaining a uniform appearance, feel, and usability across all pages of a website. Website design consistency involves the systematic use of similar design elements and structures, such as color schemes, fonts, layouts, and navigation menus, to create a cohesive and intuitive user experience. This consistency helps users to navigate and interact with the site more efficiently, fostering a sense of familiarity and trust in the brand or company represented by the website.

Related Content:

Benefits of Website Design Consistency

To put it briefly, the user experience improves when you use consistency in your design.

Consistent design is intuitive design. Having the same functions, symbols, and animations throughout your website will help the usability and learnability of your website. When your design is consistent people are able to transfer past knowledge they had about your website to other pages. Don’t underestimate the importance of this. Have you ever been frustrated by a website? Chances are it was designed with poor consistency.

If a website is designed with consistency, the user will learn things about the site without even realizing it. Imagine your website is the house you live in. You know your way around the house without having to think about it. When a guest comes over to your house the layout can be slightly confusing for them. The job of a designer is to be as consistent as possible to avoid confusing the guest.

There are three major elements of design consistency that need to be focused on to achieve avoiding confusion for your guest.

1. Visual Website Consistency

Elements of your website that are perceived the same way make up visual consistency. Visual consistency helps the user learn the website. Fonts, buttons, photos, and colors are just a few of the many elements of visual consistency. These elements need to stay the same throughout your site. Visual consistency is lost as soon one of these elements doesn’t remain consistent throughout your site.

2. Functional Web Design Consistency

Functional consistency comes down to things being predictable for the user. Having good functional consistency will vastly improve the usability of your website. The predictability that comes with functional consistency will make the user feel more comfortable navigating your site.

An example of this would be where navigation buttons are located. Are they located in consistent places throughout the pages on your website? If they are, you’re achieving functional consistency!

3. Internal Web Design Consistency

Internal consistency is the combination of both functional and visual consistency. As you continue to add content to your website you need to make sure the visual and functional elements remain consistent with past pages. An example of bad internal consistency would be updating visual elements on a page on your website without also updating past pages that contain those same older elements.

If you achieve these three elements of design consistency it will result in a better site where the users will have a more enjoyable experience.

How to Be Consistent in Your Web Designs

Now that you know the elements you need to achieve, you may be wondering how you go about achieving them.

Branding, typography, colors, space, and grid will all define the visuals of your website. These need to consistent. You’ll want to create a strong visual hierarchy, the most important things are larger than the less important things. Use the same color palette across the product. Padding and margins need to be consistent in all similar elements (buttons, forms, etc.). Everything should be ordered in a grid and nothing on the website should break this grid.

Now that you have your visuals out of the way, make sure everything functions consistently. Do the forms and buttons throughout your website all work the same way? If you have a multi-step form, do all of the boxes function the same? These are important things to double check.

Final Thoughts

Nobody is perfect when it comes to design consistency, but it’s important to strive for it. Design your website with your user in mind. Know who your user demographic is and make sure your website anticipates their needs. Combine this knowledge with design consistency and you will have a website that has no unwanted surprises and gives the user a great experience.

Save

A Beginner’s Guide to Achieving Web Design Consistency is an original blog post first published on Go Fish Digital.

Typeface Pairing for the Non-Designer

MattBurt — Fri, 22 Mar 2019 18:03:59 +0000

Designers are often tasked with incorporating text with designed elements. Figuring out which typeface to use for any given project can be a little overwhelming with so many options available to you. On top of that, projects generally include different typefaces, which you will have to pair together to look cohesive (making it that much more difficult).

But, I’m here to tell you that type pairing doesn’t have to be difficult at all! There are no hard and fast rules for it. You just need to keep a few best practices in mind to get you started. This guide will help you choose and pair typefaces so you can have great typography no matter what you are designing.

Related Content:

Typeface or Font?

First off, let me correct a simple mistake almost everyone makes. When describing lettering, the figures themselves are actually called a ‘typeface’ not a ‘font’. Think of a typeface as the overarching family and a font as the specific style of the typeface. For example, Helvetica is a typeface. But Helvetica 14 pt bold is a font.

Now that the technical stuff is out of the way, let’s get onto the guide.

Limit the Number of Typefaces You Use

The old rule that designers used to follow was to never use more than two typefaces. Today, most designers have thrown this rule out the window. I do think it’s a good rule to keep in the back of your mind, however, especially if you don’t have experience using more than one typeface at a time.

Keeping the number of typefaces you use to a low number will help keep your design clean, cohesive, and legible. When you begin a typography project, look for similar traits in typefaces and go from there. Typefaces that share traits like height and width tend to pair together better and you’ll have an easier time choosing.

Use Both Serifs and San Serifs

Typefaces fall into two main categories: serif and sans serif. Typefaces that are serif have small lines at the end of the letter strokes, while typefaces that are sans serif have no lines. Using both of these styles together can bring a great contrast to your typography and help ensure that you don’t pick fonts that are too similar in style. A good example of two classic typefaces that work amazingly together is Helvetica and Garamond.

Keep Visual Hierarchy in Mind

To have a successful typography project, it’s crucial to create a visual hierarchy with your typefaces so the reader’s eye is drawn to the most important words or phrases first. Elements such as size, weight, and spacing all play a critical part in how the reader will see the text.

To create a visual hierarchy, you will need to determine which parts of your text are more important than others and let your typeface choices reflect those priorities. Typically, the most important text should be larger than everything else and then you can scale down from there.

Use Font Pairing Resources to Help You

Since you’re likely new to pairing typefaces, I wanted to provide you with a few helpful tools to get you started. Here are some of my favorites:

I recommend that you take your time going through these tools so you can learn even more tips and tricks. It’s going to take time to get comfortable with type pairing, so really lean on tools like these during that process.

Trust Yourself

Sometimes, knowing if fonts complement each other can feel like a shot in the dark. When this happens, trust your gut. You may not get it right every single time, but you’ll learn from any mistakes you make and, eventually, you’ll get more confident. Make a point in your daily life to notice fonts and how they are paired together. This will help you develop an understanding of what font combos work and which ones don’t. Before you know it you will be pairing fonts with little effort.

I hope this guide will help you on your journey to expert type pairing. Do you have any tips or tricks that I missed? Leave me a comment and let’s chat about it!

Typeface Pairing for the Non-Designer is an original blog post first published on Go Fish Digital.

How to Create a Flat Illustration in 5 Steps

MattBurt — Tue, 03 Jul 2018 13:00:45 +0000

Flat illustrations are all of the rage these days, and can be a great way to display information in an easy-to-follow way. But, if you don’t have much experience creating them or you don’t have a process to follow, they can be pretty daunting. I had no idea where to start when I was first designing flat illustrations, and I made a lot of mistakes. But now, I have a process that saves me time and helps me avoid problems while I’m designing.

Related Content:

I believe that seeing another designer’s workflow can help build a strong foundation for your own, so below is the step-by-step process of how I create flat illustrations.

Step 1: Sketch

The beginning of my process is all about figuring out the composition, dimensions, and intent of the piece I’m working on. I do this by sketching on my iPad, but a pencil and paper work too. Keep in mind that this step shouldn’t be time consuming (I usually spend no more than 15-20 minutes on my sketches) because right now, you only need to get the image in your head down on paper. Don’t worry about spending a ton of time trying to perfect details. Just sketch something that is clear to you and worry about everything else later.

Step 2: Outline

Next, I turn my sketch into a vector outline by importing it into Adobe Illustrator and tracing the lines with the pen and shape tool. After I’m done tracing, I like to smooth my lines out with the smooth tool and once I’m happy with all of the lines, I start to make adjustments to the composition.

At this stage, it’s a good idea to lay everything out in the way you like so you don’t have to move things around later. It’s also a good idea to make sure you have your layers organized. You’ll have hundreds of shapes in your Illustrator file by the time you’re done with your design, so make sure to name and order them as you go to avoid confusion.

Step 3: Color

It’s time to start filling all of the outlines with color. It’s okay to not have a full color palette in mind for your design. There are a ton of great websites out there that can help you figure out your color palette (some of my favorites are Adobe Color CC and Flat UI Colors). Try not to go overboard and add a ton of colors unless it’s absolutely necessary. It’s more visually appealing to keep the color palette as simple as possible. I find that pairing shades of one color with a different, contrasting color gives the best visual effect.

Step 4: Details

After I have my base color, I then go in and add additional details that will bring the illustration to life. This is the most time-consuming part of the illustration process for me, but it’s important to devote a lot of time and attention to this step because the illustration should look finished at the end of it.

The key to mastering this step is to think about how to add depth and dimension to the shapes while remaining consistent with their details. Where is the light source coming from? Do all of your shadows match? Are the appropriate colors used in each situation? Make sure to answer all of these questions thoroughly in your design. And take the time to clean up your lines and align all of your anchor points. And remember, doing this tedious detail work will take your illustration to the next level.

Step 5: Texture

Some flat illustrations can seem a bit void after I’ve finished all of the details, so adding textures can breathe a little extra life into them. Adding texture is optional, so if you think your illustration is fine after the last step, feel free to skip it.

The easiest way for me to add textures to vector illustrations is to use the grain effect in Illustrator. To do this, I duplicate the shape I want to apply a texture to and then apply a black and white gradient to it. From here, I apply a grain effect to the gradient and customize the opacity and blending mode on the gradient until I achieve the effect I want. You will discover that there are hundreds of ways to achieve textures in Illustrator, so do some experimenting to see which one works best for you.

Closing Thoughts

Learning how to create flat illustrations is a long process that takes a lot of practice to master. Every designer has a different design process, and it’s important to figure out what steps work for you. As you’re learning, take your time and try not to get frustrated. With enough practice, your illustrations will get better and you’ll start to discover your workflow. And, eventually, you will be knocking out illustrations like this on a daily basis.

What do you think of my design process? How does your process differ from mine? I’d love to hear your answers, so let me know in the comments below!

How to Create a Flat Illustration in 5 Steps is an original blog post first published on Go Fish Digital.