Developing Pixel-perfect Websites
Forging and hammers? Isn’t this a little cliché for website design? It’s actually a spot-on metaphor for just about everything involved with web development, including its evolution over time. In ancient history, everyday people considered blacksmiths to be sorcerers that shaped metal by way of magic and secrets. You may think similarly of a modern day web developer when it comes to shaping a website for your business!
Today, instead of forging hammers and nails by hand, we stamp them out with molds and machines. By increasing the efficiency of the process, we dispel the complexity of the act. The same has happened with web development. Nowadays, we use advanced molding and stamping tools to create a perfect result, every time. Source code has been so far abstracted that web developers can look down on their robust toolset and select the perfect device for any job. You’ll still catch the old guard making stuff in their backyard forge, but any production website should be stamped out of frameworks for efficiency, precision, and scalability.
Below are some examples of website features that used to have extremely involved implementation processes up until a few years ago (same list found in our custom integrations article):
- Membership portals, dashboards, subscriptions models, walled-content, user hierarchy
- Learning management systems, complex content management systems
- Fully custom e-commerce sites and product pages with payment integration
- Features triggered by user behavior, A/B testing, retargeting, dynamic content, related content
- Scrolling portfolios of work presentable within iframes (see our portfolio)
- Animations, scrolling effects, image compression, timelines, hotspots, before and afters
- World class site speed optimization, deep analytics, and, SEO schema optimization
- And more… Complex web features are being abstracted away every day.
What’s great about the evolution of web development is that now more than ever, design chops are key. Just about anyone can make a website with features that just 10 years ago, would’ve taken serious development efforts to pull off. But, in order to get a finished product that evokes authority, authenticity, and value, you must implement expert design.
The First Step to Creating Art Is to Get a Reference
As a web developer, I have a big list of websites that I admire and pull ideas from. At Ladner Studios we focus a lot on the marketing aspects of websites. This includes examining design features of market competition, but often times, I’ll use design elements from websites that aren’t even in the same universe as a the business or market I’m working with. Once you have the tools to do everything, you’re no longer a technician, you’re an artist in a medium.
Creating a vision, using experience, and gathering references is the process we use to jumpstart our web development efforts. I’m at a point with my ability where there’s nothing I can’t look at on the web and replicate in a matter of hours. This includes entire websites, flashy features, content modules, you name it. My ability to do this an asymmetry of the robustness of web development tools, and my ability to keep up with them. It’s another story with web apps and processing highly custom data, but as I mention in our custom integrations article, even complex integrations are within reach. I happen to have a BS in computer science, industry software development experience, and a debilitating level of optimism, so for me it’s just a matter of time.
Like a lot of things, using references to your advantage comes down to good taste, and the ability to manage chaos. There’s a lot of websites out there that do a lot of good things. For us, we look at what works from a feature/marketing standpoint, what looks good, and where we can jump off of to start building a unique website that accomplishes goals.
Step 1 take a look around, step 2…, step 3 finished product. Here’s a list of some of the design elements we use to go from ideas to finished website:
- Color schemes
- Font schemes
- Whitespace auditing
- Big-pop little-pop
- Tasteful features and uniqueness factors
- Call-to-action and funneling modals
- Testimonials, reviews, portfolios, case studies
- Media creation and positioning
- Lighting, overlays, contrast, and shadows
- Animations, iframes, and dynamic content
- Column-row separation and entity shaping
- Responsive, accessible design and section sizing
- Speed, SEO optimizations, dataflow, analytics
- Iteration, iteration, iteration
What colors to use and where to use them? Which fonts fit your brand? Do you use more than one? What about all the interstitial permutations of fonts with different transformations and weight ranges? How do you make your website read like a compelling story instead of a textbook? How do you make it stand out? Where do you put your CTA’s? How do you make sure your site puts your company’s best foot forward with specific markets? How do you make sure it does this on every device aspect ratio out there? There’s a lot to consider, checkout our website for a showcase of this checklist in action.
You can see that we border on technicalities like implementation and SEO operations that don’t specifically have to do with traditional design, but the the beauty of a website is that all the pieces are interwoven. You just don’t have good design if your performance in any area sucks as a result, even if it looks good.
Most websites I audit fail this checklist miserably and need a makeover. As a result, the companies tied to them leave money on the table with every site visitor. I expect to write a post for each point up there in some kind of design series, it’s a lot to get into here.
I will however get into iteration. You can kaibosh entire sections of websites in a matter of seconds and rebuild in a matter of minutes to hours. Many designers lack iteration stamina. You won’t find that here. One of the keys to getting that crystal clear perfect website on every device is to iterate until everything clicks. Sometimes you just have to let the process take over and the more you do it the quicker you get.
And a note on responsiveness + accessibility. The amature designer will design for mobile devices last. They will also design on a big monitor and move the website over to their 13″ monitor and realize it’s all wonked. When you’re designing a website, you’re really designing 3-14 different websites depending on the devices and browsers that your visitors are inbound from. With the tools today, there’s no excuse not to have it all sorted out. It is tough to get responsiveness right on the first shot though, so again, iteration comes into play. I’ve had to scrap or do weird duplication with entire landing pages that didn’t stack properly on mobile, so knowing what works and what doesn’t as far as columns and rows go does help to know before jumping in.
The bottom line is beauty. Simplicity, clarity, elegance, and evocativeness which results in authority, authenticity, and value. When things look good and feel good you convert clients. Your website is a 24/7 salesman. Make sure it looks good and feels good.
Keeping the End Goal in Mind
Websites are sales tools, and good design means that your website sells. Having clear goals, calls to action, and analytics for a website is key to our design process. It’s important to distinguish your market. Are you trying to sell your company or a product? Why are you selling this product? What language does your market speak (figuratively and literally)? And if you’re already selling, how can you maintain, track, and grow your metrics from here out into the long-term? How do you make your website an investment?
If you put too many steps in the way of a website visitor getting what they want, they’ll run. Excessive steps include irrelevant content, slow load times, misdirected marketing copy, flowery features that get in the way, or just plain old disorganized site maps. You may also have to consider your own admin use of this website. Are you able to log in to the back-end of your site and update your content on your own?
Simplicity, clarity, and laser focused market attention will often win the day when it comes to web design. In fact most of your website visitors won’t even notice the design elements I mentioned in the last section until they’re missing. That’s just the way it goes. There’s no such thing as a design feature selling a product, but they can definitely extinguish a sale if they don’t smooth out a bumpy road. You being an authentic authority that gets your client from A to B is what converts. Having a great web presence definitely gets you more chances to do that.