Speckyboy RSS: Why Thinking Ahead Is Crucial in Web Design

Your latest Speckyboy content is here!.

Speckyboy Design Magazine

Design News, Resources & Inspiration

Why Thinking Ahead Is Crucial in Web Design


By Eric Karkovack on Mar 17, 2021 10:23 am


The difference between building a great website and a mediocre one is usually determined very early on. It’s often a matter of a web designer painting their project into a virtual “corner”. That’s where a design becomes inflexible and unable to accommodate various use cases.

This tends to happen in the prototyping phase. We spend lots of time and creative energy on an idea that looks awesome. Our clients might love it just as much as we do. But only when we actually start to build it do we begin to fully understand the consequences.

A design mockup serves as a compass for our website projects. If we fail to think ahead with regards to what certain elements require, it could mean being stuck in a bad situation. The end result is a site that has to make some serious compromises in order to work on different devices and browsers. That can negatively impact accessibility, performance and adherence to best practices.

Thankfully, some planning will help you avoid a messy build process. Let’s take a look at a few key items to consider before sharing your ideas with a client.

How Elements Adapt to Different Screens

There’s a reason why there’s so much talk of a “mobile first” approach to web design. In essence, this allows us to start with the bare essentials of a website. From there, we can add and enhance as the viewport gets larger.

Still, each of us have our own preferences for building prototypes. For those still using a desktop-based approach, it’s important to think about how all of those fancy design elements will work on a phone.

If you plan on implementing CSS Grid or Flexbox, they’ll help a great deal in terms of making the best use of available screen real estate. But other elements may require more effort to get working.

Large sliders, for example, can become very difficult to use on small screens. Intricate images might not be as impactful and text may overrun boundaries. Performance may also lag.

In this case, you might have to decide if the slider is worth showing on mobile at all. Or perhaps it could be refactored to better adapt to work in all situations.

Electronic equipment on a desk.

Accessibility Impacts

Design starts with picking the appropriate fonts and colors. They’re both deeply connected to branding and accessibility.

Fonts should be crisp and sized for legibility. While fancy script and decorative type can look beautiful, it needs to be large enough to read and restricted to usage in headings. If those requirements can’t be reasonably met, it may be best to drop them from your project altogether.

In addition, color contrast should also be a major concern. Background and foreground colors must achieve an acceptable contrast ratio in order to be considered accessible. Plus, it’s just good practice.

If you’re unsure about your palette, use an online tool to determine its suitability. Sometimes, even a slight adjustment is all that’s needed to pass WCAG AA standards.

Beyond those two items, it’s also good to have a plan for how you’ll display elements such as icons. Are they intuitive? Will they be accompanied by text?

Accessible parking sign.

Backwards Compatibility

Not every website has to be fully-compatible with, say, Internet Explorer 9. And legacy browsers shouldn’t necessarily deter us from using the latest CSS or JavaScript. But some thought should be put into backwards compatibility.

Of particular concern are design elements that will render a website completely unusable in older software. Even if a particular browser makes up a small percentage of your site’s visitors, that’s still leaving some potential conversions on the table.

It’s worth considering what effect design decisions will have on these users. The available fallbacks for a given technology might be enough to keep things looking decent and usable. Even better is that they can be fairly simple to implement.

It used to be that designers were expected to ensure elements looked and functioned exactly the same across all browsers. That may be too much of an ask these days. As long as a user can navigate and consume content on some of the more ancient software, that just might be enough.

A vintage computer.

Scenarios That Haven’t Happened Yet

Even the smallest websites will have a need to evolve over time. As new types of content are added, they’ll need to be accounted for in the design. If you’re not prepared, implementing these items could conflict with what’s already there.

Think of adding a series of videos, for example. While the process of adding that content may be easy enough – how will it fit into the look you’ve already established? Will you utilize a default browser UI or craft something to match your branding?

While you can’t always predict the future, you can plan for all sorts of possibilities. This is part of what a design system allows you to accomplish. By setting some default guidelines right from the start, you’ll have an easier time dealing with future additions.

The reality is that what we design today will likely change in the future. Therefore, it pays to be ready for that eventuality.

A person viewing futuristic art.

Building It Right the First Time

Crafting that first mockup is about so much more than just making things look good. It even goes beyond impressing your clients. Indeed, it’s an exercise that forces us to look at our project as a whole.

The aesthetics must be pleasing to the eye. But the design must also be accessible and able to adapt to various screens. Plus, it may have to accommodate different types of content as things evolve.

If that sounds overwhelming – take a deep breath. This is where your experience and expertise can come to the rescue. The right tools can also pitch in.

Think about what has worked (and what hasn’t) in your past projects. Look for ways to implement features that are resilient. Do that and you’ll be on your way to a successful project!

