How to be a web design superstar and make better websites

Editor’s note: I know there is a difference between a website “designer” and “developer”, but for the purposes of this post, I am using the terms interchangeably. Both professions—along with writers, dev operations, and other consultants—must work together for a successful website. If you’re a solo freelancer, all of this work often falls to you.

I’m old enough to remember when every job post for a website designer or developer talked about being a “rockstar”, “superstar”, or “guru”. That seems to not be the case anymore, either because I don’t notice it as much or it genuinely has abated.

But people still sometimes refer to me as a “guru” and I cringe at the word. I’ve never considered myself that good at what I do.

But I’ve long wanted to answer the question: “How do you become a web design superstar?” Or, perhaps more specifically, “How do you make the best websites?”

I’ve thought about this question for years. When I was much younger I concluded the way you become an excellent, superstar web designer is by pushing the boundaries of art and technology. Then I got a job in government and realized all those cool artistic websites serve no one well beyond being something some people might find interesting to look at.

Then for a while I thought excellent web designers made websites that were short, small, and easy to read. Then I read some of the stuff clients were asking me to publish on their sites. They lacked depth and leaned too heavily on lines like, “Call us for details”.

I’m still wrestling with how you can become a web design superstar and make the best websites on the planet. But I think it involves this formula:

(Do what you say you will + deliver respectable results for reasonable people) (intense focus) – technical jargon = great websites and professionalism

Or put shorter: Excellence=(Do + Results)(Focus)-Jargon

Truly, this formula can work for just about anyone in any profession.

I hesitate to write this because I question my authority to do so. Am I a web design superstar? I don’t know. I think that I do extremely well for my clients, meeting them where they are, and helping them get to a better place online.

Sometimes I wonder if my location in Indianapolis precludes me from being a superstar web designer. We don’t have major companies in Indianapolis that most people have heard of. There are no Apples or Microsofts on my resume. And many of the clients that I work for are small, independent organizations and businesses that most people will never hear of precisely because they are hyper-focused on serving a local market or need.

But it’s precisely this kind of client and client interaction that has helped me develop an understanding about what makes for an excellent web designer. The best web designers do what is in the best interest of the client regardless of their budget and with an intense focus.

Money can certainly buy your way to success in a lot, maybe most industries. But becoming the best web designer entails deeply understanding your clients, their needs, and the needs of their users. And this is where I have devoted much of the last several years of my career.

Anatomy of great websites

There is no perfect website because the needs of sites vary by client. Apple.com is probably great for Apple, but the individual web pages are often massive at 15MB+ per page, not counting some of the images and videos. And scrolling through endless whirling animations has never worked well for me no matter what device I use. I suspect most people can agree that’s not “excellent”. It might be “amazing” or “creative” or “inspiring”, but it’s not “excellent web design”.

Then there are the sites setup for local businesses in your area, like the hair salon, bakery, and your kids’ school or university. They may be the best they can be given the client’s budget or skill, but if they prompt you to download an app instead of using the site, contain little actionable information, or don’t answer your questions, it isn’t an excellent website—at least not in a client’s individual use case.

I was looking at a bakery site the other day and the menu was frustratingly vague and lacked prices. The only way to contact the baker was through Facebook Messenger, a service I do not like or want to use. Given the time of day, there was no way to call and no email or contact form existed. And if it did, we’ve all tried sending emails through small business website forms that never get a reply because no one tests them to know they’re still working.

A great website for the user:

• Efficiently serves the entirety of the user’s needs at the moment they are looking at the site.
• Works on their device and within the scope of their capabilities.

That’s it. That’s all a user cares about, ever. To illustrate this, imagine this scenario:

A 53-year-old mother of two wants to order a cake for her daughter’s 20th birthday. She knows the cross-town bakery is popular and needs plenty of advance time to get the cake ordered. She expects about 5 or 6 friends and family will come for the party.

Web designers learn in Web 101 classes “know your audience”, but this is almost always forgotten and immediately ignored. Because in this very real scenario, the website for just about every bakery will fail. Here’s how this really works:

• At 53, mom is working a day job and does not want to drive across town to the bakery just to order the cake. She also wants to get this seemingly simple task done when she has time for it, likely on a weeknight or weekend.
• At 53, mom’s eyes are starting to get a little worse. She doesn’t want to admit it yet, but she knows she’s approaching an age where bifocals might be necessary.
• She’s trying to keep this a surprise, so being discreet is important.
• She knows enough about this bakery to plan ahead by six weeks or more, but at that distance it’s hard to pin down how many people will come to the party. So how big of a cake does she need? And what size cake serves what number of people? She doesn’t really know because the depth of cakes makes as much difference as the diameter. And one of her daughter’s friends has a nut allergy, so are there nuts on this cake?

To be truly excellent to mom, the bakery’s website must:

