This is default featured slide 1 title
This is default featured slide 2 title
This is default featured slide 3 title
This is default featured slide 4 title
This is default featured slide 5 title
 

Monthly Archives: November 2016

6 Inspiring Design Documentaries

Documentaries have a profound effect in terms of their ability to both teach and inspire. As designers, we are one of the primary creative industries and always looking to find and use inspiration, whether it be from images, art, products, or even music.

Below I have compiled a list of six inspiring design documentaries that should help serve as excellent resources to help you learn something new, however advanced you are as a designer. They have all taught me something new about design and design thinking, as well as inspiring me with new styles and ways of working.

All of the following six design documentaries are available watch freely with only one requiring a Netflix trial or subscription.

#1 Design Is Future

This is an inspiring documentary that is exceptionally well put together. ‘Design Is Future’, which is held at Disseny Hub Barcelona during Barcelona Design Week, explores ideas for the future of design and talks about its rise to prominence over the last decade or two.

It explores some interesting thoughts about the role of design, design thinking, and poses questions to some of the most forward thinking design professionals around today. There is particularly excellent insight into design as a tool to help with innovation and sustainability for people, businesses, and society as a whole.

#2 Design & Thinking

Design & Thinking conducts interviews with prominent individuals from companies such as Autodesk and Coca-Cola, looking at the process of design thinking and design’s ability to make a significant impact on real-world problems.

It discusses how strategic and well-thought out design decisions can have a positive effect on every problem, from everyday life, to solving world hunger and other humanitarian issues.

#3 The Modern Russian Design

Sergey Shanovich’s documentary ‘The Modern Russian Design’ provides a unique insight into one of the most interesting regions of the world and its design industry, and individuals who are trying to make an impact across multiple areas of design. It covers the past 20 years of progress within the Russian design field and documents the designers who have helped contribute to a part of this progress.

The documentary covers multiple areas of design including fashion, industrial, multimedia, web, and graphic design.

#4 Connecting – Trends in UI, Interaction, & Experience Design

‘Connecting’ is a short but interesting documentary which shows just how far we have come in the last 3 to 5 years. It helps take a step back from the constant innovation and progress, and look at interaction and UX design from a new perspective.

Specifically exploring the future of interaction and user experience design, ‘Connecting’ looks to document the impact technology is having on the lives of everyday people, how that may develop into the future, and the ramifications of such developments.

#5 Jeffrey Zeldman 20 years of Web Design and Community

An inspiring figure in web design, this documentary has Jeffrey Zeldman discuss a variety of topics about the past, present, and future of web design.

Owner of ‘A List Apart’, Jeffrey has some great tips for designers and developers alike, specifically around topics such as building a mailing list, and looking towards to future of web design. It is well worth a watch to learn from someone who has been working in the industry since the very earliest beginnings.

#6 Abstract: The Art of Design

Abstract is an incredibly well put together series by Netflix which devotes an episode to almost every major category of design. Particularly inspiring and related to web and graphic design are episodes following Christoph Niemann and Paula Scher, illustrator and artist respectively.

It provides unique insight into their design thinking and creative process, and serves up a host a great knowledge and inspiration. The documentaries also look at how design affects people and the impact it has upon everyday lives.

Tips To Create a Web Design Style Guide

 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.

4. Voice

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.

5. Iconography

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.

6. Imagery

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.

7. Forms

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.”

8. Buttons

Buttons are a mixture of color palette, forms and voice. Rely on these previously created assets to create consistent looking and functional buttons with different stated designs.

9. Spacing

How can spacing be in style guide? It is extremely important to mention the spacing. It can be in the form of a grid used for a layout; it can be spacing defined between headlines, buttons, images, forms and other elements.

Getting spacing right is important because it gives more breathing room to elements, and consistent use makes your work look structured and professional.

10. Dos and Don’ts

Last but not least: Make the DOs and DON’Ts section much like an FAQ showing the most common pitfalls and give examples of how things should look and work instead.

6 Missing Features in Your Web Design

 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:
    1. Design for Your Satisfaction
    2. Lookbook
    3. 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.

Tips For Make Dropdown Menus

 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.

Closing

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.