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: February 2017

Duotone – Fresh Trend in Website Design

As Wiki states, a Duotone is a halftone reproduction of an image that brings out its middle tones and highlights. Blue, brown, red and yellow are considered to be the everyday choices. However when it comes to enthusiastic web designers, there is no such thing as common or dominant. As the past several months show, numerous vibrant shades from purple to green are implemented to achieve this incredible effect.

The creatives mix and match different tones even those that are barely conformable.

If you need an instant effect you can also use some helpful tools like

  • jQuery Duotone;
  • Duotone Colorschemes;
  • Colofilter.

For now, we are going to browse excellent websites with duotone images and illustrations to get some spur from real life examples.

Adidas Football

The campaign’s front page is personified by a series of incredible photo backgrounds that thanks to duotone effect look stylish and modern. They create an amazing atmosphere that meets the mood of the brand and strengthens a sports vibe.

Mirage Festival

Mirage Festival has a slightly bizarre appearance, yet it certainly stands out from the crowd. The website’s aesthetics owes its unique appeal to an outrageous combination of red and blue that transform images into a duotone. The main content that is set in regular typeface and white tone easily draws the attention.

Fjord Trend

The homepage features several image backgrounds that are enhanced by duotone technique. The combination of colors is pretty modest and soft. Everything looks calm, serene and businesslike. The solution adheres to website’s philosophy and provides a sharp contrast to vital details.

Triple 9

Red and black are used to compose a duotone. It enriches videos and images with some subtle emotions. It also adds a dramatic feeling to the website and helps to exude an aura of violence and brutality.

La Marine Nationale on Board Careers

The homepage greets the online audience with a huge image slider. It depicts four duotone backgrounds, where the bluish versions are ones that meet the navy recruitment theme best. Together they complete the atmosphere as well as naturally direct the attention towards the foreground elements.

Heroes and History

Heroes and History is marked by a lovely hero-themed illustration that is made in two primary colors. Secondary white is used for adding some accents. Although dominant red can be a bit aggressive yet, in this case, it does the trick.

Holm Marcher & Co

Here everything is penetrated with seriousness. Every detail tries to contribute to the businesslike atmosphere, and background images are no exception. Thanks to soft and casual duotone effect, they set the tone for the more professional one and reinforce a picture of authority.

MailChimp

MailChimp equips its review page with a splendid color transition, from hot red to cold blue that gently leads visitors from top to bottom. That’s not all; each tone is used to convert its corresponding backdrop into duotone image that enriches user experience.

Year in Review by Atomic.io

The team leverages duotone effect for both images and videos. The solution gives a strong visual impact and brightens up the modular layout. It is made from the primary colors thereby achieving consistency in style.

Finesse Design Atelier

The portal is packed with numerous gorgeous photos that characterize agency’s sphere of expertise. Some of the pictures are left in its original state while others are jazzed up with some nice touches. The screenshot below demonstrates an interesting take on duotone image.

jonkopingssodra

Green, yellow and halftone touch make the ‘welcome’ background look so outstanding. It is eye-catching and at the same time soft and robust, ideal for supporting the foreground content. The color choice is well-suited to the concept: it reflects the idea more effectively as well as captures its jovial spirit.

Year in Review by Tumblr

Year in Review by Tumblr ditches all the gorgeous pictures and videos and opts for dynamic abstract backgrounds, maintaining a clean aesthetics. Each story is defined by its duotone illustration. The page breaks away from the others with its strange yet engaging design.

Campaign by Lois Jeans

Campaign by Lois Jeans is charged with energy that is going to burst. Not only is sophisticated layering aesthetics responsible for delivering an overwhelming general impression, but also duotone effect that is applied to videos. Paired with the main light coral shade it ties everything together, achieving a harmonious environment.

New Deal Design

The website strikes the eye with its unbelievable coloring. Pink and yellow are what makes the project feel so unique and special. Duotone images are bright, dramatic and intensive. They steal the show and substantially contribute to the friendly air and positive mood.

Year in Music by Spotify

We could not help but mention Spotify. This year portal is the talk of the town. The brilliant interface took the Web by storm and set high standards for the rest. If you need a sheer inspiration for utilization of duotone, then you should give it a try. There is a range of highly intensive images that are worth a thousand words.

