Monthly Archives: November 2016
Creating websites is getting more and more complex and is usually not a one person job. It is important to ensure that design is consistent and optimized to meet business objectives and create enjoyable experiences for users.
One of the ways to ensure that team is on the same page when designing separate parts of the website or saving designs from developers is to create design documentation or a web design style guide.
It is beneficial to have a style guide in order to create a cohesive experience among different pages. Also it helps to ensure that future development or third-party production will follow brand guidelines and will be perceived as part of the overall brand.
Luke Clum has touched the surface of using style guides as your first step in web design last year and I would like to take a more in-depth look on how to create a usable web design style guide for your projects.
What is a Style Guide?
A style guide is a collection of pre-designed elements, graphics and rules designers or developers should follow to ensure that separate website pieces will be consistent and will create a cohesive experience at the end.
Why Is It Important?
It is extremely important when multiple designers are working on a big website or web app to ensure that they don’t interpret too much and don’t alter or adjust styles based on personal preference. In development, having defined elements of the website makes it easy for developers to reuse these elements. Moreover, it can make it easier because they will get what elements they have to code and will see exactly how they need to look from the start.
In order to make developers lives easier, it is the designer’s duty to include all possible interactions such as hover, click, visit and other states for buttons, titles, links, etc.
Creating a Web Design Style Guide
1. Study the Brand
First, you need to study the brand so that you understand what it stands for. Get to know the story behind the brand, observe the team and figure out the vision, mission and values of the company. It is important to dig deeper into the brand so the style guide you produce will visually and emotionally represent the organization.
If you’re a designer who can’t code, simply open Photoshop and give your document a title and a short description of what the document is and what it is for.
If you can code, it is better to create an html document with pre-coded assets so they can be easily reused.
2. Define Typography
According to Oliver Reichenstein, typography is 95 percent of web design.
You must get typography right because it is one of the most important communication tools between visitors and your website.
Set hierarchy and identify it. There are headline types: h1,h2, h3, h4, h5 and h6. Then body copy, bold and italic variations. Think about custom copy that will be used for smaller links, intro text and so on. Provide font family, weight and color.
3. Color Palette
It is incredible how humans perceive color and associate hues with known brands. Think of Coca-Cola, I bet you see that red now.
Begin by setting primary colors for your style guide that will dominate your website, dominant colors should include no more than three shades. In some cases, however, you will need secondary and even tertiary colors to illustrate your user interface, make sure you define them too. Also include neutral colors like white, grey and black for the primary brand colors to stand out.
The voice that I am referring to is actual copy. You have studied the brand before starting the style guide and found out that brand is youthful and trendy. If there are no directions for voice of the copy, you have to define it. It can be a simple example given showing that voice has to be professional yet funny and welcoming. Instead of stating“You’ve got 404 error” you can say “Oh boy, you’ve broken the interwebs. 404 error.” If the voice were more corporate, you wouldn’t do that. Brilliance hides in small things.
Icons have existed for thousands of years and are older than text and words. Take advantage of using icons in your projects because they will give an instant idea to visitors as to what’s going on and what will happen next. Picking the right icons will give more context to content than color palette, copy or graphics. When using icons, make sure to think about the target audience, religion, history, so you avoid misconceptions and misunderstandings. One more thing to mention, think about the brand and its values so you don’t use hand-drawn icons on a large banking website.
Pictures speak thousands of words. Make sure to include imagery that defines the style and direction of pictures the website should use. Once again, think about the values of the brand and its mission. For example, a water charity uses striking imagery that has strong emotion, good cause and calls to human emotion for them to be fortunate to have essential living commodities like water, food, electricity and education.
Forms are what make your website or web app interactive and dynamic so the user can enter the data and you can then manipulate it and do the work.
Make sure to establish a hierarchy and include possible feedback from forms — active, hover, add error, warning and success messages including things such as a password being too weak, email being not valid or simple success messages e.g. “email was sent.”
Personal branding is the practice of people marketing themselves and their careers as brands. Being good at your craft is not enough these days, being unique and authentic will make the cut, but only if enough people know about you. As Michael Simmons writes, authenticity is key in the digital age. Having a strong personal brand and following can lead to enormous opportunities and recognition.
Personal branding is becoming one of the most important key factors in any industry. Skills and boring resumes are not guaranteeing you anything anymore. You have to really start developing your own brand and building a tribe, or in other words an audience that will help you getting jobs, supporting you, sharing your work and getting recognition.
In today’s article I’d like to share some personal branding guidelines I’ve been experimenting with in the last couple of years. The techniques and methods used led me to speaking engagements, interviews on Forbes and Fast Company, business growth and business leads, not to mention the connections and friendships I’ve made.
Why should you care about building a personal brand?
There are numerous of reasons why you should consider strengthening your personal brand. The thing is your personal brand exists anyway, it’s how people perceive you, your work and your actions. To make sure that your brand goes together along with your values and how you wish to be perceived is to manage it. Moreover, building a recognizable personal brand will help you with the following:
- Professional opportunities;
- A better job;
- Better contacts and clients for your company;
- Industry recognition.
Develop a strong vision and make sure that you use it everywhere you go. Whether it’s to go to the moon or sail around the world, make sure it’s something big and bold, people remember these things. If you haven’t watched Simon Sinek TED talk “How great leaders inspire action” presenting “the golden circle” and “start with why” theory, make sure to check it out and come up with your own vision.
Who are you targeting?
Who is your message receiver, who are you talking to with your brand? The common mistake is everyone, we want to appeal to as many people as possible. The harsh truth is that if you try to please everyone, you’ll please no one. There is always someone who loves you for one thing and hates you for the other. Every person has an opinion, so you shouldn’t be concerned about appealing to everyone. Better think about your vision and long-term goals.
Use high quality images
No matter how great your website looks like and how many great stories you have to tell, people are visual creatures after all. Humans form opinions based on the first impression and images send more than needed information to make a strong impression and form an opinion about the brand.
According to 3M Corporation people are extremely drawn by visuals compared to written information.
“90% of information transmitted to the brain is visual, and visuals are processed 60,000X faster in the brain than text.”
German designer Tobias van Schneider is a great example of high-quality imagery usage in personal branding communication that noticeably stands out.
Some more great examples:
Be consistent creating
According to Austin Kleon, an author of the New York Times bestseller “Show Your Work!” you have to consistently post bits and pieces of your work, your ideas, and what you’re learning online. Instead of wasting your time “networking”, take advantage of the network.
Think about all the great work you do but no one knows about it. Make sure to take an advantage of today’s internet ecosystem, post your drafts, ideas, updates, work in progress and complete work to get early feedback, recognition and potential leads.
There are some brilliant communities just for designers, Dribbble, Behance, DeviantArtjust to name a few. Other medium can be your personal blog and portfolio.
Storytelling is an enormously powerful skill that can set you apart from other faceless designers in the industry and help you shape your brand that people are interested in and eventually think of when in need of a designer.
Instead of showing just your work, add some of your daily life to it, share work in progress, share your daily routine, share how do you find inspiration and the list goes on. A great example is Tomas Jasovsky, a Slovak designer who tried to get into a big company like Facebook, Spotify and after not getting in decided to pack his belongings and travel around the world with his girlfriend. He’s calling himself a nomadic designer and everything he shares is mixed with traveling, design, food and adventures. Who’s not interested in such a lifestyle?
It’s incredibly important to start building your professional network and get industry leaders into your circle as you will be perceived as one of the leaders as well.
“Your network is your net worth.” – Tim Sanders, author, public speaker, and former Yahoo! director
There are many ways to start connecting with people and you should not necessary focus just on designers, any connection is good and may lead to a “top dog” designer that you may not be able to reach from another designer.
How do you get people interested in you? You don’t, you start by listening to them and trying to provide them value in any way you can, only then people will start connecting with you in a genuine way and forming long-lasting relationships. If you want to learn more about networking principles for designers check out my article I wrote last year:key networking principles for design entrepreneurs.
Below are some handy websites and social networks for meeting new people.
- Startuptravels – connect with the world’s startup scene. Meet entrepreneurs and startup enthusiasts in over 160 countries.
- Meetup – one of the biggest platforms in the world for meeting people on pretty much any subject you can imagine.
- Dribbble Meetups – Dribbble Meetups are a chance for designers to socialize, talk shop, and foster their local design communities.
Get some press
There is nothing more powerful than a well respected publication coverage of you, your story or your work. It adds a lot of credibility and trust to your brand and sets you apart from all the competition in your industry.
It’s not that easy to get press coverage though, you either use your personal unique story or build something remarkable and controversial, like an innovative redesign of an existing product or a new concept for something that would be cool if existed.
A great example is already mentioned Tomas Jasovsky, a Slovak designer who came up with a design concept for Instagram for Business and got coverage by tech publications, one of them being The Next Web.
In this guide I’ll cover a handful of design techniques for building usable dropdown navigation menus. This includes multi-level dropdowns and mega menus which all rely on the same core design principles.
Markers For Sub-Menus
It’s a good idea to include markers for links that have sub-menus attached. These small visual indicators let users know where links are placed and how to access them.
And these rules apply to all menus whether you’re designing with 1 tier or 4 tiers of links.
Markers can range from arrows to dots or squares or anything noticeable. Most users are smart enough to pick up what the symbol means, so long as it’s universal.
The Threadbird navigation is a fantastic example of this effect in action.
Some of their links have sub-menus while others don’t. In fact some of their links have sub-sub-menus which you can only discern by their unique marker next to each link.
Threadbird uses the right-pointing double angle quotation mark, simplified to raquo. Web designers prefer this symbol over a single arrow because it’s bulkier and easier to notice at a distance. Plus it holds its shape well even at smaller sizes.
You can find a similar design on the TutsPlus navigation. They use downward-pointing arrows for dropdowns and right-pointing arrows(closing point brackets) for the flyout menus.
One thing I don’t like in this design is the sub-menu arrow style. The arrow icons only appear while hovering a menu item, even though all the other links have submenus too. Good design practices would encourage keeping these arrows visible at all times.
But I do like the simplicity of the TutsPlus design. It’s a perfect example of how tiny little markers can go a long way towards better usability.
Space With Link Padding
It drives me crazy when I see designers misusing space in their navigation.
The majority of dropdown menus have a bit of space between links. But there’s a huge difference between margins and padding.
With margins you need to click/tap on the actual link text. The clickable area is only as large as the text itself. But with padding you can make the entire area clickablemeaning the user has a much larger target. In the context of menu links I’d argue larger is always better.
Webdesigner Depot has a cool animated dropdown menu courtesy of their recent redesign. When you hover the “blog” link you’ll get a two-column dropdown menu. If you hover any of these links you’ll notice they use padding to create space.
This means you can click in the white space around the link text which makes navigating the site a lot easier.
Most dropdown menus fall into one of two types: padding for spacing or margins for spacing.
You can tell by hovering the space around the link to see if your cursor turns into a clickable glove. Here’s an example of a site that doesn’t use padding.
The Philadelphia Orchestra has a fantastic website. Clean, usable, and easy to read.
But when you hover any of the dropdown links you’ll notice only the text is clickable. Worst of all their dropdown menus are pretty wide, but the link text is fairly short.
I can’t imagine a scenario where margins would be better than padding. By making the links block-level elements they can span 100% of the dropdown menu. This means the user could click anywhere in that link’s box and still visit the page.
To me the choice is obvious. If you can increase the click/tap area of links in your dropdown menus then you’ll greatly improve the navigation experience.
Clear Hover States
Designing an “active” class for hovered menus keeps attention where it belongs. Most designers use the CSS :hover pseudo-class which works great for actively-hovered links.
But it’s also a good idea to keep the main link highlighted when the user is hovering submenu links. This denotes a clear path of activity where anyone can glance at the menu and quickly determine which primary link is active & which sub-menu link is hovered.
You can design hover states with many techniques like font color changes, BG color changes, text underlines, highlights, box shadows, whatever. The goal is to keep the parent link activated even when it’s not being directly hovered.
DePauw University uses very simple contrasting colors between white and black. The default navigation uses white text on a dark background. When hovering a link you’ll notice that these colors reverse.
But when you hover a primary link with a sub-menu you’ll also notice it stays lit up the whole time. You can hover any internal link and still get that main highlight effect.
Each design can have its own styles so you don’t need to go black & white like DePauw. But the active styles should be noticeably different than the default links.
On Comedy Central’s website you’ll find the same effect. But instead of a white highlight color they use a lime green/yellow.
You can build a working dropdown menu without this active highlight effect. But UX designers know that just because something works doesn’t mean it’s working optimally.
I think all dropdown menus should keep an active highlight over the parent link. This also includes sub-sub-menus that go 2-3 layers deep.
Quick Dropdown Animations
CSS3 mixed with jQuery can make some powerful animations for the web. Dropdown menus thrive on animation whether they’re sliding or fading into view.
But animation should always serve a purpose. UI/UX designers need to use animationpractically. It should bring the interface to life but shouldn’t slow down the user experience in the process.
The best dropdown animations can be summarized with two words: quick yet noticeable.
Take a peek at the ESPN top navigation. You can hover any sports division to get a dropdown menu of teams and related links.
This dropdown clearly slides into view from top to bottom. However it does this quickly so you’re not stuck waiting 2-3 seconds before you can interact with the links.
Generally I recommend keeping menu animations at 1.5 seconds or less. This rule of thumb only applies to menu animations because they’re interactive elements. But you can easily extend animations for other page items up to 3-5 seconds(or more) if it makes sense.
Ironically the CSS MenuMaker website has a stunning top menu design. The dropdowns have callout arrows like speech bubbles to denote which primary link it belongs to.
But in the context of animation these dropdowns are swift. I’d estimate their animations run for 300 milliseconds quickly fading in & out of view.
But they only animate when focus moves elsewhere, so once they’re visible the links do feel solid.
That’s the key to a great dropdown menu animation. It should have that magical sense we all love in animation, but the animated element should also feel like a solid part of the page.
A quality dropdown menu considers both form and function. Yes it should look nice, but it should also function well and create a fantastic experience for the visitor.
These tips are some that I live by in my design work. They’re all pretty simple to add into your dropdown menus with very little code. And if you’re looking for more examples of great nav menus take a peek through our inspiration section.
At the end of the day your audience will be attracted to modern design, elements they sub-consciously accept as the norm, because they’ve had that user-experience on other websites. Think of modern design as a combination of art, design, and functionality. When these elements ‘work’ in harmony your page will be undeniable and ultimately guide the visitor to where you want them to be.
So, ‘What’s Missing’?
1. Web Design That’s not Unique to Your Industry & Brand
Your web design is the first impression a visitor will have about the business. This page should not only be reflective of your industry, products or services, but it should stand out from competition and reflect your company culture. The Following should be considered:
- Design should attract and imprint in the memory of your visitors to create “awareness”
- Content should create a narrative to ‘tell your story’ through the website.
Make sure that your web design is unique and recognizable. Distinct visual approach & style, typography and interactive design elements play a big role in this department. All this creates the first impression in your visitor’s head and is crucial for the next interaction with your website.
Your content should engage. It shouldn’t be boring. A great way to incorporate additional interaction, to make your visitors stay connected is through the use of bold hero sections with enriched sliders, video content and content animations.
- Hover Animations will make the website more intuitive and will give additional information regarding a feature function. Hovering over a feature or image will allow for instant visual feedback.
- Large Scale Animations include effects like parallax scrolling and pop-up notifications.
- Loading animations are used to keep a user engaged and are popular for one-page sites, flat design and minimalism.
- Background animations and videos should be used in moderation but can add to the storytelling element of the page. It should be seen as an add-on and not a distraction.
A great example of this aspects is the creative WordPress theme TheGem recently released on Themeforest marketplace. This theme understands the need for individuality, creativity, awareness and interaction, offering many industry specific unique design concepts . When going through the demo pages of this theme you will see how different industry stories can be told in an attractive visual way, involving the user in interaction and remaining in his/her memory.
2. No Trending UX and UI Features
Even though your page visitor might not be able to pinpoint the exact reason why don’t find your website appealing, their subconscious will pick up that your page is sub-standard. Trending features within design can take a variety of forms, but for the last few years, these features are taking the front seat for UX and UI.
- Scroll Jacking is where the user’s scrolling is directed to an exact vertical point on the screen, such as the top of the next content container. It’s replaced native scrolling and is more targeted. Here are some examples for that:
- Design for Your Satisfaction
- Brilliance of Perfection
- Material Design and Flat 2.0: As Google launched their new style language, Material Design, the designers got an opportunity to evolve minimalistic flat design principles in something more attractive, combining it with some old yet pretty features of skeuomorphic design (for instance through layering). This is aimed at making designs appear more realistic and appealing to the visitor. You can check some examples of creative flat 2.0 realisation on this pages.
- Font Icons & Scalable Vector Graphics (SVG): This feature is popular for the basic reason that it scales graphic designs without compromising the quality which is very important for responsive & retina design.
- Minimalism and Ghost Buttons: It’s all about keeping your visitors focused on what they need to do, read and see instead of distraction them with too many images, text, videos and pop-ups. The same goes for the trending ‘hamburger menu’ to simplify the browsing process for the user.
Making use of trending design features shows that you are focused on a user-friendly page. You want to make your page visitor’s experience as valuable as possible, which will hopefully lead to conversions and lead generation. Your design team or theme creators should have a deep understanding of current UX trends to make sure that the web page and design has a long shelf life.
3. No Call to Action
One of the most biggest signs of bad UX is the lack of intuitive design. As a developer, your aim is to anticipate the behaviour of the page visitor, and more so, guide the behaviour to be favourable to the brand. Call to Action buttons are there to motivate visitors into action. These could be in the form of newsletter signups, registration, ‘buy now’, ‘learn more’ or ‘contact us’. Call to Action Buttons not only drives traffic to certain pages, but it influences engagement and improves conversion rates.
If your web page design doesn’t feature a clear call to action sections button, you are preventing your visitors from taking action and ultimately lose leads.
4. No Search Functionality
In this digital age, web users want their needs met immediately. A split second can change their minds, and not being able to navigate or search for what they want on your page, will drive them to the competitors. A Search bar is of utmost importance whether it’s to search for blog content for a certain keyword, or a product or service on the page. Again, it’s about making the interaction and engagement with your page as easy and seamless as possible.
5. Low Performing, Slow Website
Many modern websites look really good, however being slow, results in high bounce rates, low page speed, yslow scores and low search engine rankings. This is because there are too many scripts and requests, no optimized images and no caching. Other websites (like for example TheGem WordPress theme) , is visually appealing and interactive, and pays a lot of attention to optimisation by only implementing what’s needed. As a result, the web performance is increased, and so is the Google Ranking.
The key to improving the web page’s speed is by:
- using the right size of images and design
- reducing the number of scripts
- using of HTML/CSS minifiers
- enabling website caching
6. Your Web Page Is Not Working Well on Mobile
48% users say that if they arrive on a business site that isn’t working well on mobile, they take it as an indication of the business simply not caring. (Source: MarginMedia.com) Not having a responsive website is almost as good as not having a website at all. Businesses need to have responsive web design in order to give them online credibility. As Noetiforce explains; ‘Responsive Web Design is the DNA of modern web applications’.
If you are starting to design your website, start with the mobile version first, before you expand your creative power on the desktop version. You shouldn’t worry about possible design limitations of such approach – just take a look at amazing designedcreative WordPress Themes on Themeforest; many of them, like TheGem, were created with the mobile-first approach in mind.
Through studying the trends of modern web design, we can deduct what works well online, and what doesn’t. This article is aimed at taking a look at where your website might be lacking. Although we shouldn’t judge a book by it’s cover; we do it anyway. With the focus on great UX and UI, you can ensure that the users will be buying in on your product and services because of high quality design, trending features, a great user interface, brilliant functionality and a page that performs at the speed of light.