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
 

Category Archives: web design

The New Rules for Scrolling in Web Design

What was once taboo in website design has made a complete resurgence as one of the most popular techniques in recent years as users are finding a new love and appreciation for sites where scrolling is a necessity. Shedding its old stigmas, scrolling is reinventing itself as a core interaction design element – that also means designers need to learn the new rules.

In this piece, we’ll explore the rebirth of scrolling, discuss some pros and cons, and list out some quick tips for the technique.

Why Scrolling is Reborn

The simple answer is mobile devices.

Ever since mobile users have surpassed desktop users, UI designers everywhere have adjusted accordingly. And with so many users on smaller screens, scrolling is becoming more of a necessity: the smaller the screen, the longer the scroll.

But there are other factors. Access to high speed internet is available in more places, making the scroll a quicker way to access information than clicking from page to page. The growing strength of social media sites also feeds the technique: scrolling naturally accommodates their wealth of user-generated content.

As explained in the guide Web Design Trends 2015 & 2016, long scroll evolved right alongside card-based design. When combined, the techniques let you provide users an endless stream of bite-sized content (which is perfect for web and especially mobile experiences).

Plus, the above-the-fold doctrine that was holding scrolling back is now being recognized as the myth it really is. The truth, according to actual studies, is that users really don’t mind scrolling. The practice of jamming everything above the fold is losing out to spacing everything out along a even and smooth scroll.

Part of the reason the myth became popular, of course, was that scrolling was only seriously considered as an intentional design pattern after advances in Javascript and CSS. Before that, it was much more difficult to make scrolling “sexy” through visual storytelling. As you might imagine, a long page full of text (interrupted by occasional images) isn’t a very engaging UI layout.

But once you start approaching the long scroll as a canvas for illustrating a beginning, middle, and end (through graphics, animations, icons, etc.), then you start to see it’s film-like power in capturing user attention.

In fact, some hybrid patterns are emerging as the latest trend in scrolling. For example, the “fixed-in-place scroll” that we use on our own UXPin tour page creates the same interactive experience of a traditional long-scroll site without stretching the site vertically.

Is Scrolling Right for You?

With every design technique and tool, there are those who love the concept and those who hate it. In most cases, neither side is intrinsically right or wrong; that’s why it’s important to weigh all considerations before tackling such a project.

Advantages of Scrolling:

  • Encourages interaction – With the ever constant stimulation of changing element, it can be an interesting storytelling method that encourages user interaction – especially with tastefully-executed parallax scrolling.
  • Faster – Long scrolling is faster than clicking through a complex navigation path and does not slow down or limit the user experience. As described inInteraction Design Best Practices, the perception of time is often more important than the actual passing of time.
  • Entices users – The ease of use promotes interactivity and increase time on site. This is especially true for infinite scrolling sites, where you can help users discover relevant content that they may not have even thought of.
  • Responsive design – Page designing can get complicated across devices with different screen sizes and capabilities, but scrolling helps simplify the differences.
  • Gesture controls – Scrolling seems organically linked with touch, since swiping downwards is much easier than repeated taps on different areas of the screen. Users (especially mobile) are commonly accepting this as a way to display information.
  • Delightful design – Few clicks can result in quicker interactions for a more app- or game-like user experience.

Disadvantages of Scrolling:

  • Stubborn users – Nevermind why, some users always resist change. Nonetheless, the technique is so widespread now (especially during mobile experiences) that it’s probably safe to say that the majority of users are accustomed to the technique.
  • SEO drawbacks – Having only one page may have a negative effect on the site’s SEO. (To learn how to minimize these SEO downsides, check out this Moz piece for parallax scroll and this Quicksprout piece for infinite scroll.)
  • Disorienting – The disconnection between scrolling and content may leave users confused or disjointed.
  • Navigational difficulties – It can be awkward to “go back” to previous content on the page. To counter this, you could create a persistent top navigation where each item is anchored to a page section
  • Site Speed – Large pieces of content such as video or image galleries may slow down the site speed, especially for parallax-scrolling sites, which rely upon Javascript and jQuery (check out this tutorial to learn how to create parallax sites without slow site speed).
  • No footers – With infinite-scrolling sites, we’d recommend a lean “sticky” footer so you don’t sacrifice navigability. Otherwise, users may be confused by a lack of further navigation at the bottom of the page.