Majorette Events

The front page expresses an excitement. Everything is in fuchsia: the tone occupies almost every pixel on the screen, obtaining an intriguing general feeling. Duotone images are used as backgrounds and demonstrative material.

The Art of Travel

The website has a clean, properly-balanced look achieved by modest design and neutral coloring. Unlike the previous example, it has a more serious personality yet not devoid of charisma and artistic appeal. The bluish duotone image that marks the ‘welcome’ screen fits here like a glove.

Tips to Create Perfect Color Combinations

One of the most challenging and tricky parts of the design process can be choosing a color palette that represents your brand or message, while creating an amazing base for the design.

Creating perfect color combinations is more than just picking two colors and running with it. There’s actually quite a bit of science and design color theory behind it. Today, we’ll look at nine ways to help you create a more perfect color palette. (And of course, the tips come with a showcase of websites featuring beautiful color combinations.)

Start with the Color Wheel

Do you remember the color wheel from school as a child? It’s still a practical tool as an adult.

The color wheel can help you think about color and how different hues relate to one another. It’s a practical way to determine whether a pair (or more) of colors will relate to one another in a harmonious way.

The wheel contains primary, secondary and tertiary colors and every combination therein.

  • Primary colors: Red, Yellow, blue
  • Secondary colors: Green, purple, orange (mix of two primary colors)
  • Tertiary colors: Azure, violet, rose, red-orange, chartreuse, spring green (mix of a primary and secondary color)

How you mix colors on the wheel is important and contributes to how well the hues work together.

  • Analogous: Pick three colors next to each other on the color wheel
  • Complementary: Colors from opposite sides of the color wheel
  • Split complementary: Pick a color and use the color on either side of the opposite color from the color wheel
  • Double complementary: The hardest to create, this concept uses a primary color and complements from both side of the opposite color on the color wheel (works best with tints and tones)
  • Monochromatic: One color and variations of that color (such as Nifty, above)
  • Triadic: Three colors equally spaced on the color wheel

Most color-picking tools use a simulation of a color wheel to help you make color choices. (So there’s really no way around this part of design theory.)

Black, White and Neutrals Matter

But a palette is more than just a bright color or two. Arguable, the most important colors in the palette might be the ones you don’t really see – black, white and neutrals.

These colors set the stage for how everything else works. They are often part of the background, provide a warm or cool feel for the project and contribute to overall navigation and usability though typography and other directional cues.

Toning and Tinting

Few designers are going to grab a few colors from the color wheel and just use them straight up. That’s where tints, tones and shades come in.

  • Tint: Color plus white
  • Shade: Color plus black
  • Tone: Color plus gray, or black and white

These variations change the saturation of color and give you variance within a palette. When it comes to creating color combinations tints, tones, and shades are often used to expand a palette beyond two or three colors, so that all the hues are in the same family (much in the same way you might use bold or italic with typography).

Use Trends with Caution

There are so many “trendy” colors out there. While they can be fun to use sparingly, these colors can be somewhat more difficult to use long-term. If you want to use a color trend, stick to one trendy option and work it in to your palette.

In general, you want to create a color palette that will withstand time and can be used over and over again. (Color is an important contributor to brand identity.) Work with a couple of colors that are “yours” and add a trendy option in as an accent for maximum impact. (That way, when the trend is over, you can return to another accent color.)

Avoid the Rainbow

Color is best when used with purpose and in moderation. You don’t need five, 10 or 15 colors in your palette. The best color combinations are often just groupings of two or three colors with a neutral background.

Why? This gives each color room to be seen and have a purpose. Color should do something in the design. Too many colors and the only purpose is color. The best designs and color combinations exist so that each color has a specific role and users can engage with color in a way that makes the website that much easier to use. (For example, most designers use the same color for every button in a website project.)

Include a Color for Text Elements

When you are building color combinations, it is important to think about text elements. Unless the text will be only black, white or gray, determine what color (or colors) will be used for text elements.

This can include anything from color for readability or usability to linking to menu items. The most important consideration when planning color choices for text is readability. Lettering needs to have plenty of contrast in relationship to the background so that it can be seen and read with ease.