• Use readable fonts that are consistent, large, and high-contrast regardless of whether she is on her phone, iPad, or laptop.
• Display numerous clear, large images of cakes with captions or descriptions of what they are.
• Explain how far in advance to order a cake today and not “in general” (e.g., the holidays vs. Mother’s Day vs. the summertime may have variable demand).
• Be quick and efficient entirely within the website, all without requiring mom to download an app. Because if she downloads an app, it will auto-download to the shared family iPad her daughter might see.
• Describe in short detail how the cakes are designed with all available possibilities for frosting, half-and-half options, flavors, customizations, and allergen issues.
• Allow her to submit an order and either pay securely then or when she picks up the cake. The ordering process must be customizable enough to indicate she has concerns about nut allergies.

Ideally, this website would give mom a way to understand everything about the cake and suggest a menu with notes like, “Available in 6”, 8”, and 10” rounds. 6” serves 5-7 people, 8” serves 7-9, and 10” serves about a dozen people.” That one line answers a lot of questions for mom.

The website’s text should also be friendly and approachable, not “CALL US TO PLACE AN ORDER” in bright red and all caps.

If you’ve ever ordered a cake from a local bakery, you can appreciate how frustrating it might be to instead bounce to Facebook Messenger to ask these questions, carry on a conversation over a day or more, and risk having a notification pop up and spoil the surprise.

In some circumstances, you have to wonder if the bakery can’t achieve most or all of these simple demands, are they better off not having a website at all and requiring people just show up?

Great websites give maximum attention to every page

A truly excellent, superstar website is developed page-by-page with maximum attention to every page. This means:

• The navigation menu provides top-level pages that help users navigate into subpages without hover states (which do not exist on a phone or iPad).
• Each page contains a clear heading and sub-heading and each are clear and indicative of what the page is about. Think more “About the history and leadership of Acme, Inc.” and less “Get to know us” or just “About”.
• The text of the page is easy to skim with a clear, semantic outline using headings, lists, images, and other assets that are easy to follow and understand. Each sentence should be reviewed and edited as if it were a magazine piece.
• The images on each page aid the text and message, as well as the brand and emotional quality of the topic and page with consistency and accuracy.
• Serve as a powerful component of a larger “whole”, linking to other areas of the site and providing ways to drive the needs of the organization (e.g., sales) and the user (e.g., letting people get help).
• Answers questions directly within the context of the page the person landed on. A good way to do this is by placing FAQs with proper FAQ Schema on pages about individual products, projects, people, or concepts instead of in a monolithic FAQs page. This can also aid in a site’s SEO efforts and ensures questions are answered in the moment.
• The page has clear titles, meta descriptions that are inviting, and each asset of the page is optimized for just that page. For instance, WordPress sites with WooCommerce often include site-wide scripts and javascript functions that increase page payloads. These scripts can be excluded from non-commerce pages like Contact and About pages. Reducing page payloads adds up when you consider user cellular and data bandwidth limits and the environmental impact of all the servers and caching.
• The page respects user choices by allowing accessible customizations to font sizes, contrast, and asset sizes with a focus on serving users accessibly from the start. For instance, this includes ways to get at information without watching a video, which may not be captioned and is useless to deaf or blind users.

Anatomy of a great web designer, or how to be a web design superstar

Much of what makes for an excellent webpage comes from a great web designer. A page that is accessible, for instance, starts with designers and developers who respect people where they are in their moment.

Much of my business career involved working with a fishing tackle company. It would be easy for a lot of web designers to assume users of the site were slow, dumb, using outdated technology, or otherwise country bumpkins that can’t read.

In truth, many of the customers on the site were professionals working at the top of the sport using tens of thousands of dollars in equipment and technology. They weren’t all universally in some backwoods cabin using slow dial-up connections. They were often carrying iPhone Pros—but did wind up in the middle of a lake where cellular reception degrades and they’re best inclined to think, “I need to get a new lure”. Knowing this, a focus on page speed matters a lot.

A great web designer:

• Is curious and relentless in understanding their client’s industry and their customers.
• A great web designer will spend time with their clients shadowing their operations, talking with customers or the client’s clients, and asking deep questions.
• Is an excellent writer, thinker, and creator capable of recognizing when a paragraph or asset is superfluous, unclear, or otherwise does not fully serve the user.
• Is cross-discipline enough to understand the needs of others on the team, including the client’s team. This means you know you might not be the person inserting the images into the site, but you recognize you’re developing a site that must accommodate them, their shape, and technical needs such as format, size, and DPI. Or that the sales receipts going to the accounting department give them the information they need about orders.
• Is an advocate for their end users, not just their client. This can become challenging and requires people to speak up when a client may fall back on their own jargon or language.
• Is someone who responds efficiently to messages and phone calls. I am no advocate for spending all day in a Slack or email inbox. But being able to respond to an email within a few hours if only to say you’re working on it or “Looking into this…” goes far.
• Sets reasonable expectations for reasonable people. Some clients are not reasonable, and some end users aren’t either. But reasonable people can understand that a website for a bakery in a small town isn’t going to light the world on fire short of intense luck, like if Gordon Ramsay showed up with a camera crew to talk about how good the cupcakes are. This also means a great designer can recognize in their mind, “I can probably do better, but there are limits to what can be done here.” Know that a small local nonprofit isn’t going to have 2 million visitors a month, at least not anytime soon.
• A great designer respects their client’s intelligence. Far too many developers out there are charging small businesses with tight budgets $7,000 to install a $45 template before moving on to the next client. You’re taking advantage of how little some people know about the web.
• A great designer (and client) recognizes websites are forever changing and must be maintained. The costs and efforts of these endeavors should be included. Just like a house, you can’t merely build it and let it sit forever. Eventually the lawn needs mowing and the roof needs replaced.
• A great developer recognizes their own limitations. If they are a great developer but lack design talent, for instance, they should be able to provide excellence within their scope of work and not “under-deliver” elsewhere. We’ve all seen websites designed by developers that work fine, but look terrible, are hard to read, say nothing, and ultimately are not great websites. Likewise, a great designer recognizes when they need help to make a menu load properly or increase functionality without papering over the issue. Partner with other great people.

Overcoming problems with budget and clients

Client budgets are often the critical difference between a great website and just an okay website.

Enterprises with committees and boards are another stumbling block. These are valid challenges and require individual developers to know who they are, who they serve, and what matters to them. Superstar developers know when and how to say “No”, walk away, or draw a line in the sand for what they stand for.

Great designers deliver honesty and a pursuit of creativity, information, and advice regardless of budget. These components of superstar designers and developers are “free”, insofar as your ability to suggest a client revise page text to make them clearer or provide a better photograph. Great designers set the bar for themselves and clients to clear.

Recently I worked with someone on a series of pages about the cost to use the client’s services. At no point in the text they sent or suggested did the actual cost get written down.

“We should be able to say it costs $X over Y period to use this,” I said. The client agreed for sake of transparency and they recognized the lack of a clear price structure was causing them to lose people over time when sticker shock set in. Expectations were out of whack and it was causing problems for everyone, including their sales and retention teams. They went back to evaluate the total cost over time, including all add-on fees and options.

Anyone with even a few years of client experience knows how challenging this can be and truly is. Sometimes “We’ve got what we’ve got” is all we can do. But great designers maximize each asset to the best possible outcome. For instance, a photo that is too small may be placed right-aligned instead of full-width, and it can still have accessible ALT tags, gets converted to next-generation formats, and includes a descriptive caption.

A checklist and manifesto for great web pages and designers

Atul Gawande’s “Checklist Manifesto” is excellent reading for anyone who wants to improve their business or operations. I’ve used checklists for years and once I started, pages improved, links were more accurate, and fewer errors abound (which is super useful when you’re working on email campaigns that you can’t “fix” later).

To determine if a website is great, compare it against this list:

• Each page loads quickly and efficiently without superfluous assets, scripts, or frameworks.
• Pages are built with respect for the end-user without linking to PDFs (except in rare cases where a PDF is truly necessary, like a blueprint) or vague, unliked items like “Contact our sales team for more”.
• The whole site was built with attention to each page, from the SSL certificate to each sentence presented.
• Each page is accessible to the maximum extent possible and without shortcuts like saying, “Well, it’d take an hour to convert that video into a useful text summary and I don’t have time.”
• Each page serves a need completely and holistically, with attention to search optimization, user need, user intent, company needs, and brand.

To be a better web designer, work against this list

• I allocate time to focus on clients and their tasks without distraction. That each time I think about a client with focus and intensity, I am focused just on them and not someone else or my inbox.
• I focus on providing practical, useful services for my clients and their clients.
• I routinely think about ways to improve and reasonably compare myself to people I believe to be better than me.
• I deliver what I said I will do and provide reasonable results given the project size, scope, and constraints.
• I routinely test my work by filling out test orders from start to finish, submitting test form entries, and visiting little-touched pages.
• I work closely with my clients, spending time with them in their office, on the phone, or with their clients to understand what’s going well and what isn’t, as well as how they think and what they need.
• I know that analytics and data are not the only ways to improve a site and that nothing can replace a humane understanding of intuition, emotion, psychology, and technical needs.
• I will not collect user data for no good reason, and all data I do collect is purposeful and defined.
• I will not ask my clients to do overly technical, jargon-heavy things I could do quickly and easily for them, like managing DNS records or logging into a server to restore a backup.
• I work to improve my skills emotionally as well as technically.
• I recognize but do not over-focus on the merits of frameworks or scripts or technical matters and “silly debates” that do not matter much to my end users.
• I make effort to develop cross-discipline skills, such as understanding basic elements of color and typography, SEO and link structure, and page bandwidth and server performance.
• I deliver honest, valuable consulting that does not trick, fool, or take advantage of anyone. That each thing I do and decision I make, if fully and honestly explained to a client or a user how it was done or made, would not make them feel taken advantage of.