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

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.