Advantages and disadvantages aside, the long scroll is a technique that suits some types of sites more than others. Longer scrolling websites and best suited for content and design plans that…

  • … are going to include a significant portion of mobile traffic (most users)
  • … include frequent updates or new content (such as a blog)
  • … have a lot of information presented in a singular way for comprehension (such as an infographic)
  • … do not contain rich media because of the drain this can cause in terms of load times

Social media sites, with constant and extensive user-generated content, do well with long scrolling (in fact, Facebook and Twitter helped popularize the technique years ago). On the other hand, goal-oriented sites like e-commerce – which require coherent navigation – tend more towards conservative page lengths.

The middle ground would be a site like Etsy, an online store for user-generated products, which uses a hybrid solution: several pages of so-called “infinite” scrolling, ending with a call-to-action of “Show Me More.”

Like all web design trends, don’t use longer scrolls just because you’ve seen other sites follow the pattern. Make sure your website fits the criteria we’ve discussed, otherwise you might actually experience worse performance.

Scrolling Best Practices

Long scrolling, parallax effects and similar mechanisms are still relatively new to the realm of design (~4 years) , but still some rudimentary trial-and-error has produced some fundamental best practices.

Summarized from Web Design Trends 2015 & 2016, here are some everyday tips for successfully implementing long scrolling.

  1. Don’t be afraid to alternate long with short scroll. Let the content dictate the scroll length, not the other way around. It’s totally fine (and quite popular) to use a short-scroll homepage and long-scroll landing pages (like Products, Tour, etc.).
  1. Consider sticky navigation, such as that used by Free Range Designs, so that users can always “get back” quickly or bounce from element to element in the scroll.
  1. Suggest scrolling with design elements or tools so that every user can quickly see how the site works. Arrows, animated buttons or similar user interface tools are fun and easy ways to help the user determine what to do next. Some sites even include a small button with instructions like “Scroll for More” or “Get Started” to help navigate a site with unconventional techniques.
  1. Make clear distinctions between scrolling clicks or taps and other calls-to-action so that your website gets the desired interaction.
  1. Do some research and look at how users are interacting with the scroll. In Google Analytics, for example, you can open the “In Page Analytics” tab to see how many people click below the fold. Based on the data, you can then tweak the design as necessary.
  1. Don’t go overboard. Long scrolling does not mean 500 pages of continuous content – a long scroll can also be simple. Tell your story and then stop. Don’t force it. Deca, below, uses a scroll that is only a few pages long.

  1. Focus on your user goals and accept that even infinite scrolling sites are not truly endless. When creating longer-scrolling sites, understand that users still require a sense of orientation (their current location) and navigation (other possible paths).
  1. Include visual cues that help orient users in the scroll, such as the helmet icons used in the left hand side for “The Seven Types of Motorcycle Rider” site below.

7 Ways to Supercharge Your Design Learning

I started learning design in 2007, and a lot has changed since then. Now we have thousands of communities available, tutorial sites, remarkable individuals sharing their knowledge and dozens of opportunities to learn and earn as a designer.

Today, I’d like to share some of the techniques and methods I’ve used to learn design. I keep learning new things every day and some of the examples below are based on my personal experience trying, failing, building and succeeding.

Show Up Everyday

Developing a habit of learning is a key to establishing consistent learning routine that will allow you to supercharge your learning experience and maximize the outcomes of the effort you put in.