The post Why Thinking Ahead Is Crucial in Web Design appeared first on Speckyboy Design Magazine.



Read in browser »

Recent Articles:

Do We Really Need to Follow Design Trends?
5 Common WordPress Myths Debunked
Weekly News for Designers № 583
The Personal Process of Choosing the Right Design Tool
Your Web Design Business Has Grown: How Do You Manage Legacy Clients?
Share
Tweet
+1
Share
Forward
Copyright © 2021 Speckyboy Design Magazine, All rights reserved.
You signed up for daily Speckyboy Design Magazine email alerts either via Feedburner or directly through our site.

Our mailing address is:
Speckyboy Design Magazine
27 Braeside Park
Inverness, Scotland IV2 7HL
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.

Older messages

Speckyboy RSS: Do We Really Need to Follow Design Trends?

Tuesday, March 16, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Do We Really Need to Follow Design Trends? By Addison Duvall on Mar 16, 2021 06:40 am

Speckyboy RSS: 5 Common WordPress Myths Debunked

Monday, March 15, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration 5 Common WordPress Myths Debunked By Eric Karkovack on Mar 15, 2021 09:06 am Don't be

Speckyboy RSS: Weekly News for Designers № 583

Saturday, March 13, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 583 By Speckyboy on Mar 12, 2021 10:56 am Envato Elements Google

Speckyboy RSS: The Personal Process of Choosing the Right Design Tool

Wednesday, March 10, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration The Personal Process of Choosing the Right Design Tool By Addison Duvall on Mar 10, 2021 07:30

Speckyboy RSS: Your Web Design Business Has Grown: How Do You Manage Legacy Clients?

Tuesday, March 9, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Your Web Design Business Has Grown: How Do You Manage Legacy Clients? By Eric Karkovack on Mar

Inside Claude Monet's Home at Giverny

Wednesday, June 16, 2021

(image) Architectural Digest AD PRO Logo Image may contain: Garden, Outdoors, Arbour, and Porch Forget the Gardens: The Best Part of Giverny Is Monet's Kitchen Read More → (image) Condé Nast

Typography Trends, Tutorials UX, Safari 15, Brave Onboarding, Loaf

Wednesday, June 16, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 16 2021 Typography Trends in 2021: What Should You Know?

Issue 307

Tuesday, June 15, 2021

Fixing up all the table things, equal columns with flexbox, avoiding layout shift when loading web fonts. CSS Layout News Issue 307 By Rachel Andrew – 15 Jun 2021 – View online → It's still sunny

✏ Samsung Redesigns the Save Icon, 22 Exciting New Tools, Typography Trends, and more…

Tuesday, June 15, 2021

Samsung Gives the “obsolete” Floppy Disc Save Icon a Facelift for the 2020s ITSNICETHAT.COM COMMENTS 22 Exciting New Tools for Designers, June 2021 WEBDESIGNERDEPOT.COM COMMENTS Typography Trends in

96 / Not boring avatars for your apps, design resources, iOS 15 UI kit and epic fails

Tuesday, June 15, 2021

Product Disrupt Logo Product Disrupt Half-Monthly Jun 2021 • Part 1 View in browser Image Boring Avatars Tiny JavaScript React library that generates custom, SVG-based, round avatars from any username

Smashing Newsletter #305: Color Palettes Generators and Tools

Tuesday, June 15, 2021

With CSS variables, HSLA, color generators, color combinations and color scales for data visualizations. Issue #305 • June 15, 2021 • View in the browser 💨 Smashing Newsletter Ciao Amici, Color may

👨‍⚕️ Curative Medical UI Kits + 🏆 Challenge Updates

Tuesday, June 15, 2021

Don't Miss This Week's UpLabs Designer Digest 👇 Firstly, we'd like to wish a warm congratulations to Yolan Puspa, the winner of our latest 🎙Clubhouse App Redesign Challenge! Secondly, we

✏ Is A Graphic Design Career For You? Create React Custom Hooks, Health Icons, and more...

Monday, June 14, 2021

Is a Graphic Design Career for You? (7 Questions to Ask Yourself) DRIBBBLE.COM COMMENTS When CSS Isn't Enough: JavaScript Requirements for Accessible Components SMASHINGMAGAZINE.COM COMMENTS Health

A Filmmaker's Kubrickian Loft

Monday, June 14, 2021

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman The living room (that's not really a

This New Tabletop Collection Has Us Falling Back in Love With Formality

Monday, June 14, 2021

Plus, 10 kitchen trends taking TikTok by storm (image) Architectural Digest AD PRO Logo The Expert Taps Former Domino EIC Jessica Romm Perez to Lead Partnerships Read More → CeCe Barfield's New