2020 has just begun and already, you can find a lot of trends popping up, including website designs! All these new styles and techniques are helping designers create even better websites that perform AND look amazing. But what are the ultimate trends you should be watching out for?
There are a ton of trends and tips people have been saying, though obviously, you can’t merge all of these on one website! So I did my research and checked out what website design trends are going to boom this 2020. Read on as I show you the top nine ideas you should consider implementing on your site now!
Nine Website Design Ideas to Try This 2020
As the years’ pass, the Internet just keeps evolving, and it will continue to do so in 2020. To stay relevant and have your viewers genuinely interested with your website, here are some design ideas to try out:
Bold Colors and Simplicity
We now see even more competition online, which is why brands want to be bolder, more unique! That’s why most websites will adopt bolder and brighter colors to catch attention.
Brilliant and deep colors aren’t just attention-grabbing, they are immersive and will keep visitors staying! Besides this, many web designs today are now merging both simplicity AND boldness to catch attention without it being “too much.” With amazing colors and simple design, you can still stand out and look good doing so.
Animations, Dynamic Illustrations, and GIFs
Videos became trending in 2017 and it continues to grow as the years pass. However, slow loading times have made it difficult for viewers, which have you lose them! So what’s the solution?
Motion graphics and animation! These don’t take that long to load and are just as enticing to the viewer’s eyes compared to plain text. You can incorporate animations, illustrations, and GIFs in your content or around your website design, like:
Having mouseover effects
Transitioning between webpages
Many website designs are grid-based, most likely a way to play it safe. And sure, some people might see asymmetric designs an absolute sin, but it’s a whole new year! Meaning, asymmetrical structures are now looking even better because of its brutalism and individuality.
However, you still need to be careful when trying asymmetrical layouts! You need to make sure that it’s still easy to navigate around while still looking “out of order” in attractive, understandable ways.
Loud and Eye-Catching Typography
We ALWAYS use typography, so what makes it different from the former years? It’s no new web design trend, BUT the typeface design will start going out of the usual and traditional. This time, we’re using loud and bold typography that’s almost impossible to miss.
Words speak louder when it looks attractive and big. Having bigger, bolder, customized fonts can definitely keep your brand unique while getting the message out coolly.
Website designs don’t have to ONLY be computerized. Websites represent more than what a visitor sees on the screen, but the brand itself! That’s why personalized and hand-drawn elements will trend this year.
Such illustrations and drawings add a character to both site and brand. It shows your human side compared to high-quality photos, a personality that will definitely have your viewers interested.
Attention spans get shorter and shorter as everything becomes instant and quick-loading. That’s why web design needs to speed up and advance to cater to the easily distracted!
That’s where voice-capable interfaces come along, with smart virtual assistants such as Cortana, Google Now, and Siri guiding people to surf the net. Instead of having to take the time to type, they simply ask the question and get the answer!
Advanced Machine Learning
One of the trends predicted back in 2018 was augmented reality, machine learning, and artificial intelligence. This year, you’ll be glad to know that these three are coming to web design, making it easier to personalize landing pages and capture your viewers’ details!
Because of these advanced technologies, you’ll know how to design your pages efficiently so your viewers will be more inclined to stay and check out what your site has to offer.
Brutalism Incorporated In Web Design
This 2020, we will see more brutalism in designs and go beyond what’s “normal”, building individuality as a brand. This adds personality and sense of belongingness to your target audience. When you humanize your brand, it helps build a relationship with them, which encourages more visitors and better click through rates.
CSS Grids and Scalable Vector Graphics
Smart CSS grids now offer options to create website designs into different versions, fitting any screen size. This makes the website more responsive for anyone viewing it, and with better interest! And the more mobile devices are being used to surf the web, the more important smart CSS grids will be.
The same goes for scalable vector graphics, as visitors LOVE multimedia. With engaging visual content, it keeps your visitors engaged and staying to see what more you have to offer. Besides this, such graphics are now personalized, made to fit just about any screen to keep your visitors within the site.
Wrapping It Up
From free illustrations and graphic software to advanced technology like AI AR, 2020 has a lot in store for websites and designers. It’s time to start becoming more aware and learn these trends to stay on top of the competition! That way, you entice viewers and satisfy clients, ensuring that the design was a success and will stay that way for the long run.
I hope these nine website design ideas to try this 2020 gave you ideas on what to implement for your own site. So don’t wait any longer and try out any of these ideas to reach your goals now.
Do you have any queries or would like to share your own ideas on website design? Share them in the comment section below, all your thoughts are much appreciated!
This is a huge opportunity for your website to meet consumer expectations. Plus, it’ll help separate you from your competition. Your website exists for several reasons:
To attract qualified leads
To showcase your offer and position it in the market
Let your audience know how your offer is going to change their lives
It shouldn’t be something you threw up on the internet because someone said you have to have a website. If your content is good but the design is bad, your website is failing at its job.
First Impressions Only Happen Once (Surprise!)
Many times, your website is a potential customer’s first experience with your business. You have half a second to capture their attention. And 94% of that first impression is related to the design of your website.
Your website should instantaneously let them know they can trust you. Plus, good web design will encourage them to stick around. They’ll want to click through your site and see what you have to offer.
Awful Usability Pushes Potential Customers Away
When’s the last time you visited a website only to hit the back button a few seconds later? Maybe the text was too small to read or eight different popups bombarded your screen.
Consumers expect a website that’s clean and easy to navigate. If they can’t figure out how to close your opt-in popup, they’re going to click away.
Guides visitors through with clear calls to action
Is mobile and tablet responsive
And builds credibility with readers
Are You Falling Victim to an Outdated Website Design Trend?
New technology and consumer expectations drive changes to how websites look and operate. What worked in the past may not be the best practice today. Like fashion and consumer goods, website design trends change and evolve every day.
As you read, think about your website and how you can improve user experience. Because at the end of the day, that’s what website design is all about.
The need for mobile-first design becomes more vital as the world switches to browsing the web on the go. If your website isn’t designed for an excellent mobile experience, you’re not doing your business any favors.
Action item: Visit your website from different mobile devices. Make sure it looks good and is easy to navigate across the board. If it isn’t, update your design.
2. Opt-in Popups (Hint: They’re Annoying)
In reality, 70% of people think popups are annoying and intrusive. Think about the last time you were reading something online and a popup distracted you. Odds are, you didn’t enjoy the experience.
It’s no secret that popups are good for conversions and getting people on your list. But, are you willing to sacrifice user experience for the sake of increasing your conversion rate by fractions of a percentage?
The magic isn’t in the number of people on your list. It’s in the number of those people who read and care about what you send them. If someone wants to join your list, they’re going to find a way to do it.
They don’t need a popup covering their entire screen to convince them. And if they do, they aren’t the right people for your list.
Action item:Decide if having a popup is worth it. If it is, make sure it’s easy to close and doesn’t appear every 30 seconds. If not, remove it.
3. Missing an SSL Certificate
SSL certificates are a sign of trust. Whether you’re asking for personal information on your site or not, visitors expect to see an SSL certificate.
Firewall and virus protection programs show a warning before allowing users to view sites without a certificate. This isn’t good for user experience and will likely push visitors away before they take a step inside.
5 years ago, this didn’t matter. But today, SSL certificates are easy to get and install. Because of that, they’re an expectation and demand rather than a “nice to have”.
Action item: Make sure you have an SSL certificate installed. If you don’t, contact your hosting company and ask them to install one for you.
4. “Sticky” or Floating El
Sticky (floating) elements stay on screen as the user scrolls down the page. They usually appear as:
A menu bar at the top of the screen
Social media buttons along the sides or bottom
Before mobile became the most popular form of browsing the web, floating elements worked. Desktop and laptop screens are big enough that they didn’t diminish usability.
But, on small screens, they tend to get in the way.
Action item: Consider disabling floating elements on mobile devices.
5. “Above the Fold” Design
In the early 1990’s, scrolling was a new concept. Because of that, web designers needed to put ALL the important information above the fold. Today, scrolling is a learned behavior.
Most people expect to scroll. And because devices aren’t the same size, there isn’t a one-size-fits-all dimension to design for. It’s still good practice to include a call-to-action above the fold.
But, there’s no need to overload the space with information.
Action item: Make sure you have one clear call to action above the fold. Make it obvious what you want your reader to do. Move the rest of your information below the fold.
6. One-Page Design
One-page design means everything is on your home page. They work well for some businesses including brick-and-mortar shops, startups, and personal websites. But, they’re not a good idea for most.
It’s bad for SEO – there’s no internal linking between pages on your site
Your website analytics won’t actually tell you anything
Your sitemap is unclear and doesn’t make sense from a coding standpoint
Consumers expect to visit more than one page to find what they need
You’ll end up sacrificing content and important messages to save space
Action item: If you’re using a one-page design, consider changing it. Add important pages and move relevant content to them.
7. Bad Coding Practices
Coding for web design gets more complex every day. And if you’re not a coder, it’s hard to understand how everything works together. People spend years learning the in’s and out’s.
So, no one expects you to know it all. But, knowing the fundamentals of HTML, CSS, and web development is essential for:
Knowing how to optimize your site’s code
Improving site speed and removing irrelevant scripts
Moving code around to improve the user experience
Optimizing for the user experience
Altering your site layout without hiring a developer
Action item: If you don’t know how to code, consider hiring a web developer or taking a course. We recommend the Pluralsight Python course to help you get started.
Is Your Website Living up to Consumer Expectations?
Website design trends are changing as quickly as they come. Go back and make sure your website isn’t falling victim to any of these outdated practices. Your visitors will thank you and your business will flourish as a result.
Interested in learning more about web design? Browse our blog to learn more about optimizing your website, coding for the web, and growing your business, today!
When you go to a party, there’s always a host. The host is usually the one who sets the location so everyone can come and enjoy the party.
When you’re thinking of website hosting, think of your site’s host like the host of the party.
Your web host, just like a party host, offers you a place to put your website so it can be enjoyed by everyone on the internet.
If you haven’t guessed, in this video, I’m going to tell you all about the basics of website hosting services, go over a few different types of web hosting, and explain why choosing the right provider matters for your business.
Keep watching to learn more!
Thanks for tuning into this video. If you aren’t subscribed to our YouTube channel already, make sure you hit that big red subscribe button so you don’t miss out on any content.
What is website hosting?
As I said before, website hosting allows your site to be on the internet. You can have the best-looking website out there, but without a host, all you have is a bunch of files with nowhere to go.
When you pay a hosting provider to host your site, you’re paying for space on a server.
The amount of space and the cost can vary depending on what you choose.
There are a lot—and I mean A LOT—of hosting providers out there. What you choose really depends on what you need for your business.
What I mean by this is different providers have different options you can choose from to host your website.
If you’re a larger e-commerce site selling football jerseys internationally, you’re going to need much more space and control over your website than a smaller site that makes custom sports attire for local teams.
So choosing the right type of web hosting for your business is really important to your web presence.
What are the different types of web hosting?
I’m going to talk about four different types of website hosting.
The first option is a website builder.
You’ve probably heard of these. Website builders like Wix,Squarespace, or WordPress are popular options among small businesses and bloggers.
With a website builder, you can also directly edit your site without any specific code, so it’s a great tool for a beginner.
The second type of website hosting is shared hosting.
Shared hosting means you share a server with other websites. So if you don’t get a ton of web traffic, this option might work for you.
The downside is if one website crashes the server, you’re stuck dealing with that. Even if you didn’t break it.
If other sites on the same server get a lot of traffic, or even if your site gets a lot of traffic, it’ll also slow down your site.
There are other options if you don’t think this is what your business needs.
All images are optimized and compressed for each device screen size without direct impact to the end user. Offscreen images are handled via lazy loading and image attributes height / width are set when applicable. Proper alt tags are also included.
Accessibility has a great impact on user experience (UX). Creating an accessible website ensures that people, regardless of their physical or mental limitations, can obtain the information they need and communicate with your organization like the rest of the world.
With internet technology becoming mainstream, making your fully accessible is more important than ever. Adhering to the web accessibility standards is a legal requirement (as provided in the American Disability Act of 1990). Public and private organizations also consider it a social responsibility.
Building and Construction Accessibility.
Physical access to offices, healthcare facilities, schools, and commercial establishments is a basic civil right. When constructing a building, the owner should ensure that accessibility is incorporated into the planning and design process. For example, people in wheelchairs should be able to conveniently enter a building through the presence of ramps or via elevators. There should be parking areas allocated only for clients or guests with disabilities, doors should be kept open where possible, signs must be placed where customers can easily see them, and specialized devices or equipment that cater to their needs should be made available.
The federal law requires that all public accommodations should be accessible to anyone with or without a disability. With billions of people using the internet to transact with government offices, buying all sorts of stuff online, booking a hotel, flight or restaurant reservations, searching for local businesses, etc, it is also important that websites are made accessible and navigable to them.
When designing a website, a lot of developers and business owners tend to overlook the importance of website accessibility. What they don’t realize is that it compromises their brand, hurts their reputation, and increases their risk of lawsuits.
The Americans with Disabilities Act (ADA) is a comprehensive law aimed to protect the rights of people with disabilities. It requires that all offices, organizations, or institutions (public or private) make their goods or services accessible to those with physical or cognitive limitations.
While web accessibility was not specifically outlined in the ADA, it is considered part of Title III: Public Accommodations. ADA compliance is a hot topic today and many businesses have faced lawsuits because of violations due to non compliance.
What is Section 508?
Also known as 508 Compliance, it is the shorthand for the law requiring government websites to be accessible for people with disabilities. It is an amendment to the Workforce Rehabilitation Act of 1973 which basically requires accessibility on all federal electronic and information technology (EIT).
What is WCAG?
Because the ADA does not directly define web accessibility and it’s scope, web designers and developers refer to the Web Content Accessibility Guidelines (WCAG). It is a set of international standards that provides specific recommendations on how to make websites accessible.
Differences between WCAG 2.0 and 2.1
WCAG 2.1 is the updated version of the guide which was published early in 2018. It defines the success criteria provided in 2.0 but with a few more additions to address mobile accessibility, people with low vision, and people with cognitive and learning disabilities. It’s important to note that WCAG 2.1 conforms to 2.0 which means that the accessibility requirements outlined in the WCAG 2.1 are the same as that of the earlier version.
What is VPAT?
The Voluntary Product Accessibility Template (VPAT) was originally used as a tool to conduct government research on the use of information and communications technology (ICT). Now, it is being utilized to test a website’s accessibility in conformance to the rules and regulations provided in the ADA and Section 5.
When it comes to website design, we often think about aesthetics. Of course, to attract more visitors, we want to make our websites beautiful with beautiful fonts, graphics, buttons, and other visual elements.
But creating a website that is both beautiful and accessible is possible. When designing your website, consider the following steps:
Enable keyboard navigation for web design.
ADA-compliant websites are keyboard-accessible. This means that all their functionalities can be accessed through the keyboard. In addition to traditional keyboards, note that some disabled users make use of specialized computer keyboards. Thus, your website navigation order must be logical and intuitive. This means it should follow a visual flow, such as “right to left” or “top to bottom”. Basically, you want to make it easy for users to navigate links, buttons, and form controls on your website via their keyboards.
Prioritize text clarity.
Written content such as articles page info and calls-to-actions should be easy to read. Vision problems like color blindness, near or farsightedness, cataract, and low vision are among the most common disabilities not just in the U.S. but in the world. Thus, it only makes sense to prioritize text clarity when designing websites.
Don’t rely exclusively on color.
While color is important, they are not the only consideration to make when creating an accessible user interface. The font style and size are important too. Times New Roman, Verdana, Arial, and Calibri are among the most recommended font styles.
Order content in HTML for screen readers.
When structuring content, always consider how it can be accessed by people that use screen readers. These are devices that translate digital text into synthesized speech. Note that a screen reader presents content linearly or one item at a time.
Add explanatory link text.
Providing a text description can help users distinguish one link from the others and determine whether to follow the link. When the link redirects users to an image, the text alternative will describe the unique function of the link. If it contains both text and an image, the description can be used to describe both the content and the image.
Use a 40×40 pt. clickable area for touch controls.
People with mobility issues make use of touch controls to navigate the web. When creating the layout of your web interface, provide enough space for CTAs and other clickable areas.
Do not forget to follow the accessibility checklist.
An accessibility checklist ensures that all parts of your website adhere to the WCAG. Everything from the images, colors, text, audio, video, navigation, site structure, forms, and text elements.
Accessible web design does not only lead to better experience among users with disabilities but also among those who do not have disabilities or limitations. Many accessibility requirements improve user experience, particularly in limiting situations.
For example, the use of contrasting colors or easy-to-ready fonts benefits people accessing a website from a small screen (such as a mobile phone) or in a dark room. Text alternative benefits users with limited bandwidth while audio transcription is a great tool for users who are unable to use earphones to access audio content.
Websites that follow the WCAG and ADA-requirements for web accessibility can benefit from creating a page solely for accessibility information. A great example of an accessibility guide is the one from the BBC website. It outlines how users can navigate and make the most from their website if they are blind, can’t see very well, unable to hear, or unable to use the keyboard or mouse to browse. Meanwhile, the accessibility statement is a powerful declaration of their commitment to making their site accessible. It includes information about the company’s accessibility goals and the methods they are using to achieve them.
After making the necessary changes, web designers should test whether they have achieved their accessibility goals.
Accessibility testing can be done in two ways: manual or automated. Accessibility firms like Be Accessible Inc. combine these approaches by using tools and conducting end-user testing involving real people with disabilities to examine the accessibility of a website.
Usability testing, on the other hand, is carried out to determine how useful the website is based on several criteria, such as learnability, efficiency, and user satisfaction. A more practical and effective way for businesses to measure the usability and accessibility of their websites is by outsourcing it to a third-party testing company.
Accessibility, in a nutshell, is usability for all.
It ensures that everyone has equal access to your website, no matter what limitations or disabilities they have.
Accessible websites have all elements from the text to the visuals and audio components available for people with disabilities.
It’s hard to cater to all disabilities, but by following the recommendations provided by the WCAG, Section 508, and relevant policies on accessibility, you can make your website usable and accessible for people with varying disabilities.
Looking to re-design your business’ website, are ya? You’re not alone.
As the internet grows older and older, so too do the websites that populate its vast expanses of digital square-footage. It’s becoming more important now than ever before to develop an effective website redesign strategy so that your business can stay ahead of the curve.
In this article, I’m going to be talking about 10 things you should do to develop a future-proof web re-design strategy.
When I say “future-proof”, what I really mean is making sure that your website won’t need another re-design for at least a good 3-5 years.
It’s of course inevitable that change must happen – it’s the only true facilitator of growth, so to claim that something is completely future-proof would be foolish. So, a word of warning – even though we’re going to work together to create a comprehensive, actionable website re-design plan, it won’t be 100% future-proof.
So let’s jump right into 10 things you can do to develop an effective website re-design strategy for 2020.
1. Define your current KPI’s (key performance indicators), and record your metrics from the past 1-2 years.
Before you can even THINK about re-designing your business’ website, it is absolutely imperative that you create a list of important KPI’s for your business that you need to record on your new website.
Because what’s the point of an evolutionary design if you’re not even sure how effective the evolution process is? After all, that’s how humans ended up with tailbones and the third eyelid – so, let’s not make the same mistake with your website.
You will want to create a spreadsheet list with all of your most important KPI’s and the data for each one from the past several months or years.
Some examples of KPI’s that are generally considered important across multiple industries are:
Number of visitors/visits/unique visits on your website
What pages are being visited the most often, and what your visitors are doing on those pages (you can use a heat map tool to discover this information)
Your bounce rate (what percentage of traffic is landing on your website for only a few insignificant moments and then “bouncing” off of the page)
Number of leads being generated through a contact form on your website
Number of online orders being processed through your website each day, week, or month
Where your traffic is coming from (traffic sources/referral websites), and what devices your traffic is viewing your content on
Of course, these are just a few metrics. Some of these might be important to your particular business, and some might not. Maybe your most important KPI isn’t even on this list! That is fine – but whatever you do, take an audit of your KPI’s and write them down.
2. Determine the “why” behind your decision to re-design your website and make it known.
A lot of people misunderstand the “why” when it comes to website re-designs for small to medium sized businesses, and even more so for larger scale businesses and corporations.
You see, what most people interpret as a superficial need to “stay on the cutting edge of tech” or to “keep up with the Joneses” is actually an attempt to solve a common issue:
Keep users happy for longer.
Depending on your type of website and business, the amount of time a user spends on your website is directly relative to the quality of content offered on it, and how useful it is to them.
By offering more high-value content, you are keeping your users happy and increasing the likelihood of them converting into customers.
For me, the quality of content I deliver on my blog is important to me. But “content” doesn’t just mean articles in a blog.
For you, your high-valid content may be the level of depth in which you discuss your services or products, or how much time your support team could be saving by simply answering questions on your website before customers have the opportunity to ask them and waste precious hours of your team’s workday.
Whatever the case, the ultimate goal of an iterative website re-design project should be to increase the value of content you offer to your users and in turn give them more reason to be coming to your website in the first place.
Whether this is done by re-evaluating the hierarchy of information or completely overhauling your websites interaction design to make it more user friendly, the end goal is to provide more value.
So find out your why, and share it with your internal team to promote interdepartmental synchronicity and project harmony. Because that’s what leaders do, and you lead this team.
3. Define issues that need to be resolved, and discuss potential resolutions with both internal team members and your users.
Aside from just improving the content you offer, an extremely important aspect of website re-design is fixing things that aren’t working.
Elements on aging websites breaking or losing relevancy/functionality is inevitable, and is not your (or your previous web designer’s) fault. It’s just the way of things on this wonderful, crazy internet of ours!
Just like a home, things will break if not properly maintained. Sometimes this can be avoided through consistent maintenance and regular updates and minor changes.
But sometimes it can be years before you make a change to your website – and by then, there’s just too much to even address, and it’s possible to feel overwhelmed and like the only thing you can do is pay someone to completely re-do it.
Some things you should take inventory of when searching for “broken” elements or anything that needs fixing are:
Menu navigation, drop downs, anchor links, and mobile menus: these are notorious for breaking down over time, and sometimes, the design can just become archaic and you need to completely re-evaluate the design as a whole.
Buttons & links: yes, links can break. It happens all of the time, and most of the time, you won’t notice until you’re in an important meeting with a client or stakeholder and you’re going through your website together (oof).
Contact forms, lead generation, and contact information: contact forms can break easily, and once broken, usually need to be completely re-built. They can be very hard to fix once broken unless you have the technical skill set.
Design & function: remember mullets? You probably don’t want to, but they were a thing. Just like that pixelates banner on your website in Comic Sans font with a rainbow background. Sometimes what seemed like a great design choice 10 years ago… just doesn’t age well.
Tools, tech, and integrations: all too often, I’ve seen clients approach me because an integration that was vital to their business’ performance on their website breaks or is no longer supported. It’s imperative to consistently stay up to date with these integration softwares and services so that you know the moment your site starts to lose function.
4. Find your target audience and define your ideal buyer persona.
If you’re savvy with digital marketing jargon, then you know all about buyer personas. If not, then here’s the run down:
A buyer persona is a fake person you create a profile for that is someone who you would consider the ideal customer for your business.
When creating buyer personas, you should concoct a made up person and be specific about their:
Interests & hobbies
Social media preferences
Be as specific as possible. It sounds silly, but creating 2-3 different buyer personas will help you create a plan for a new website that is geared towards these ideal customers.
5. Don’t forget about your current high-value content pieces!
Do you have a section of your website which is typically considered more popular than other sections? Does your website have a function or feature that actively collects hundreds or thousands or more views per day, and which you have received many compliments on?
Whatever it is, you do NOT want to give this content up when you re-design your website. You may need to revisit the design of the content or section, and perhaps even increase its functionality – but you must not completely abandon it.
Be sure to take an inventory of your high-value content and communicate this with your web designer. Your core users will be excited to hear about your new website, but they would be bummed to hear about their favorite part of it being discontinued!
6. Competitor analysis & competitive user testing/research.
One thing that I always get from web design clients is:
“Can’t you just make my website look like my competitor’s”
And the answer is an obvious yes – I can. But why would you want to create a website like your competitor, when you can instead learn from your competitor and create a website that compensates for the gaps they fail to address?
A full competitive analysis contains things like:
SEO analysis: find out what keywords your competitors are ranking for that they maybe don’t deserve to rank for…
Design analysis: what aspects of your competitor’s website are lacking? Where is there room for improvement and iteration? How would you do it differently and better?
User research analysis: it’s just as important that your users love your website as it is that you love your website. But how do they feel about your competitors’ websites? Send out anonymous surveys to randomly selected users to find out.
7. Brand evaluation and evolution: a website design is only as good as the brand it’s designed for.
Your completely new website design should be coupled with a rebranding experience that will completely “wow” your customers for full dramatic effect. Why is this so effective?
Think of the process like a series of well-placed and well-timed punches:
First, you hit them (your users) with a pre-launch campaign and tease a new branding experience and new website.
Next, you roll out a couple of blog posts or videos/social media posts about your upcoming re-design.
Finally, you roll out the website re-design…
… Followed up by the completely refreshed, revitalized branding that you’re now proud to show off. Shiny new logo, beautiful, sturdy business cards, elegant letterheads, and informative car wraps.
Now, all of your users are talking about your business. They’re discussing your re-design with friends, in real life and hopefully on social media.
Truly the perfect re-branding campaign.
Now imagine this applied to your business. How much new business do you think you would get? Is it worth it? Are you 100% happy with your current branding as it stands right now? Where is there room for improvement?
These are all questions to be taken into account when considering a website re-design, as they will definitely impact the design process.
8. Define your SEO goals and perform a content analysis of the current iteration of your website design.
Do you even know what the top 100 keywords your business’ website organically ranks for on Google?
Are you in position 3, 4, 10, or 25? Are you even in the top 100?
What about your competitors? Do you know where they are positioned on Google search engine results pages (SERP’s)?
If you don’t know the answer to some of or all of these questions, then it’s about time you performed a professional SEO analysis of your website. You can do this using a tool like SEMrush or Moz, but your best bet is going to be hiring a professional to handle this analysis for you.
Once you find out where you are right now, you need to write out a plan for where you want to be.
Obviously, we all want to be position number 1. So let’s be realistic. Say you’re on page 3 – your goal should be to at least get to page 1.
If you’re already on page 1 for one keyword, then your goal should be to get to page 1 for ten more keywords.
Goals are the most important factor in the successfulness of a website re-design – or anything in life, for that matter. So be sure that you’re actively creating new goals, and never settle for what you think is a good status quo simply because “it’s better than it was”.
9. Crate 301 redirects for old content that you intend to phase out or discontinue in the next iteration of your website design.
This is a very important aspect of website re-designing that many people forget about – and one which I will even admit to forgetting in the past myself.
When you design a new website, it is easy to forget about all of the old pages from your old website. It’s important to take inventory of all of these pages and, once the new website is live, implement proper 301 redirects to your new website (to either the homepage or the most closely matching relevant content on your new website).
Because even though those old pages no longer exist on the internet, people will still have access to those links if you’ve given them out before. The links may exist on old printed marketing collateral you may have forgotten about, or perhaps someone has linked to a page on your website someone online. It certainly would not look good if a user were to visit that link and find an error code because that page no longer exists!
When Google indexes your website and finds out that a link no longer works, Google will remove that link from their search results. This can impact your search engine visibility in a while swarm of negative ways that, believe me, you don’t want to think about right now.
So, for the love of all that is digital, create proper 301 redirects BEFORE you launch your new website.
It will save you in the long run.
10. Decide whether or not to perform the re-design in-house or through a freelance web designer.
Now you’ve got everything ready to go – you have lists, audits, reports, KPI’s, goals, and more.
Now you’ve got to decide how you’re going to approach this as a business.
I know many crafty business owners who are fully capable of performing a re-design on their own – however, the reality is that many of us business owners have much more money than we have time, and it makes more sense to hire someone else to do it so that you can focus on keeping the business operational (because of you don’t, who will? Bob from accounting? I think not, Bob!).
Hiring an internal employee has many benefits – I’ve personally been hired as a full time UX/UI web design project lead, and it always worked out perfectly for my employers.
When you have a full time web designer in house, the benefits can be outstanding. You have a wealth of digital marketing knowledge and design experience available, and you can rest assured that the designer will do their best work for you since they ARE you.
But… they’re expensive.
Especially in California.
So, if hiring a full time designer is not best the option for you, what else can you do?
You can contract a freelancer (hi 🙋♂️).
Freelancers have busy schedules and usually a high volume of clients, but the one benefit that they offer is that they always deliver, and the product that they deliver comes backed with years of accumulated experience.
Not to mention that they only cost between $2,000 – $20,000 for web design projects can easily see you experiencing thousands of percent ROI, which is a ratio that I think is pretty intriguing.
So, whatever you decide to do, do it now and do it quickly.
The longer you wait, the more money you are losing and the more expensive it will be to catch up further down the line.
Identify your problems now.
Determine a solution.
Plan a strategy to execute your solution.
Hire a professional to bring your project to life.
It’s the best thing you can do right now to improve your business’ online visibility and profitability. I speak from experience.
If you liked this article be sure to share it on social media with people who may find it useful!
Coca Cola, Apple, Tesla, IKEA. These four companies all operate in different industries. One is in the soft drinks industry, another in the tech, third makes electric cars and fourth sells read-to-assemble furniture.
So why are we talking about these four companies in the same sentence if they are so different? Because, despite all their differences, they still have one thing in common that connects them.
They all have a clear and unmistakable brand identity.
There’s almost no person in the world today who hasn’t at least heard of these four companies, or even bought something from them. When people think of refreshments, they grab Coca Cola; when they want a new computer, they buy Apple and when they need new furniture, they buy and assemble IKEA.
People don’t simply buy their products for taste, quality or design, although they certainly don’t lack these. They buy their brand.
Of course, these four were quite easy examples of brands. But what of the millions of other companies that are trying to develop a brand identity for themselves? For instance, how can you showcase your brand identity on your website?
Well, this article will give you some tips on how to create website content that reflects your brand identity.
What is Brand Identity and Why it’s Not the Same as Brand or Branding?
Before we get into how you can make website content that reflects your brand identity, it’s important to understand what brand identity is in the first place.
Fortunately, for something like this, we don’t have to look very far and a simple Google search reveals the answer we are looking for.
For instance, Crowdspring defines brand identity as “everything visual about a brand, including color, design and a brand’s logo”. In other words, what the customer can see.
Although “brand identity” often gets mixed up with “brand” and sometimes “branding”, these three terms are different.
The brand reflects the name, design, symbol, logo or some other feature that differentiates one company or seller from another in the minds of their customers and prospective customers.
Branding, on the other hand, is a process of creating a brand. This includes what the customer can see (logo, visual design, name…) and what they can’t see (loyalty, awareness…).
How to Create Content that Reflects Your Brand Identity
With that out of the way, let’s take a look at how you can create website content that will echo your brand identity.
1. Understand how your brand stands out from the rest
This is perhaps a no-brainer, but it’s still crucial to understand how exactly does your brand differs from its competitors. What is your unique selling point and why do customers trust your brand? This is often difficult to do with content, as it’s very easy to fall into the trap of making generic content. However, while it may be easier to just churn out content like everyone else, keep in mind that for 80% of people, the “authenticity” of content is the main deciding factor in following a brand.
2. Can you identify the company from its content?
Every time you create content for your company, I want you to do a simple text. Remove any visual characteristics that can be used to identify the brand, like logo or name and leaving just the bare content, ask yourself: can you identify the company from its content?
Visuals are still important for separating brand A from brand B, but it’s easy to become too dependent on them and neglect the content you write itself.
If you or another person consuming that content can’t tell it from the competitor’s website, start again.
3. Connect with your audience
Brand identity doesn’t happen without an audience to follow that brand. That is why your focus should always be on connecting with your audience.
You need to deliver content that your target audience finds informative and useful and you need to be consistent with it. It doesn’t help your brand identity much if you do this from time to time.
If you deliver content periodically every month, it will be much harder for the audience to connect with you. However, that doesn’t mean becoming a content production factory either. You also need to put serious thought and plan your content that the audience will want to engage with.
4. Use different types of content
Website content isn’t just articles and blog posts. It’s not enough to just write a 1,000-word blog post every week and call it a day.
Content comes in many forms, and text is just one of them. For instance, perhaps your message would be better served to your customers as a short 1-2 minute animation, or a 10-minute video, or perhaps an infographic?
While the text is often easiest to make, you shouldn’t ignore other content formats either.
5. Use social media wisely
While not directly on your website, content that you create or share on social media should work together with your website content to reflect your brand identity.
Of course, you need to be strategic with social networking as well. Although there are plenty of social media platforms out there, ask yourself this: “does this work for my brand?”. Is this somewhere where your audience hangs out?
Social platforms will often have quite different audiences and trying to cover them all is not only difficult but can also dilute your message.
The same goes for timing. Finding out where your audience hangs out is only the first step. To engage with them, you also need to be there when they are as well. If you’re not there when your customers and prospects need you, you are missing a big opportunity to engage with them.
Producing content that displays your brand identity clearly and concisely is very important. However, as you can see from thousands of online examples, it is also difficult to do.
The most important thing from the consumer’s perspective, however, is whether that content is useful to them. According to TextMagic, 91% of users opt to brand’s text messages because they see it as “somewhat useful” or “very useful”.
Hopefully, these 5 tips will help you create content just like that.
Suzanne Scacca is a former WordPress implementer, trainer and agency manager who now works as a freelance copywriter. She specializes in crafting marketing, web … More about Suzanne
What is it that makes a haunted house feel so disturbing? Is it the fact that it’s been long abandoned? That it’s riddled with dark and twisty hallways? That it simulates danger? Or maybe it’s the low-quality construction that makes people nervous? We’re going to take these frightening characteristics and spin them around for the web. After all, what is a website, but a digital house? (Let’s just make sure yours doesn’t feel haunted!)
When building a website or PWA, no one ever thinks, “I really hope my visitors run away in fear!” Yet, one wrong move could make a visit to your website seem like a nightmarish walk through a haunted house instead of an awe-inspiring tour of a new home.
To be clear, I’m not talking about dark color palettes or blood-red typography that might remind someone of something they’d seen in a horror movie. If those kinds of design choices make sense and don’t intrude on readability, go for it! What I’m talking about are those ominous feelings emitted by the design and content of a website — similar to the ones someone might feel when walking through a haunted house.
“From a psychological point of view, the standard features of haunted houses trigger feelings of dread because they push buttons in our brains that evolved long before houses even existed. These alarm buttons warn us of potential danger and motivate us to proceed with caution.”
When a visitor shows up on your website, the last thing you want is for them to be wary of moving through it. You want your website to give off a welcoming and safe vibe; not one that makes visitors wonder what’s lurking around the corner.
So, today, I want to look at some ways in which a website might be giving your visitors the heebie-jeebies and what you can do to eliminate those haunted house-like elements from the experience.
Four Signs Your Website Feels Like A Haunted House
In a lot of ways, a website is like your home. You add comfortable furnishings to it. You make it feel warm and inviting. And you clean up before anyone comes over, so they’re not freaked out by the accumulated dust or clutter.
If you keep that in the back of your mind (i.e. your website = your home), you can avoid these scary missteps as you design websites (as well as PWAs and mobile apps) for your clients.
There’s a video game and movie called Silent Hill that’s based on Centralia, a real ghost town in Pennsylvania. Decades ago, there was a coal mine fire in the town that led to toxic conditions like the gas and smoke that billow up from the ground to this day.
It’s an element the video game designers and cinematographers latched onto when creating their own eerily abandoned setting for Silent Hill:
Eventually, Centralia was condemned due to the dangers posed by the fire and the resulting toxicity. Today, there are only a few residents who remain in town.
While there are some tourists who venture to Centralia out of curiosity, they don’t stay long. And why would they? The town is unlivable and it’s devoid of any meaningful experiences.
Your website may be sending similar signals if it’s:
Too simple in design,
Too outdated looking,
Devoid of useful content,
Seemingly uncared for,
Powered only by a basic chatbot,
Missing contact details or a working contact form.
The Blockbuster website (which I can’t believe still exists) is a good example of the kinds of signals a website might send to visitors if it were abandoned:
The copyright on this website is from 2017, which is why the design of the site isn’t as bad as one might expect it to be. Even the mobile counterpart is responsive:
That said, this website is nothing but a husk of what it once was in its heyday.
For example, this is what shows when someone clicks on “Blockbuster Store Location”:
If I had arrived at this site hoping to find a local video store to rent a movie from, I’d be confused by this pop-up. Does the store actually exist at 211 NE Revere Ave? What’s going to happen when I call the number? And why are they telling me I don’t have to leave the couch?
What DISH should’ve done when buying out Blockbuster is to take ownership of this domain, but then direct it to their own website. As it stands now, it feels as though there’s no one on the other side of this website and there’s no point in keeping it alive (much like the business itself).
It’s these kinds of questions and that eerie feeling of “What’s going on here????” that you want to keep your visitors from experiencing.
2. It’s Too Confusing
Another hallmark of a haunted house is excessive confusion. This is something that real-life serial killer H. H. Holmes mastered with his “Murder Castle”.
“This edifice became Holmes’ booby-trapped Murder Castle. The space featured soundproof rooms, secret passages and a disorienting maze of hallways and staircases. The rooms were also outfitted with trapdoors over chutes that dropped Holmes’ unsuspecting victims to the building’s basement.”
Interestingly, there is a term in the field of environmental psychology related to this particular quality of a space: legibility.
Essentially, if a space (like a home or a website) has clear pathways and a logical organization, it’s much easier for visitors to get oriented. Not only that, if a layout mirrors that of other spaces, it assists in recognizability and comfort. That sounds a lot like the legibility and navigability of a website, right?
Obviously, you don’t want your visitors to feel as though they’re going to get lost in your website or like they’re trapped within the walls of it. There are a number of things that could make them feel this way though:
Poor color contrasts,
Jarring typography or animations,
Excessively deep navigation without a trail of breadcrumbs,
Incessant pop-ups and disruptions that won’t go away no matter how many times they’re dismissed,
An unclear or confusing call-to-action that makes them wonder what happens when they click it.
Let’s look at an example.
How many of you would feel confident pursuing any of the paths (links) available to you on the ARNGREN website?
This is what appears when you click on the “PEDALS” image/link in the top-middle of the ARNGREN home page:
As you can see, the “Index” disappears from the left, so the only option visitors have is to click the home page link or hit the browser “Back” button to depart from the path they’ve taken.
Then there’s the page itself which scrolls on and on, showing off more pictures of bicycles and scooters. There are occasional descriptions and links that appear, but it’s really nothing more than a painful rabbit hole to fall down:
This website is exactly how I expect visitors of H. H. Holmes’ Murder Castle felt when they first stepped inside those confusing hallways or fell through one of his trap doors. There’s no rhyme or reason to any of the pages and it almost feels as dangerous to backtrack as it is to move forward.
If you’d like to avoid taking your visitors on such a harrowing journey, focus on creating a clear and open path that’s easy to traverse and to get off of when they want to.
3. It Looks Too Low Budget
It’s not just real haunted houses you want to avoid emulating. You should also steer clear of certain types of haunted house attractions.
I’m what you might call a horror addict. I watch scary movies all year long. I take haunted tours every time I visit a new city. And I spend a good chunk of the months of September and October going to haunted house attractions.
As you can imagine, I’ve seen some really impressive haunted houses, and I’ve seen some that are really poorly done.
Although I have a slightly cowered stance, you can see that I’m laughing. That’s because I could see his face through the holes of his mask.
Now, this by no means is a low budget haunted house/Halloween event. And this actor deserves all sorts of kudos for walking around steamy hot Florida in that getup and on stilts, no less. But I will say that being there in the daytime where I could see through the mask did deflate my enthusiasm. It also had me wondering if the rest of the experience would be as disappointing. (For the record, it wasn’t.)
You definitely don’t want your visitors noticing flaws, odd design choices and other errors on your site. Then, wondering why the company behind it didn’t put more money into design and development.
If your website looks cheesy, overdone or like it was cheaply thrown together, you’re going to have a big problem on your hands. The rest of the web has set a very high bar for what a website should look like and how it should work. Fail to live up to those expectations and you’ll find that people will start to question the legitimacy or worth of the business behind it.
I thought it was a joke, that somehow I’d landed on someone pretending to be Yale University at yale.net instead of yale.edu. But I was wrong. This is the real website of the art department at the Ivy League university.
So, I dug a little further, hoping that somewhere on this subdomain would be an explanation of why this website sucked so much. This is what I found:
Let me point you to the most revealing parts of the explanation. First, they explain that this site is an open-source wiki:
It is a wiki, meaning that every graduate student, staff person, and faculty member of the School can change this website’s content or add to it at any time.
Next, they warn you that you may be shocked by what you see:
As you move through it you may, in consequence of such openness, encounter content that surprises you or with which you don’t agree. That will be the sign that this website reflects life in our institution in all its heterogeneous dimensions.
Considering the editor of this page used a negative review from Facebook as the repeating background image, there must be some inside joke here. In fact, when I looked into it further, it seems as though this school has had a tradition of scary web design choices as far back as 2010. So, they obviously know what they’re doing.
Here’s the thing though: even if you’re designing for someone with as well-known a reputation as Yale, building something that looks like it was thrown together in Paint back in 2001 is no way to go. There’s no exception for design this bad and I don’t think your visitors will be happy that you wasted their time either.
I realize this might help with the virality of a site, but it’ll do nothing for the credibility of it. All you’ll end up with is a few thrill seekers stumbling through in search of a good laugh or shock. What you need instead is visitors who feel comfortable and confident enough to convert.
4. It Looks Unsafe
The last thing that might leave people feeling unsettled is a lack of security (or at least the perception of none).
One of the things I often get asked by people who don’t like scary movies or going to haunted houses is:
“But aren’t you scared?”
Of course, I’m scared! I enjoy all of this horror stuff because I can do so safely from a distance. I know that the scare actors in a haunted house aren’t going to hurt me and I know that Michael Myers isn’t going to pop out of my TV screen and butcher me in the middle of the night. Plus, it’s a much more enjoyable way to get my cardio in without having to hit the treadmill.
I think for some people, though, they don’t have that same sense of security when partaking in activities like these, which is why they steer clear. And this is something you need to be extra careful about when it comes to your website. Specifically, be mindful of:
Installing SSL certificates on every website.
Using security badges at checkout.
Preventing 404 errors.
Fixing faulty contact forms.
Blocking spam in comment sections and forums.
Monitoring for server downtime.
Repairing the white screen of death.
Let’s look at an example of a website that sends a number of red flags pertaining to security. This is RoadKill T-Shirts:
At first glance, you might think this e-commerce website is okay. The design is outdated, but it’s a low-end tee-shirt shop. Visitors can’t be expecting too much from the design.
But then you move over to your mobile device and realize it’s not responsive:
That said, there may be some visitors who are able to look past these design missteps, especially if there’s a tee shirt decal they really want.
One of the first red flags that should stop them in their tracks though is the “Not Secure” notice in their browser window. Although there is a GoDaddy security seal at the very bottom of the checkout page, I’m not all that sure I’d trust that to protect my purchase as a consumer either.
Then, there’s the matter of the contact form. I was curious to see how secure users would feel about filling in contact information without submitting a payment, so I forced an error:
I’m happy to see that the failure to fill in required fields triggered such a response. However, here’s what happens to the bottom of the form as a result:
Users can tab down to reveal the “Submit” button. However, what if your visitors don’t know that they can do that? They may just end up abandoning the form and the website altogether if something as simple as the contact form is so fraught with error.
There are a variety of ways a website might seem unsafe to visitors, so do what you can to fortify it on the backend and then provide trust marks on the frontend to put their minds at ease.
When a visitor enters your website, what do you want their first thought to be?
“Oh great! There’s the product I was looking for!”
“Hmmm… Maybe I should go back to Google and see if there’s a different place to buy this product from.”
There are so many ways to give your visitors pause when they visit a website. But if you start looking at your website like a home, you can avoid the common pitfalls that make a website feel more like a haunted house than a warm and welcome homecoming.
Many websites seem to follow the same tired, old template. Here’s a hero image with a centered call to action and here’s my three columns below it. It’s not a bad design, because it works. The problem is that it’s predictable. So we wanted to give you some examples of websites that take a different approach so you can create pages that break the mold, without shattering user expectations.
1. Heco Partners
Layout: full bleed hero flowing into staggered two-column sections with scroll-triggered background animations
We just can’t get enough of this website! When you land on Heco Partners, a Chicago-based design agency’s website, you encounter the words, “We turn information into experiences that people care about” hovering above an undulating wave.
These two elements combine to symbolize their promise of transforming ideas into action. Without even scrolling, we get a strong sense of who they are and what they do. As a whole, this site provides a gorgeous example of the right way to combine a portfolio with more detailed background information, as exemplified by each of their project. We get to see how they’ve helped their clients succeed and learn all about how their approach to their work.
The absence of navigation and an arrow prompt you to scroll down to get the whole Heco Partners story, but you can also diverge into their project-based case studies. Navigation finally emerges here, in the projects section, where you can flip through projects using slider-like arrows at the bottom right of the screen.
This inability to bounce from one section of your choosing to the next is a bit painful. But the beauty of the fading transitions between each section, as well as various other animations, makes the site a true pleasure to scroll through.
Oh, and did we mention it’s built entirely in Webflow?
2. The Goonies
Layout: a full-screen hero image that scrolls into the page and transitions into a series of grid layouts
When I first came across this website, I immediately added it to my design inspiration bookmarks.
Joseph Berry decided to take one of his favorite movies, the 1980s classic The Goonies, and turn it into a promotional-style website. Winner of the Honorable Mention and Site of the Day award from Awwwards, The Goonies is a great example of scrollytelling — using the power of web design and storytelling.
Joseph used Webflow’s interactions and animations to create a highly engaging user experience that lets Goonies fanatics relive some of their favorite moments from the movie.
3. Nelu Cebotari’s portfolio
Layout: three-column hero that transforms into the main navigation menu on scroll
A design portfolio offers you the opportunity to not only show off the great projects you’ve worked on, but also to demonstrate your design skills with the page itself. Nelu Cebotari has created an online portfolio that captures his personality and skills as a designer, while skillfully avoiding the pitfalls of cliche.
Yellow can be a bit harsh, but he chose just the right muted shades for his background and the shapes that are placed throughout it. This color choice makes the black text really stand out.
Another unique part of this design is navigation, placed front and center as the calls to action about, work and contact. Hovering over each of these reveals a box that slides up from the bottom. Each of these squares has a bit of text prompting you to learn more or to get in touch. This, combined with simple outline icons makes for an experience that feels effortless.
This stripped-down, spartan approach feels surprising for a designer — at least at first. But when you hover over the teasers for his portfolio pieces, example designs come to vivid life, enticing you to dive deeper into the project.
The contact form is also delightfully simple to use do to its conversational design approach. All you need to do is replace a few placeholders, click Submit, and your request is on its way. Distilling the form’s design down to just the necessary information makes this a more efficient way to communicate.
4. Never Summer Snowboards
Layout: full-screen background video provides a portal into more traditional ecommerce pages
Never Summer concentrates on their products without losing their sense of fun.
It’s easy for action sports companies such as snowboard manufacturers to coast on the charisma and abilities of their riders. Whoever spins more or goes bigger can sell almost any snowboard to his or her adoring fans. Never Summer, which has a solid team roster, lets these riders be a part of their story, but the real focus here is on their high-quality products.
You’ll find plenty of technical specs, but they’re backed up by the reasons they’ll help you out on the slopes. Instead of using smoke-and-mirrors jargon, they let you know (in fairly clear language) how all of these materials and construction techniques make their boards better.
With technical specs and a focus on board construction, this page could have suffered from a severe case of information overload. But they’re able to avoid this by injecting plenty f personality. All this takes what could be a faceless manufacturer and shows that they also have a lighthearted side.
5. Soul Jazz Records
Layout: Grid-based reproduction of a brick-and-mortar record store experience.
Sounds of the Universe is the digital offshoot of the eclectic record label Soul Jazz. From reissuing obscure funk, jazz, and punk, to putting out new releases, they make sure that music that may not get much attention gets heard.
Their website provides a good representation of the many genres that they put out. There’s plenty of background information about the artists as well as sound samples to get an idea of what they sound like.
Being a music aficionado myself, I’ve spent plenty of time flipping through albums at record stores. What I like about this design is that is captures the feel of being in a record store. You’re able to flip through various releases in a gallery. If any artwork catches your eye, you can click the cover for a closer look. It’s like flipping through a stack of wax and grabbing what immediately grabs you and taking it out for further inspection. By translating the physical act of browsing through records into a digital experience, Sounds of the Universe sets itself apart from other music retailers who lack this sort of familiar interactivity.
6. San Francisco Museum of Modern Art
Layout: Full-screen background video with minimal links to the most-important actions visitors can take.
Museums contain art that inspires and captivates our imaginations. Their websites should do just the same.
Most museum websites do a decent job of showing off featured works, publicizing current exhibitions, and providing vital visitor info like hours and ticketing information. SFMOMA does all of that too — but in a more beautiful way.
Instead of still images of some of their more noteworthy works, we get to see videos of visitors standing in front of them, all are shot from a perspective that makes you feel like you’re there yourself. These clips offer small glimpses of what you’ll experience yourself when you visit. This is an effective use of a hero video that communicates so much of their museum experience.
Intuitive navigation, tasteful fonts, and a strong focus on composition all make SFMOMA’s website a reflection of the great art within their walls.
Layout: Two-column Z-pattern with a plethora of animated graphs.
It seems like the majority of websites we visit are related to some sort of commerce. But we should never websites’ tremendous potential to also educate.
R2D3 does just that with their “Visual Introduction to Machine Learning.” Through a series of animations, they’re able to communicate this complex concept in a relatively simple way. It makes learning an engaging experience that’s way more interesting than staring at words and figures in a textbook.
In this module, they use data sets about attributes of homes in San Francisco and New York to show how computers utilize statistical learning in problem solving. For a non-mathematical person like myself, this tutorial kept my interest and I left feeling that I had a deeper understanding of the concept.
Layout: full-screen cover transitioning into two broken grid sections, then several more-rigid grids.
Peerspace aims to connect creatives and other entrepreneurs to short-term spaces. Whether it’s for a pop-up shop or a location for a video shoot, Peerspace wants to make the process of securing a location an easy one.
Their year in review not only looks cool, with its subtle pastels and its stylized heading treatments, but it also creates a narrative on the theme of “How we create experiences has changed.” From online retailers who have created pop up shops to connect with their customers, to alternative physical activities outside of the gym, these are all areas where Peerspace provides a solution in finding a location. While there appears to be little rhyme or reason to the placement of these elements, that randomness adds a sense of quirky personality that seems to be at the heart of the brand.
Peerspace also does a great job letting their clients tell their story. Through photos, videos, and writing we get to learn just how Peerspace has helped them.
However, it’s worth noting that an unfortunate amount of this content is delivered via images. That significantly damages both the page’s SEO and its accessibility, so we have to wonder why they went this route.
Layout: a copy-dominated hero flows into a single-column list of projects.
Presentation is a web design and art direction agency based in Perth, Australia. It’s always tempting for agencies to cram their websites with every gimmick in order to dazzle all who visit with their creative brilliance. Presentation is able to take a few simple elements and arrange them in a way that shows their design smarts without overdoing it.
In a web filled with microinteractions and dazzling interactions, it’s refreshing to come across something so simple, straightforward, and focused. Presentation has a story to tell — so they tell it. It’s just that simple.
Layout: Full-bleed hero transitions into an alternately rigid and broken — and visually exposed — grid.
Coming up with a new variation on a common design theme, or straying completely away from it, is what will differentiate you as a web designer. If you want to show how your design course will help people create websites in Webflow that go beyond the mundane, you need to create a page that packs a punch. Intensive shows the power of good design and wants to teach you to harness that power for yourself.
This design features a hero video that shows various web pages being clicked through. There’s a call to action, but instead of sitting dead center, it’s aligned to the left. A trio of 3D-transformed pages slide into place. It’s easy for a design to fall flat due to the constraints of their two-dimensional nature but these angled web pages break the rules to create something visually interesting. Each section is separated by an angled block followed by text laid out in a traditional manner.
This design inspires us to bring new dimensions to our work — and should inspire aspiring designers to want to learn how.
11. Bike Time Bali Road Bike Camp
Layout: Full-bleed hero transitions into a fairly rigid grid that feels broken.
With a mix of gorgeous photos, minimal graphs, and brief paragraphs, Bike Time immerses you in all the cool experiences and terrain you’ll get to ride through if you attend this road bike camp. The Bali logo echoes the movement of the road on the image beneath. This is a design element that could have been distracting but plays nicely off the winding mountain road.
The design is heavy on the photographs, which show off the stunning beauty of the area. There are also a number of graphs whose lines mirror that of the terrain.
Along with the great photos is text of various sizes, some drastically large and others much smaller. It creates contrast on the page and is symbolic of the peaks and valleys one will be pedaling through.
12. Superimpose Studio
Layout: A cube pushes into our screens, with a revolving carousel of project thumbnails forming the border.
Superimpose Studio’s website jumps beyond merely “unique” to land firmly in experimental territory. It takes the traditional portfolio grid and stretches it into three dimensions, creating a rotating frame of project graphics around the studio’s name that doubles as the site’s sole navigational element.
Click one of these rotating images and you’re taken to the project’s detail page, which rotates the homepage carousel so that the images scroll vertically, bending toward you as you scroll past them. It’s an artful, if somewhat disorienting and memory-intensive design.
We’re seeing more and more of these experimental, artistic portfolios from web designers and studios. This experimentation then becomes a unique way of framing the site’s content, making it clear to potential clients that this studio is looking to deliver innovative design work.
13. Lauren Wickware’s portfolio
Layout: Full-bleed hero transitions on scroll into split-screen project “cards.”
Another portfolio site that’s really caught my eye lately is book designer Lauren Wickware’s. The multi-dimensional scrolling creates a surprisingly smooth and engaging experience that flirts with scrolljacking without ever feeling forced or restrictive.
The project detail pages take a more traditional approach, with a series of beautiful, nearly full-screen images and brief snippets of beautifully typeset text. It’s a look that’s not only beautiful, but also helps the visitor focus on her gorgeous editorial work.
14. Poulos Collective
Layout: A masonry-style layout with distinct cards that fade in as you scroll
Poulos Collective is a design consultancy specializing in UX design and strategy. Its site provides a clean, simple, and most importantly, functional experience. Created by Stefan Poulos, the website’s simplicity is what caught my attention. The colors are pleasing, text is easily readable, and the lightweight look and feel allows for extremely fast loading speeds — providing a great user experience.
The website just feels … smooth.
I’m an even bigger fan of the mobile layout of this website. It gives you everything you need, and nothing you don’t. It’s really easy to understand what the content is about. I’m not left confused by complex jargon or razzle-dazzle design when I view Poulos Collective’s website.
15. Dan Perrera
Layout: A simple blog post feed with just titles and dates transitions seamlessly into post detail views on click.
I find a lot of joy in unique, minimalist layouts and Dan Perrera’s blog offers a truly delightful example. The homepage consists of a simple feed of timestamped blog posts, with a sticky navigation bar on the left. I’ve been seeing unique uses of sidebar navs more and more this year.
To top it off, Dan created a nice about page that slides in from the right side of the screen when you click the information button, giving the homepage a slider-like feel. Bravo, Dan!
Find inspiration and push your own designs further
As designers, we know that clients often just want tried and true solutions. And it’s easy for us to serve up exactly what they ask for. It’s okay to stick to conventions, but there’s so much room in design to try something different. By taking an unorthodox approach, we can come up with website designs that are memorable and won’t be lost in the seas of uniformity.
With a high-street bricks-and-mortar retail store, a customer will walk in and expect a high level of personal attention from the shop-floor staff. They will expect to be shown or pointed in the right direction to find the products that match his or her interest.
Is it wrong to expect the same kind of experience when a person shops online?
The ways that people use digital technology has greatly shifted to the point where a personalised customer experience is now preferred and expected by the user.
Business owners are now looking more closely at how website personalisation can improve their digital marketing strategies and help to boost their bottom line.
Why is personalisation so important?
Research has found that 74% of online customers feel frustrated if their website content is not personalised, and it is highly likely that the percentage is set to increase in the coming years.
The rise in smartphone technology has enabled everyone to carry around the internet in their pocket.
This has made the web feel more like a personal service that can deliver what they want, when they want it, right at their fingertips.
Customers wants to feel like their needs matter and should be catered for on a personal level. This is why the difference a personalised website makes to today’s web users matter.
By providing your web visitors with a personalised customer experience, you will be helping them to feel special and their interest appreciated. This can help make a smoother path towards a customer conversion.
How does website personalisation work?
Structuring and engineering your web design to accommodate your customer needs is the main aim here. This is so that when a potential customer visits your site they are quickly delivered with a complete overview of the products or services that they have searched for.
Tailoring what the search results display should include, where possible, individual customer or user ratings and similar products or services that may also be of interest based on their keyword search.
Alternative suggestions should be automatically generated based on their individual search data plus that of other consumers searching for similar or related products or services.
Offering personalised alternative products or services can be an effective way to encourage customer conversion when their preferred product is out of stock or the service they want is temporarily unavailable.
The personal customer experience should also be encouraged to extend far beyond your company website to cover aspects such as social media inclusivity and tailored contact via email newsletter subscription.
What are the main benefits of website personalisation?
Website personalisation has been shown to have a direct positive impact on online sales.
We now understand that due to the average short attention span and impulse-buy desires of customers, sellers only have a very narrow window of time to deliver exactly what the customer wants before they lose interest and click away from your website.
Providing a personalised web experience can benefit you in the following ways:
Instant results: When a customer can see the products they are interested in or can get the information they need about a service they are looking for, without having to search around for them, this greatly increases your conversion rates.
Increased sales per visit: When you can also provide suggested items that compliment the product or service they are interested in, you are also more likely to encourage them to buy a second product or service from your site too!
Repeat buying: Offering a personalised customer experience is one of the main reasons for gaining a loyal customer base. Regular customers are happy to repeat buy from a website where they will get a personalised service and can quickly find exactly what they need.
Improved SEO: There is, of course, an added bonus to website personalisation for the provider. Personalisation is a valuable SEO tool where your website can achieve higher search engine rankings for the main keywords used on your site.
Boost engagement: Presenting your web visitors with information that piques their interests will encourage them to remain on your site and increase engagement. Engagement can lead them to sign up to a newsletter or following you on social media.
Preparing your website for personalisation
Your business website must have a well-structured design system that enhances your visitor’s user experience (UX). Without getting the essential building blocks of your website right, it can be difficult to take the steps needed to tailor a personalised web experience for your visitors.
Many website owners will already have a lot of customer data at their fingertips that can be used to personalise their customer experience.
It may be that you have users that have already identified themselves to you via a social media follow or email newsletter subscription.
To sign up to your email newsletter or your social media pages, they will have to provide valuable information about themselves and their interests or needs. You can use this information to target your communications with them through segmented email campaigns via MailChimp or Facebook ads.
Your previous customers will have provided you with their purchase history so you can get an idea about what they like and which of your products or services will complement what they have already purchased from you in the past.
You can use Google Analytics to track your site visitors journeys to get an insight into what they are looking for and how they are engaging with you.
The importance of mobile-responsive web design
According to Statista, “The number of smartphone users worldwide today surpasses three billion and is forecast to further grow by several hundred million in the next few years.”
Business owners need to understand that we now live in a mobile-first world, and this is why they need to have a mobile-responsive web design that is going to capture the attention of smartphone users and engage them instantly with their content.
What you supply on your website is also of great importance. This means that your web content should offer great value and be relevant to your target audience.
You should ensure to keep an interesting mix of different content mediums on your website to suit different personal tastes and preferences, including:
All of your web content should be mobile-friendly and readable across all digital platforms from desktop PCs to smartphones and tablets.
Structuring a website design to deliver a personalised customer experience can make all the difference to your web visitors as well as to your business.
It helps to reverse engineer your target audience journey to help meet their needs rather than simply build a website to brag about your brand.
Keep your end customer in mind at all times and provide them with a personalised experience to win both their hearts and their wallets.
At Creative.onl, we aim to ensure that you have all the tools available to deliver a superb user experience that counts. Contact us today or book a free consultation to find out how we can help you develop the digital strategies that work for your business.