Allocate time daily to learn design and have it everyday for the time you want to keep studying, whether it’s a month or half a year. Sean McCabe suggests showing up for two years to achieve the following:

  • Make money
  • Build an audience
  • Solve most of your problems
  • Develop the tenacity needed to survive in this world

To maximize learning, spread it across your routine so you have time allocated just for learning and don’t push it too much at once, your brain needs rest to cope with the information you put in.

1 Percent Rule

Practicing everyday is what makes you better. The trick is to really commit to learning, set aside some time and show up consistently every day. Just think about simple math, showing up 60 minutes a day for a month is 60 minutes x 30 days = 1,800 min or 30 hours, which is quite a lot of time to learn something. According to James Clear, becoming better just by 1 percent every day will make a huge impact on your progress in just a year, see the graph below to better understand the power you can use to supercharge your learning.

Instead of practicing the same thing over and over again, try to learn something new to use the advantage of tiny gains.

Apply the 80/20 Rule

Learning everything is not smart, learning what works and produces results is smart.

The Pareto principle (also known as the 80–20 rule) states that, for many events, roughly 80 percent of the effects come from 20 percent of the causes. Same goes with learning design, you can learn about tracking, kerning, typeface anatomy, different measurement units but it won’t make you a great designer and will take too long. There will always be things to spend time and energy on, the key here is to focus on things that will really benefit you and maximize the outcomes.

Think about the end goal, if you want to become a mobile designer, learn about the mobile industry, mobile design principles, people’s behavior and habits instead of learning every single thing about design that doesn’t necessarily apply to mobile design.

Adopt Learning Habits

To develop a habit you need a trigger, a consistent routine and a reward. You can start learning the first thing in the morning with a cup of coffee which can be your trigger, then study for 30 minutes (for example) and have a reward that pleases you, such as a favorite TV show or piece of cake. Make it pleasurable and desirable and the whole process will be more enjoyable.

Take Up a Challenge

Take up a challenge and publicly commit to a certain period of time to create and show up everyday. It can be as simple as 30 day sketching challenge or as complex and hard 365 photo everyday challenge. In late 2013 I took on a 30 day writing and publishing on Medium challenge where I was writing about anything and publishing for one month. I’ve seen enormous growth in my confidence, idea explanation abilities and a boost in willpower management.

Simply think of what you want to learn, pick a duration and deliverables and let everyone know that you are committing.

Teach

The best way to really learn something is to teach it. “But I am not ready, I don’t know a thing.”That might be true, but knowing something is more than nothing and you should be teaching others about your craft. By teaching you focus on the essence of the design and try to understand and explain it in a simplest way possible. It improves your analytical thinking and forces you to make connections with different theories and personal experience. Start a log, daily journal or a YouTube channel and start journaling your process for other people.

Work On a Side Project

Allocate some time and work on your passion with a side project that excites you and does not constrain you too much. Side projects will let you experiment with things and achieve much more progress as you will be enjoying it and just playing with it. I teamed up Paula Borowska in late 2013 and started working on the Mobile Design Book that was released last year. It was a fun way to really dive deeper into the mobile design and have some fun producing the book and improving numerous of skills while writing it.

Break Things Down

Mark Zuckerberg, co-founder and CEO of Facebook, believes that you need to experience breaking things to move forward.

“Moving fast enables us to build more things and learn faster. However, as most companies grow, they slow down too much because they’re more afraid of making mistakes than they are of losing opportunities by moving too slowly. We have a saying: ‘Move fast and break things.’ The idea is that if you never break anything, you’re probably not moving fast enough.”

To really understand the design process you need to break it down to the smallest pieces and get to the essentials and then try to recreate it your way. Design community is incredibly friendly and open to sharing the what’s, how’s and why’s of design. You can download free project files for image editing software like Adobe Photoshop, Sketch, Illustrator or any other.

