Web Design Inspiration At First Glance
Web design inspiration
Their worth is often intangible and without a clear-cut return on investment, forcing executives to put them on the backburner for more predictable results.
With that unfortunate and negative connotation aside, only the most successful businesses realize the importance of cultivating the immaterial side of their operations. A brand isn’t a brand without the creative work (and website) that stands behind them.
I mean, what would Ben and Jerry’s be without a little Phish Food or Cherry Garcia? They are both original musical takes on what could otherwise be straightforward ice cream flavors. I’ll leave it to you to judge which is more attractive to consumers wandering down the supermarket aisle.
This idea of visual development loops back around to our topic of websites with the question: how can you develop a site without putting the time into planning a brand design? You can’t unless you want your site to look something like this…
I don’t trust that site, and you probably don’t either.
This post is the third part of our website redesign series. If you haven’t been following along, you can get a recap by clicking on the section you’re interested in below. Or you can download our free workbook to help guide you in completing the steps yourself.
The design process we’ve been diligently following:
- Strategy and Brand Building
- Project Planning
- Design and Mockups (You’re Here)
- The Buildout
- Optimize Content
- Launch First Iteration
- Analyze Results
These tips can be applied whether you are building a new website, working from a pre-designed template, or starting a partial makeover. So, let’s get started to discover how you can evolve your web design inspiration.
Here’s an old website created in early 2020.
Now, in 2021, the website looks like this.
The new site is taking off and you can see the results below.
How to Design a Website and Web Design Inspiration
Website design is all about following a process to get your desired results. You’ve built a sound strategy, benchmarked current standings, and made a plan on how it’s all going to get implemented. Now it’s time to get the pen to paper and start designing.
Web Design Inspiration Start With A Brand Guide
Whether you call it a brand guide, style guide, or marketing guide, start documenting one for your organization now.
If you decide to put it to the wayside, you’ll regret it. Each future marketing project you launch will take twice as long just to determine if it’s look and feel are consistent with the rest of your brand imagery.
A cohesive look and feel of a site will go a long way. Your brand guide should include primary logo colors, secondary colors used through marketing material, call-to-action design requirements, logo specifications, spacing requirements, and font types.
That’s just to start. Take a look at Apple’s identity guidelines; they have 64 pages of referenced material regarding their brand. Google, on the other hand, dedicates an entire website to their Material Design Guide.Over 70% of clicks go to organic searches that rank on the first page of Google. Click To Tweet
As a web designer, you want to build a style guide that will guarantee users have a smooth transition from page to page as they progress through the buyer’s journey on your site.
It is particularly important to identify brand style choices for your project if there are multiple teams, freelancers, or consultants working on the website redesign.
Don’t let people have the freedom to choose what they think looks good because you’ll end up with a mishmash of clashing designs. A well-thought-out guide is all you need to keep everyone running down the same path.
Research Popular Trends
It’s likely that your previous website has an outdated design if it has been a few years since your last redesign project. User preferences change drastically and often.
Looking at and taking notes on trending designs is an excellent place to start when scanning for website design inspiration, but it’s not your end all be all either. It’s nice to know if users gravitate toward parallax images and asymmetric layouts that do away with balanced sides or if drop-down menus affect user experience on mobile devices.
View these trends in the eyes of a top-quality sales prospect. Does the CEO of a manufacturing company care about CSS animation effects that fade widgets in from off the side of a page? Probably not.
They’re presumably right-angled thinkers that want to cut to the chase and find out how you’ll help them accomplish their goals. They’re not worried about a little movement on your website.
Do you see my point? Don’t go with the latest trend in web design if it doesn’t do anything for your buyers. Take notes about what matters to your target audience and design your user experience with them in mind.
Now is the perfect time to reach out to past clients and ask how their interactions with similar sites influenced their purchase decisions, whether it be a positive or negative experience.
Build The Website Layout
You wouldn’t build a house without a blueprint, would you? Of course not, and you wouldn’t construct a website without starting off with a wireframe.
Instead of plunging into a CMS platform and spending hours worth of custom coding and having your team change their mind, take the design iteration process offline. I’ve seen this done in every way possible. With a pencil, on a whiteboard, PDF editor, Powerpoint, Adobe, and online wireframe tools.
The point is to keep it simple and allow stakeholders to weigh in with positioning changes to avoid having to double back on your hard work. This approach gives you an idea of where your current design stands and which elements will need tweaking.
If taking the design offline is too ‘old-school’ for your liking there are dozens of wireframe tools that can get the job done. Their price typically ranges from free for light projects to $150 per month for an enterprise plan.
MockFlow is the most straightforward wireframe tool I’ve had a chance to use. Most importantly it has a free version with pre-developed templates that can be modified to jumpstart the process. As a bonus, the app will create an export of your XML sitemap that should be incorporated into your live website as a healthy SEO practice.
If MockFlow doesn’t fulfill your project requirements, here are a couple of other top-notch wireframe tools for your consideration:
Determine Visuals and Web Design Inspiration
Each website redesign is different. Some require a complete overhaul of visual assets, and others just need to update visuals that have gone stale. Your wireframe should give you a reliable indication of how many visuals are expected and how many new ones need to be developed.
Just like cataloging your website content in the planning stage, you should keep a detailed log of all visual materials. These can be images, call-to-actions, videos, gifs, and logo variations.
Start by adding the imagery you’ll be keeping from your previous site layout to determine how they will line up. If you see gaps that need filling, communicate those needs with the design team – making sure to use the brand or style guide for visual reference.Developing a website isn’t easy. If you strategize, plan, implement and adjust, you’ll get the best results.
Web design inspiration has long been the squishy, half-loved-half-hated stepchildren of the marketing family. Their worth is often intangible and without a clear-cut return on investment, forcing executives to put them on the backburner for more predictable results.
So you might be thinking about a new website or a website redesign project. You have a lot of choices and a minimalist web design is a great choice for many organizations. Minimalism, also known as the essentialism or simplicity, describes the reduction of the existing to the absolute minimum necessary.
Minimalistic web design is all about reducing the superfluous elements on a web page and concentrating on the essentials. The goal is to present the content and services in a simple manner. For minimalistic web design, remove unnecessary tabs, menus, drop-downs, pop-ups, sliders, buttons, colors, accents, background, etc.