The color used for text elements can be part of the overall color scheme or an accent color that is specific to lettering.

Consider Color as It Relates to Content

The best color combinations don’t only match hue to hue, but they also match color to content. Think about what’s actually on the website. Do the color choices blend well with that content?

Sometimes this is an obvious problem and solution. Websites that deal with nature or the environment might use greens or browns; banking websites are often blue because of that color’s association with trust.

Other times, it’s not that easy. When you are in doubt, look at the imagery in the site design. Pull swatches from it to help establish a baseline for the type of color that is most appropriate. Then build from there.

Stick to a Palette

Once you are on the way to creating a great color combination, establish a palette so that color use will remain consistent throughout a project. Establish a set of rules for how color should be used.

Answer these questions to get started:

  • How many colors are you working with?
  • Are there tints, tones and shades to use?
  • Can text be colored?
  • Is there a set hue for UI elements?
  • Can accent colors outside the palette be added to the mix?

Conclusion

When it comes to color, a lot of what makes a great palette starts with you. Do the colors look and feel right? It might seem like a simple test, but it matters. If you are the least bit unsure, rethink your options or go back to the root of theory and make changes to one of the colors.

Remember to create contrast and variance within the palette. Establish a feel. And remember to match color to content for the best overall user experience.

Principles of Chatbots Design

Are chatbots in the future of website design? These little bits of artificial intelligence are starting to pop up everywhere – whether you notice them for what they are or not.

Here, we’re going to take a look at what makes chatbots work and how to make the most of including one in your website design.

What is a Chatbot?

A chatbot, which refers to a chatting robot, is a computer program that can simulate conversation. Chatbots are often tiny programs that function inside a website or app and help users find information, connect to resources or just offer a standard greeting.

Chatbots are beginning to pop up everywhere. Facebook and Microsoft are leading the way, if you are questioning the validity of a computer talking to your users.

They can offer immediate engagement and connection at times when your staff is busy or just can’t connect online. They are a useful tool for answering simple questions, setting reminders or just keeping on task.

It’s All About the Conversation

When it comes to using chatbots, it’s all about the conversation. You probably interact with at least one chatbot a day if you are an active online user.

These conversations are simple. Chatbots offer answers and solutions to common questions by “learning” keywords and “thinking” about specific prompts.

When it comes to the design of a chatbot, the persona is important. How does the bot speak to the user? What is the conversation like?

Bots also rely on patterns to relay information, so they can be tricked or get confused by certain dialog or combinations of keywords. A good bot is constantly updated and refined so that you can see what information it is receiving and giving back to users in return.

Wide Application

Chatbots are more than just online chatting tools, and have wide application that you can take advantage of in a number of ways.

A sampling of some of the things chatbots can do include:

  • Create clever and conversational applications that mimic the way people actually talk to each other.
  • Increase conversions with users in Facebook messenger.
  • Schedule “meetings” or team conversations in Slack.
  • Tracks messages and conversations that your bot engages in and compile analytics. (Yes, there are even bots for your bots.)
  • Connect users to like-minded applications, businesses or websites.
  • Welcome new users to your social media profile or answer questions when messaged.

Key Concepts

Now when it comes to thinking about exactly how your bot will operate and speak to users, you should keep a few key concepts in mind. While some super-simple bots can fool you – mostly because they work so well you don’t even think about the idea of a bot being used – complicated bot interfaces can get clunky and awkward in a hurry. (Maybe one day the artificial intelligence will be there to better refine this idea.)

  • Don’t try to fool people into thinking the chatbot is a human. It’s perfectly acceptable to use a chatbot, but be straightforward about it. Let the robot have and maintain a “robot personality.”
  • Create a chat. It’s a user pattern that people know and understand. Don’t mess with a system that already works.
  • Create a chatbot that helps the user. While this might seem like a “well, duh” kind of action, too often developers add a bot to a design because it is cool. Only add a chatbot to enhance the user experience.
  • Keep it simple. Bots work great when it comes to answering questions from your product FAQ, but won’t be effective in walking users through a process that has multiple steps. If you can answer in a few words, use a bot. If the answer is more complex, save it for a human.
  • Keep it conversational. You can’t always know your end user or how much knowledge they have coming into the chatbot conversation. Bot-based responses should use common language, answer in the most basic of ways and interact in an easy to read manner. (If the answers are overly long or complicated, it is not a task be solved using a chatbot.)
  • Provide an out. Some users will always be frustrated by bot-style conversations. Give them a button to get out of the chat and contact you in another way, such as email or phone.
  • One bot per site please. One conversation per bot. Don’t overuse bots because your site will feel … well, robotic. Use them where needed and where necessary, but don’t go overboard.
  • Always keep an eye on your bot. Monitor how it is used and make adjustments as needed to ensure that it is meeting the needs of users.