When you’re trying to break things down, look at the big picture and then take it detail by detail, developing analytical thinking will allow you to be more organized and structured in your future work. Take an example you want to recreate and do everything to mimic it so you get to understand how it was built, other than that download free files and analyze the structure, techniques used and rules applied.

Tips to Use Color in Web Design

The current landscape of color in website design is interesting to think about. Most websites look more or less the same, yet color can be a powerful tool in design.

I’m not trying to state this as anything revolutionary or as an extraordinary find. But if most websites have similar color schemes, what does that mean for color? Actually, it means a lot. Imagine a world where every website was colorful – it would possibly be very pretty and rainbow-filled but it would mean that nothing stood out. It’s like having every paragraph bolded in your essay.

Therefore, when color schemes are muted, it allows for many opportunities.

Draw Attention to Anything You Want

Most websites start with a basic grayscale look – white background and black text. Color comes in as accents that get you to look places. That’s why websites are not filled with color – they use it to get you to look at the buttons, headlines or links.

Take Vibrant, for instance, when you first land on their home page the background and images are black and white. The logo, call to action and the hamburger menu are bright yellow. They stand out and grab your attention quickly.

Another example is Takeit; when you first land on their home page you’re greeted with a big blue background. However, everything else is white. The big headline that’s front and center is also the center of attention. Shortly after your eye notices the smaller but still noticeable App Store button. And that’s how color can guide a user’s attention.

Create Personality

Color is wonderful because it can set a tone and mood for a website or brand. Beagle is a service for creation project briefs and their site starts of with lighter earth tones. As you scroll down their homepage you view pleasant shades of brown, charcoal, green and even pink. The earthly tones look professional and elegant making for a great impression on behalf of the company.

An Interesting Day is a website designated to “a weird, one-day conference on a tiny island in the Oslofjord.” You most definitely get a sense of weird and different when you red background with red text on top of it. It’s not something we see everyday. It looks great but most importantly the color scheme conveys the “weird” personality of the event clearly.

Make a Grand Statement

Making a statement through color can be really fun. You have to make sure that the color stands out and grabs the attention of the user. That’s easy. But it also has to be a good color choice for the statement being made. You can’t just pick any neon color, it has to make sense for the overall purpose of the page and its look and feel.

Take the landing page for Gaga Symphony. When you land on their site, you’re struck with a bright pink background. It’s not something you’d expect of a symphony. Instead, you’d expect calmer colors as symphonies are considered more elegant. But, not this one. The Gaga Symphony is vibrant, fun and creative. Therefore, the hot pink makes sense.

Provide Cohesion and Flow

Color can also be used to guide a user along with a flow. It’s exactly like guiding a user’s eye like in the above example of Takeit but less drastic. Color can be subtle and there doesn’t need to be dramatic or over the top in order to help guide a user along. It’s especially helpful when the hues are cohesive among each other. It’s basically how brand colors work.

Take Marvel or Dropbox. Both of these apps have great color schemes that are predominantly blue. But you see other colors in their graphics like green, orange or red that fit well together; it’s like they make sense.

These two color schemes help guide users along as they scroll down the pages making for a cohesive and pleasant flow.

A different kind of example is Innovation Project Canvas. They use the color green to guide a user along their page while scrolling. You don’t need many colors in order to create a great looking flow; it’s achievable with a single color as well. Innovation Project Canvas does a great join in guiding the user with just their green.

Color in Images

An interesting trick with color is when you use it through images. UI elements are not the only ones that can add some color to a website. With the rise of photo background and big product photos on landing pages it’s a good idea to try to use the composition of images to bring color to your designs.

CartoDB is an app that help you visual location data. What better way to show off how great their service is than by showing off a beautiful map? That’s exactly what they do at the top of the home page. It’s a brilliant way for their product to speak for themselves while adding visual interest – and color – to the page.

