Creating a new website and starting from scratch can be a beautiful experience. It’s like having a blank canvas in front of you where you can play with design and colors to create your website masterpiece. When the creative part of the process is finished most people like what they’ve created and they leave it like that, not thinking about the users.
It’s important to release that your website is meant for your customers. Your website is there to sell your product, offer your services and showcase your work. While your creative ideas might be pretty and easy on the eye, you must ask yourself how customers perceive your website. Do they find it easy to navigate, can they find everything they need and do they understand what your business is about, especially if it’s their first time visiting your website.
To help you discern what is most important when it comes to user experience we gathered this group of UX experts that are here to help you improve your website and consequently your sales.
Robyn Strafford
UX is forever changing with the introduction of new technologies and it’s vital for web designers to think about how this will affect the usability of their designs. A few key things beginners should consider when designing a website are:
Contrast – If you want the user to pay attention to a certain section of your website or help them easily identify a button or link, consider using a heavier font for your title or a contrasting color for links (for example a red button against a blue background) so that those objects catch the user’s attention over the other elements of the page.
Consistency – Keep buttons the same. This helps the user to identify where the navigation points are and where they can click. The whole point in design is to create something that solves a problem. If your buttons keep changing color or format, it may look pretty but it’s going to confuse your user, making it harder for them to navigate around your site and what’s the point in having a website if your user can’t make it past the homepage?
Functionality – You have to consider what your site is going to be used for. If the majority of your traffic is going to be coming through on mobile devices, you want to make sure that your design is responsive and your images load quickly. Also consider what questions they are going to ask as they travel from header to footer. This will help you structure your content to fit the needs of your user. Think about extra features you can offer your user. If your site covers a variety of topics, would it be worth offering your user a log in feature to filter the topics so it’s specific to their interests? Provide a reason to keep coming back.
Bio: My name is Robyn Strafford and I am the UX & Web Designer at the UK, Digital Marketing Agency Bowler Hat. I’ve been operating within the design industry for 4 years and you can find my company’s work at Bowlerhat.com.
Ben Froese
Jeffery Zeldman’s writing about web standards was a great place to start learning about web design best practices, and influenced my thinking a lot about how to architect a website based around digital rhetorical structures versus just making something eye catching for the sake of thrills.
Google Fonts is hands down the best place to explore free web-safe fonts (download to your computer, or use their convenient CDN links for your site), and play around with pairings. The UI they’ve designed for this site is also beautiful and a fantastic example of good UI and UX design (take notes).
Adobe Color (formerly Adobe Kuler) is perfect for exploring color themes, and helps you select entire palettes based on color rules (analogous, monochromatic, complementary, compound, shades, etc.). It also provides you with easy copy-and-paste features including an easy download for your pre-made palettes directly into Adobe Suite products (super sweet).
Do your homework and search around the internet for inspiration galleries, or design forums (dribbble and csszengarden are great places to start).
Lastly, and arguably most importantly: start learning in your spare time. There’s so much free information available, be it a library, the internet or informal interviews with professionals, that you have no excuse to excel in your work and career. There’s a phrase I’m fond of saying when I don’t feel like jogging: “You’re lapping the people at home on the couch”. Same goes for extra-curricular learning: if you want to be a highly-sought rock star in your field, then make time to enhance your knowledge and skills when everyone else is content with settling for the bare minimum.
For example, Smashing Magazine and A List Apart are two of my favorites. They provide a multitude of helpful articles from industry professionals who discuss everything from technical skills & gotchas, to design patterns, tips on freelancing, and even how to handle problematic clients.
Bio: Ben Froese is a UX Consultant and UI Designer working at C/D/H in Grand Rapids, MI. He graduated from Michigan State University with a Professional Writing degree, and has been involved in the web design and development community for over ten years. He is an avid reader and in his spare time can be found producing music in his home studio, trail running, mixing cocktails for his friends, and traveling.
Zaki Usman
At Pagezii, we’re a big fan of minimalist design. This means making use of simple design elements to convey the message. Simple designs lower cognitive load (effort needed to process information.) Less clutter leads to a clear and easily digestible message. Web design has many elements to consider, from imagery, to color, to UI amongst others. One aspect that’s often overlooked but is very important is page text. Page text helps spell out your message – quite literally. So it’s imperative that it’s visible, easily understood and integrated with your entire design. It shouldn’t appear as an after-thought, but a holistic part of the site from a context, style, and design perspective. To achieve this, consider the following:
Choose a font that works well with your design. There are many web fonts available that are unique enough to represent your look-n-feel of the site – choose one that matches your style.
Create a simple typography style for different elements of your site – from the main header to bullet points, to status messages. Try to keep these styles to a minimum – since no one likes to see too many font treatments on a single page.
Select a font color that has a good contrast from the background to be legible and also passes WCAG specifications. Come up with at least two colors – one that works against light backgrounds, and another for dark ones.
Bio: Zaki is the founder and CEO of Pagezii Marketing. With a strong passion for design and code, Zaki has kickstarted many web projects and mobile apps including InterQ, OmerusApp and ShoutEx.
Erik Schwenke
When it comes to UX, one of the most important things to consider is how we convey context, or how things are grouped together. The balance of elements is what constitutes good communication, and one thing you should be mindful of is in your font and color selection you use throughout your site. If you are unsure of what to do, I recommend sticking to conventional design methods when choosing how text will get displayed across your site.
As an example, consider a font such as Arial, on a white background in black text, compared to a more decorative font, with a colored background and text.
We may not subconsciously realize it, but our brain requires slightly more effort to read text when it is placed on brightly colored or non-complementary backgrounds, which in turn makes our communication more complicated. When communication is more complicated, a user is less likely to spend more time on your site, because it just isn’t easy to read.
Compare this to simply using black text on a white or neutral background background – this is a conventional design method, something people are accustomed to seeing. If you are considering the use of a colored or different font throughout your website, be sure you have a very specific purpose for doing so – it can often be a deterrent to your readers!
Bio: Erik Schwenke is a passionate digital marketer and project manager at Seafoam Media, focused on sharing and discovering the insights that lead to great user experiences and help businesses drive growth. Follow Erik on Twitter at @Erocdotusa.
Victoria Rice
When it comes to design, be it for a web page, a magazine page, or another related media; never underestimate the gravity of your white space. White space tends to be overlooked in the quest to fill the available area with as much info as possible (be it for your own site or a client’s), and this can be counterproductive and is something I feel is more common in younger designers.
Use this space to your advantage, you don’t want a user to land on your page and feel overwhelmed with everything you’re displaying and leave. Having well managed whitespace helps your website to appear organized, open, and less like spam. White space makes your content more digestible while also leading the user to focus on the elements surrounding the text, in conjunction with leading them around the page in an organized matter.
The end goal is finding a good balance between what you feel is the most important to communicate and surround that with some space to highlight your chosen content. When used properly white space will be just as important to your web page’s design and content as any other graphic design element you implement.
Bio: Victoria is the Graphic Designer at a digital marketing firm Serious SEM, that provides printing in addition to their various SEM/SEO and web design services. She graduated from Tennessee Technological University with her BFA.
Bryan Clayton
Three things every single product designer or CEO needs to do to create the best UX they can.
1. Install live chat and respond to the inquires inside of the live chat as much as possible with a minimum of one hour per day. This will give you first-hand experience on where people are confused and where the log jams are inside your product so you can improve your user experience.
2. Sign up for your product once per week. So often we build an on boarding experience and forget to circle back around and update it. There are so many touch points inside of your product and with transactional emails etc. that need to be optimized and improved. The only way to do this is to use it yourself regularly.
3. Stay away from user experience trends. Unless you’re working for Facebook, Amazon, Uber or Google, you don’t need to be jumping on any new bandwagons just yet. Stick with the tried-and-true design conventions that The Laymen have already adopted.
Bio:Bryan Clayton is CEO of GreenPal, an online marketplace connecting homeowners with local lawn care professionals. Before GreenPal Bryan founded Peachtree Inc. a market-leading landscape construction firm in Nashville Tennessee growing the company to 125 employees and successful by a national firm.
Meri Gulyan
When designing your first website, it’s important to know what audience you are catering to and why they are visiting your website. Once you nail that down, you’ll be able to sketch out the layout of your site.
When you do this, make sure that you focus on:
What your company does needs to be clear above the fold. You’ll hear this a lot — it’s the content that appears before the user has to scroll and your most important real estate.
Use web-safe fonts or Google fonts. This is the only way your users will see the same font across browsers.
Design for the right resolution. You can see resolution statistics here.
Keep within a color palette. Select your color palette first, and stick with it. Nothing is more annoying than having to guess color representation.
Highlight copy links. You can underline them, change color (blue is convention), or bold them.
Optimize your images. Think of site speed. You don’t want users to bounce, so keep your images small in size to ensure your site loads quickly.
Don’t forget mobile view. These days, this can be more than half your traffic, so make sure your site is visible on mobile, and acts in a “responsive” manner.
These are some basic tips to make sure you’re keeping your users happy, and you’re getting your message across in the right way.
Bio:Meri Gulyan is VP of Experience Strategy at Xivic, Inc. and focused on all touch-points a user might come across. She’s dedicated to understanding how users interact with a brand, product, or website even before their experience has started. She’s been able to add conversion value to multiple brands, including Disney, Meineke, California Closets, and The Hollywood Reporter.
Jennifer Aldrich
When you’re trying to create your first website, the first step is to plan out your content. Ask yourself a few key questions:
Why are you making this site?
Who is your audience?
Are you trying to reach a target audience?
What do you want visitors to do / take away when they land on your site?
Are you creating the site to reach potential employers?
Are you creating the site for a client? If so, what are the client’s goals?
Once your goals are defined, then build out your structure, catering the design to the goals you’re trying to accomplish with calls to action and navigational structure. Once you’ve got the bones built out, it’s time to focus on the more visual elements.
When it comes to color combinations and fonts, there are some great free tools out there that can help you along.
– For color palettes, I absolutely love Color Hunter. It has a searchable database of beautiful predefined color schemes. If you’ve found a graphic you really love and want to create a color scheme around it, you can upload the image and Color Hunter will create a whole pallet for you around the image colors.
– For font combinations, there is a great free tool called Canva that allows you to select your primary font, then it builds a set of fonts that will compliment that font.
Lastly, don’t be afraid to ask for help. There are tons of talented designers who are willing to give feedback. Build out some solid social media networks, and ask away.
Bio: Jennifer Aldrich is the UX and Content Strategist at InVision and a UX Blogger at User Experience Rocks. She’s a fan of: her daughter, photography, writing, and beautiful usable things.
Andrew Tiburca
The role of typography in web design has often been underestimated. Many people focus on the site’s structure, images and the graphics used without exploiting the potential of typographical elements. Lately, especially since the flat design is on the rise, content is the most valued and people are focusing more on typography.
When you are choosing fonts for your website, try to choose fonts relevant to your content. I’ve said this before and I always will, your fonts must match your copy. Moreover, do not abuse the decorative fonts (unless your brand identity resonates with that kind of fonts).
So, when it comes to web design, typography is not just the lorem ipsum and menus; it’s not just the visual representation of information and copy, but it might define personality as well as a logo does or a specific graphic.
Don’t be afraid of using unusual, or uncommon fonts. Make your brand stand out through your fonts, but make sure your typography fits the content
Bio: Tiburca Andrei is a Marketing Specialist at Bannersnack and an author at WebDesignLedger. He enjoys writing about Web Design, Marketing, and everything in between. Find him on Twitter @AndreiTiburca
Donna Botti
The most useful tip I can think of for a beginner starting out with a website is to know who your customer is and organize your site based on what makes sense to them. Too many times I see information presented with technical jargon, or at the opposite extreme, flowery words that sound wonderful to the owner, but that no customer or prospect would actually type or speak into a search engine when looking for the product or service. Be genuine, be transparent, and speak the language of your customers.
Similarly, create your navigation and pages to line up with the customer’s experience, not what is convenient for you. If you have a financial services blog, organize it by the topics people are looking for: retirement, taxes, investing, etc. Topics organized by date or media are usually not helpful to the customer. If I come to your site looking for retirement information, I don’t want to search through your Resources section grouped by articles, blogs, whitepapers and e-books to figure out where you hid the information I need.
Of course you must also cover the basics – mobile usability, site speed, security, reliability, and SEO. But if you don’t have a compelling experience for your target audience that won’t mean anything.
Bio: Donna Botti is the owner of Delos Incorporated, a digital marketing and website development company in the Philadelphia area. Donna frequently speaks to small business owners and nonprofits on how to make the web work for them and blogs on the Delos website. Donna is also an Authorized Local Expert and Accredited Solution Provider for Constant Contact.
Ron Larracas
You want to think about your site in terms of hierarchy. On each page you’re balancing three things: brand, message, and product. Your brand is always top priority. Maintain consistent branding by keeping your logo in the same place on your pages and adopting a consistent color scheme. But that isn’t to say that every page is about your brand.
Remember from a UX perspective, each page has to be dedicated to the product (or main idea) of that page. If you have a page about a snowboard you’re trying to sell, make sure the snowboard is the feature of that page.
And then there’s your message. Maintain a consistent tone. Is your site funny? Sarcastic? Professional? Whatever it is, that tone needs to be consistent in the choice of images and the writing style you use.
If you do these three thing – prioritize brand, emphasize your product, and keep a consistent message – your site will feel intuitive to customers. They’ll know who you are and what you’re offering.
Bio: Ron Larracas is the Digital Art Director at Insureon. He oversees design for the webpage, email, physical mail, and pretty much everything else that needs to look good.
Ben Lee
As much as you can, eliminate founder-driven design. You should not be the one making design decisions, your users should. Set up as many avenues as you can to collect data from your users – monitor their clicks, measure how much time they spend on the page, and survey them directly to find out how they’re engaging with your site and what design elements are working. We’re actually building out a tool called Feedback Emoji to make this process more simple.
It allows users to submit a simple emoji response to content on your site. Tools like this let you understand how your website works for your users, which is critical to effective design. Really the key point here is to avoid making the decisions yourself, and instead, let data inform as many decisions as possible.
Bio: Ben Lee is the Co-Founder and CEO of Neon Roots, a digital development agency based in Los Angeles. Their product development workshop, Rootstrap, has helped clients ranging from Snoop Dogg to Tony Robbins raise millions of dollars in funding and touch millions of users.
Arian Simon
When I think about UX design there is one element that comes to my mind: Call to Action or short CTA.
A well thought out UX design makes it stupidly simple to go through the process of a website and links process steps together through distinctively placed call to actions.
Think of your website as a roller coaster. It has a start and an end. Put your visitors on an exciting ride and make them love it so much, that they buy the action-cam photo afterwards (your CTA).
Another short tip: If you are just starting out you will sooner or later discover Google fonts. Be careful when selecting fonts. Not every font has all the styles and weights you may need.
And one tip for the pros, which Brian Dean (Backlinko) mentioned, when we were discussing about web design best practices: Balance. Keep your website in balance, either via symmetrical balance or asymmetrical balance. We – humans – really like balance.
Bio: Arian Simon designs modern business websites and blogs on createtopnotchwebsites.com about simple modern web design for entrepreneurs.
Now that you have all the expertise it’s time to shine. If you think that your existing website requires too much work and that it won’t be easy to apply all the tips you read in this post, then maybe it’s time to start over and create a new, modern website. If you decide to do so we at ucraft are here for you. Choose one of our customizable templates that are already made with excellent user experience in mind and start creating your brag-worthy website.
This post was originally published ucraft.com and you can read it here.