Get Started with Chatbots

So now that you are interested in using a chatbot, where do you find the right one?

There are two options: You can build it or you can find something that’s ready to use. The second option is probably your best bet.

For that, visit Bots Place. The site includes a massive (and searchable) database of bots for you to choose from. There are bot for specific apps and services, bots that can stand alone in almost any design and bots that can help your bots work more efficiently. (Sounds crazy, right?)

If you really want to experiment and create your own chatbot, try a tool such asRobot.me. The free tool lets you create a bot that you can use in your projects. (And while this sounds like a lot of fun, a premade, tested chatbot just seems like a faster, easier option.)

Conclusion

Chatbots are a great tool when it comes to quick interactions with users. They can help you work more efficiently, save time and impress users that are looking to find answers to a question quickly.

To make the most of using a chatbot, remember to keep it simple, don’t try to trick users and follow the analytics trail for constant feedback and improvement. And now that you are on the lookout for chatbots, pay even closer attention to see which ones work well and what lessons you can learn from them.

Wireframing, Prototyping, Mockuping – What’s the Difference?

Introduction

I’m very happy to welcome you all to the first part of this online course onwireframing and creating design documentation. I hope you’ll all have fun and learn useful, applicable techniques that will make your everyday work life much easier.

I’m Marcin Treder and I currently serve as CEO of the popular User Experience Design Application – UXPin, but I’m also a seasoned User Experience Designer and a manager of User Experience teams.

In a series of 7 articles I’ll discuss, in detail, methods of wireframing and, in general, creating design documentation. I’ll guide you through tips and tricks that helped me in my practice and I sincerely hope you avoid some of my painful mistakes.

Articles are meant to be highly practical so expect just a little bit of design philosophy and a lot of real life stories.

All the examples of design documentation are created in UXPin – the first ever User Experience Design application.

Wireframe, prototype, mockup – what’s the difference?

A couple of years ago I realised that a lot of my IT, non-designer, friends were using the names of my beloved design deliverables synonymously. They assumed that a wireframe, prototype and mockup are exactly the same thing – a kind of greyish, boxy, sketch representing an ingenious idea.

The problem with their simplified view is that they never know what to expect from the work of User Experience designers and they often get confused. ”Why the hell is this not clickable?”, ”Well, I didn’t know that I was supposed to click here…” – these kind of comments are annoyingly common in UX design projects.

Confusing wireframes with prototypes is like assuming that an architectural blueprint (a detailed plan of a building-to-be) and a display house, are the same thing.

Though you may certainly try to live in a display house (you know – its beauty is supposed to demonstrate how cool other houses in the area are), you can’t count on a comfortable stay in a blueprint – it’s just a sheet of paper.

A display house and a blueprint are different means of communication in architecture:

–  a blueprint serves as a building plan and should specify how the building should be built

–  a display house provides a test drive for future residents

The same differentiation can be applied to wireframes, prototypes and mockups. They  look different, they communicate something different and they serve different purposes.

A display house and blueprint do have something in common though – they both represent the final product – actual house. And again exactly the same common trait can be applied to wireframes, prototypes and mockups – all these documents are forms of representation of the final product.

Believe it or not, the difference between a prototype, wireframe and mockup was always one of the first things I tried to teach members of my User Experience Design team.

Yes, it’s really that important.

Let’s discuss wireframes, prototypes and mockups in detail, so you’ll grasp the idea of what to use in specific situations.

Wireframe

1. What is a wireframe?

A wireframe is a low fidelity representation of a design. It should clearly show:

– the main groups of content (what?)