Speaking of product that speak for themselves, ETQ too let’s their shoes outshine their UI. The website is fairly minimal in its style which extends to the color scheme as well. They put focus on merchandise instead. Although not all of their shoes are colorful like the one in the example it still goes a long way to let the shoes be the biggest course of color in their design. It truly allows the shoes to stand out.

How to Start a Web Design Project

There’s a first time for everything — and it’s finally time for your very first web design project! While landing your first gig is a huge accomplishment in itself, keeping your first client happy requires a whole different set of skills. You’re not just a designer — you’re a project manager, and offering a great customer service experience is essential for winning over your clients’ repeat business, so you’ll need to be on target from day one.

But where should you begin? You may not have learned so much project management in school, so we’d like to offer up a few tips. The infographic below outlines every stage of the web design process from start to finish. The first step of a web design project is learning what your client wants: her overall objectives, the purpose of the website, her audience, the features she requires. Remember, this is her project, not yours. You’re here to bring her vision to life — and hopefully, to offer some creative insights that will make the website even better than she imagined.

You’ll need to know your client’s goals up front, because that’s how you’ll determine budget. Next, outline budget and timeline in a written agreement. This agreement holds your client to her side of the contract, but holds you accountable, too.

So you’ve set expectations up front — great! Now you need to do a little research. Part of your job is determining the best possible user experience for the site, and that usually means creating user personas to determine how to meet the needs of target users. Every great website serves a purpose and facilitates that purpose to the greatest degree possible, so that’s what you’ll want to deliver! At least, we think you do.

The wireframe that results from all this research and planning helps to make your plans clear to your client. Managing your client’s wireframe feedback can be challenging, but here’s a rule of thumb: if she makes a suggestion that you think will hurt the aesthetic or functionality of the site, push back in a polite and professional manner — after all, the client isn’t just paying for your skills, she’s paying for your training and expertise. But in the end, this is her website, not yours. Balance your professional opinions with the demands of your client and you’ll make it through this stage unscathed.

Now it’s time for the coding — your favorite part! But once all the coding is done, don’t forget to run diagnostics and check for browser compatibility. Turning in an untested site is one sure way to look unprofessional in your client’s eyes.

When you were in school, you probably thought the coding would be the hardest part of your future profession, but managing a project can be just as challenging. Luckily, keeping your clients happy can also be the greatest reward of a site well-built.

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.

Why Designers and Web Developers Must Work Together

It seems like a common sense idea: Designers and developers must work together.

But too often, these individuals work apart while working on the very same project. The designer works to create elements and color palettes and typography that looks great, while the developer codes and prepares the material for web publishing. And this can cause discord between the designer and web developer and in the final design itself.

If designers and developers work together on projects from start to finish, the result is a more cohesive web project with great aesthetics, user interface and clean code. There is less work and rework during the collaborative process, hopefully resulting in a project that can be completed in less time.

Designer vs. Developer

aTypically web designers use graphic design software such as Adobe Photoshop and Illustrator to create what websites and elements will look like. This aesthetic is then coded using HTML, Javascript, jQuery, CSS and other programming languages by a web developer to make everything work on the web.

While designers and developers may often work from separate rooms or even countries, each needs the skills of the other to create a complete website. So they have to work together.

Pros of Working Together

Simply, the biggest reason that designers and developers should work together is to create a more complete web project. From the look to interactions to experience, the project will only bet better when designers and developers collaborate. (And it’s almost impossible not to these days.)

And while we are talking about designers and developers working together, don’t forget to invite interaction designers to the party as well.

Collaboration plenty of other benefits:

  • A second set of eyes to look everything over and find flaws or mistakes
  • More creative brainstorming and design
  • A more complete experience, because designers can understand what the developer is capable of creating
  • A more cohesive finished product, where all the parts look like they belong and interactions fit the aesthetic
  • You’ll learn something about how design/development works
  • Merges ideas for a more rounded vision of what a project is supposed to be
  • Fosters focus on the mission and goals of the design project