– the structure of information (where?)

– a description and basic visualisation of the user – interface interaction (how?)

Wireframes are not just meaningless sets of grey boxes, though they may look exactly like that. Consider them as the backbone of your design and remember that wireframes should contain a representation of every important piece of the final product.

„Representation” is a crucial term here, which will help you find the right fidelity – speed balance. You can’t go into too many details, but on the other hand you need to create a solid representation of the final design that won’t miss out any important piece of it. You’re setting a path for the whole project and for the people that are working with you (developers, visual designers, copy writers, project managers – they all need well-created wireframes). In fact you’re creating a map of a city. Every street is represented on a map, but it’s vastly simplified. You can sense the architecture of the city if you look on a map, but you can’t perceive its beauty.

Wireframes should be created quickly and almost the whole time should be spent communicating with team members and…thinking. The mere activity of wireframe-creation should be really quick.

Visualisation should be aesthetic, but this is vastly simplified. Black-grey-white are the typical colours you’ll use (you may add blue to specify links).

If something takes too much time to prepare (e.g. choice of icons, uploading images), you have to represent it in a simplified way (e.g. using placeholders – crossed rectangles for images, plus an appropriate description). We tend to call wireframes low-fidelity deliverables (lo-fi).

Remember – a well-created wireframe communicates design in a crystal clear way and sets a path for the whole team.

2. When to use wireframes.

Wireframes are typically used as the documentation of the project. Since they are static and fix interaction with an interface at a specific point in time, they should be accompanied by the written word (from short notes explaining interaction to, when needed, complex technical documentation).

However they might be also used in a less formal way. Since they are quick and simple in form, they serve well as clear sketches for inner communication in the team. If developers ask how something should be done – the answer can be provided as a rapidly created wireframe.

Consider this: UXPin is a start-up with really rapid development cycles (releases every couple of days). We use wireframes to quickly visualise tasks (even small ones!). It eliminates misunderstandings and is really cheap.

Wireframes are hardly used as a testing material, although they may help to gather feedback in initial, guerrilla-style, research, in which you don’t care about methodological purity, but rather try to get some quick insights.

Wireframes placed in the context of the whole design story can be surprisingly effective and, though in recent years they’ve received some bad press, are still indispensable as an initial stage of complex projects.

Prototype

 1. What is a prototype?

A prototype, often confused with a wireframe, is a middle to high fidelity representation of the final product, which simulates user interface interaction. It should allow the user to:

–  experience content and interactions with the interface

–  test the main interactions in a way similar to the final product

A prototype is a simulation of the final interaction between the user and the interface. It might not look exactly like the final product, but should be vastly similar (it’s definitely not a greyish, sketchy thing). Interactions should be modelled with care and have a significant resemblance to the final experience. Interdependence between the interface and backend mechanisms is often omitted to reduce costs and speed up development cycles.

2. When to use a prototype.

Prototypes are used to their full potential in user testing. Such a simulation of the final interactions forms great material to check the usability of the interface, before the development actually begins.

Prototypes usually aren’t the best documentation you can imagine, since they force the „reader” to take some effort to understand the interface. On the other hand, a prototype is the most engaging form of design documentation as the interface is tangible and straightforward.

Beware that prototyping is rather an expensive and time-consuming form of design communication. I’d suggest rather creating prototypes that can be reused in development (yep, it means that you need to code some HTML, CSS and probably IS on your own). It’s especially effective in relatively simple projects.

Done right and combined with user testing, prototyping can pay for itself.

Mockup (mock-up)

1. What is a mockup?

A mockup is a middle to high fidelity, static, design representation. Very often a mockup is a visual design draft, or even the actual visual design. A well created mockup:

–  represents the structure of information, visualises the content and demonstrates the basic functionalities in a static way

–  encourages people to actually review the visual side of the project

Mockups are often confused with wireframes, due to the names of some software companies.

2. When to use a mockup.

Mockups are particularly useful if you want to get early buy-in from a stakeholder. Thanks to their visual nature, mockups don’t have the resistance of the low fidelity deliverables and are much quicker to create than prototypes. They are a good feedback-gatherer and, if placed in the context of the whole design story, can form a great chapter of documentation.