Cons of Working Together

While I’d like to say there are not any cons to working together, that would be naïve.

There are not many downsides to collaboration. But there are two things to consider:

  1. There can be some costs associated with having everyone getting together at the same time, especially if workers aren’t typically in the same location. Use tools for teleconferencing and online sharing to communicate when you can’t get everyone in the same room at the same time.
  2. Sometimes people will disagree or just won’t get along. But we’re all grown-ups, right? We can work through it.

Things You Can Do

Now that you are thinking about all the reasons why you should work with a designer or developer, how can you put it into action? It starts with clear communication.

Web designers and web developers have to put the project first and think about the big picture during the process and as decisions are made. Understand that you will win some and lose some fights along the way.

The best place to start is by taking your co- designer or developer our to lunch, or coffee or for a walk. Get to know him or her and their style before you draw the first sketch or wireframe. Talk about how you plan to work together as a team and set some ground rules.

Everyone involved in the project should make a point to check in with everyone else often (maybe even schedule it in to the project calendar) to make sure that everyone is on task and on time. Remember to be nice; offer constructive criticism and be open to feedback from others. And be open to the fact that you are going to learn new things along the way, be appreciative of that.

5 Tips for Designers

  • Explain design theory in a simple manner to help developers understand where the aesthetic is coming from.
  • Consider interactive elements as you design, and how they will work. Make sure all parts are designed for al stages of interactivity.
  • Design completely. Don’t expect a developer to copy and edit like parts. Create element for every state and have it ready.
  • Ask for help along the way. If you are not sure if a specific font will work on a website, ask.
  • Provide design elements in usable file formats and at the appropriate resolution and size for web use.

5 Tips for Developers

  • Learn about design. Knowing a little theory in terms of color and type and even the lingo can go a long way.
  • Be upfront about what you can and can’t do. If a designer is going down a road that is not going to translate on the web, say something sooner rather than later.
  • Be available to answer questions and help during the design process.
  • Get involved in the process from the start. Help brainstorm design ideas that will work with the UX.
  • Maintain the integrity of the design – even parts you don’t like or agree with – in the development process. You will only make enemies by changing things visually without a “development” purpose.

One of the greatest bits of advice for designers and developers is not all that new, but is still relevant. The “Manifesto for Agile Software Development” highlights four principles that all web designers, web developers and interaction designers should live by.

  1. Individuals and interactions over processes and tools
  2. Working software over comprehensive documentation
  3. Customer collaboration over contract negotiation
  4. Responding to change over following a plan

Skills Everyone Can Benefit From

Skills

To help bridge the gap between designers and developers and to better work in concert, both types of web professionals need to speak the language of the other. Designers and developers should start to expand their skillsets.

Every designer and developer should have a basic understanding and knowledge of:

  • Design principles, such as color, space and typography
  • Optimal image formats and sizing
  • Basic understanding of HTML and CSS
  • Use of web fonts
  • Trends in design and development
  • Understanding of user wants and needs
  • Grids, framework and wireframing

Conclusion

The question really starts to become less about why designers and developers should work together, but how they can better work and understand the duties of the other. At the end of the day both jobs have a singular goal: To create a phenomenal website.

The thing we really need to start thinking about is designing development. Because the reality is that all development is design and web design is development. You can’t have one without the other, and as web design becomes increasingly complicated this will become even more true. So maybe what we need is a new job description or title that shows that web designers and developers are linked.

5 Ways Creative Web Designers Work on Awesome Websites

An awesome website created by a talented and creative web designer is a thing to behold. Websites like these, set the bar so high that even approaching that level of craftsmanship seems out of reach. It sometimes seems that this task requires a level of creativity we have yet to achieve.

Like many other things in life, it’s doable. It may take years of training, and involve a fair share of sweat and tears but, — it is doable.

Yet, there are ways that you can reach that level of craftsmanship more quickly. And one of them is with the help of a state of the art creative design tool like this highly flexible WordPress theme.

Let’s see how creative web designers work their magic

What are some of the key characteristics top-tier creative designers have in common? Here are five of the more common ones:

1. They work with concepts – and not just with design techniques

Coming up with great conceptual designs takes research, experience, and digging into what other creatives achieved. Success comes when you are able to take a concept, and bend it into something that offers a realistic solution to a client’s brief.

This visual concept was created by a skilled web designer using Uncode WP theme as a starting point.

In the example above, that looks easy-going with a playful twist, the relationship between the headline and the visual provides a grand introduction.

2. Creatives keep their head in the clouds, but their feet firmly on the ground

Creativity involves thinking outside the box. The visions and ideas you come up with have produce practical outcomes. Creatives are able to tailor their ideas to the extent that the websites they build exhibit top performance.

Top creative designers never neglect the UX. Uncode, the creatives’ WordPress theme created by the Undsgn team is a valuable tool. Here’s an example. Uncode’s unique and original adaptive image feature automatically delivers a re-scaled version of your pages to different screen sizes.

Another example: Instead of the longer response time associated with serial requests, the creative Undsgn folks incorporated an innovative solution.

Am asynchronous response approach that enables the browser to download multiple images simultaneously. Creative designers are always looking for solutions, and the Uncode team brings a host of creative solutions to the table.

3. Creative designers mix techniques in with styles and trends, without sacrificing visual coherency

Learning what’s the latest and greatest is an essential part of being a good web designer. To be a creative designer, you have to learn and practice the art of blending and mixing different trends and styles.

This is an example of an effective mix – from the Uncode showcase.

The mix is subtle, but impressive. This showcase example provides insight into how a creative web designer achieved coherency. And spiced it up a bit in the process.

4. Creative web designers select tool that satisfy their need for perfection

A tool that is does not allow you to create pixel-perfect designs can be a source of frustration. Creative people, like you, strive to implement their ideas to perfection. If you can imagine it, your WP theme should enable you to build it.

Take a concept like this one. With the help of Uncode’s extraordinary flexibility, you can customize to your heart’s content. And you can create a beautiful, completely original layout.

5. Think out of the box, but into the brief at the same time

Sometimes, there is a tension between the client’s perspective and the creative designer’s vision. You want to transform a great visual idea into reality. A good creative is able to think outside the box. At the same time he or she can show a perfect respect for the requirements outlined in the brief.

An example of a brief well solved.

Uncode’s concept was the starting point for this website. The visual experience arising from these concepts creates a visual world around the product. And ir provides the user with information relevant to the product.

Discover more about Uncode – the theme dedicated to creative web designers

The beauty of having a flexible theme to work with is you can create a universe of original amazing websites. All are coming from a similar starting point, but are different.

You can compare a flexible theme’s concept to a mind map’s central image. Using it as a source of inspiration, you can go out in many different directions to create award winning websites.

Uncode has some awesome starting concepts.

“There isn’t anything you can’t do with it.”

“The theme itself is extremely flexible – there isn’t anything you can’t do with it. Seems you are only limited by your imagination.” mecan, ThemeForest user

It takes a highly flexible, customizable theme to meet the creative, idea generating mind. This is how Uncode does it:

  • An Advanced Grid System. With design options that allow you to push your layouts to the cutting edge
  • Unsurpassed flexibility. 30+ homepage concepts to mix, match, or combine
  • Adaptive Images. It detects a visitor’s screen size, and delivers a re-scaled version of the page.

 “I purchased the Uncode theme a couple of weeks ago, and I’m amazed at how detail-oriented and responsive the guys who created this theme are. They clearly value customizability, flexibility and high quality design. Thumbs up!” Olivier Berton, ThemeForest user.

An improved Visual Composer. This popular page builder has been enhanced. It has extra, advanced, functionalities and a clean, organized skin.