Category Archives: web design
To make it easier for you — and perhaps to let you know that you’re not alone — here is a roundup of the most common interaction design misconceptions.
1. Overwhelmed with Innovation
Web designers are a creative lot. We want to express ourselves through our work. We’re always looking for innovative ways to make designs stand out. However, when it comes to IxD, innovation doesn’t always work for good. It might even be bad for your site. Users crave familiarity and often they are tuned in to certain ways of operation.
Randy J. Hunt, Etsy’s Creative Director and author of Product Design for the Web, put it clearly: “Hey, designers: stop trying to be so damned clever.” In this article, he explains in greater detail why you should not go overboard with innovation in designing for the web.
Take the Iotorama website,for example. It looks beautiful, the music is soulful, but with with all those balls moving, the user is left wondering what to do. Don’t get me wrong, the project is fantastic and super-creative! I liked the gamification idea, but it’s far from intuitive.
Here’s another example. The guys behind the Safety on the Slopes project came up with a neat interactive webgraphic that informs users about the dangers of winter sports. It’s innovative and at the same time intuitive, immersive and fun.
2. Confusing Navigation
The “don’t be too clever” rule stills over to navigation as well. Some designers attempt to be original by experimenting with eclectic names for pages. For example, the Chijoff website leaves users wondering what exactly they deliver and how to hire them. It takes a bit of browsing to figure that the “Co-Create” page is supposed to be the equivalent of “Services.” And even then, after reading through the whole page, the user is still left wondering what to do … the end of the page has a small form to sign up for the latest industry news and tips! There is no form on the “Contact” page either, only postal and email addresses. They just do not make it easy for people to get in touch with them, or hire them.
Can you guess what “Universe” is for on the Maison Margiela website? It actually links to their Facebook page. Who would have thought?
In contrast, check out the legworkstudio’s website. It’s strikingly creative and unusual. The navigation is clear and unambiguous. There’s no chance a user will get lost.
There was a time when websites tried to put everything they possibly could above the fold. Those days are gone, yet many sites still make this mistake. Take this online store:
The designer tried to stick to a simple color scheme, but the sheer number of boxes, logos and fonts in different colors on this page are enough to leave a user reeling. The search bar has catchy “So, what are you wishing for today?” text, but the overall look and feel of the layout is rather outdated.
EBay is the one major online retailer that gets this right. Instead of cramming their website with product images, promotions and multiple calls to action, eBay has kept it clean and simple, highlighting exactly what they want the user to see first, with clear prompts on what to do next.
4. Contrast, Baby!
Compare to this. The color choice is close, but the result is radically different. Plus, the creative scrolling effect smoothly introduces the new amazing product feature — reflective material. Cool, huh?
5. Neglecting Form Styling
Form design is one of the fundamental parts of user experience. Each website has a goal — whether it is to generate leads, directly sell products or provide information. Unfortunately, there are many websites with glossy homepages that prefer to bore users to death with long forms and complicated CAPTCHAs. Unless the users has strong prior motivation, they’ll just leave.
With effective cross-browser solutions like JCF, it’s time to forget about ugly default form elements and move toward a more immersive user experience.
Another irritating thing is when the form is too demanding or not well tested. For example, the sketchybusiness.io form highlights all blank fields, even if they are not required.
If you look at the mostlyserious.io form, you’ll definitely like the hover and active button states. Plus, the “Don’t be shy” note adds a sweet, humorous touch.
Being a UX designer myself, it’s important that we fall back in love with the art of design. Especially when you hit a creative wall.
The reasons vary. Maybe you’ve been working too fast and too hard and burnt out. Maybe you work in a non-creative environment and contend with a lot of resistance each day. Maybe you’ve unknowingly become a repeat performer, putting out the same work over and over again. Or maybe you’re just bored.
Your process should never be so ideal that it can’t change. Every project has limitations. Whether it’s resources or skills, your design process must adapt to all these real-life constraints.
Here’s 7 tips for improving your own design process based on what I’ve experienced in my own career.
1. Define the problem before hunting for solutions
Einstein once said, “If I had an hour to solve a problem I’d spend 55 minutes thinking about the problem and 5 minutes thinking about solutions.”
Many designers make a fatal flaw in thinking problems are obvious. Most of the time obvious problems are merely symptoms of the real problem. You will know when you’ve found the real problem because it will eliminate a lot of other issues at the same time.
As described in the free e-book Web UI Best Practices, start all your design projects with the “How Might We…” approach of design thinking. Remember that before you design the product correctly, you first need to ensure you’re designing the correct product.
2. Know your user like the back of your hand
A developer once told me she was building a product for “everybody”. That might sound reasonable for a mass market product, but you can’t create meaningful use cases if you can’t pinpoint a specific user.
Without meaningful use cases, it’s hard to know what your MVP (minimum viable product) needs to be or how to create a strategic product plan. All great products strive to solve a handful of problems as simply as possible, in a way that’s easily understood by the people who need it.
Conduct user research, create personas, and start mapping out user scenarios and flows. Anything that puts you deeper into the mind of the user is an investment in successful design.
3. Consider extreme solutions to the problem
Part of the fun in designing is going a little off the deep end with ideas. Celebrate the opportunity to think big.
Break conventions just for the sake of it. Think beyond a single device. Storyboard a day in the life of a user and see where all the possible touchpoints could occur. Bust out the markers and crayons. Do whatever inspires you to think unconventionally.
Don’t spend weeks (unless you can afford the time) but take a creative pause to connect your unconscious mind to the problem you need to solve.
Take a look at Duolingo. The app feels more like a smartphone game than a language learning platform. It’s completely unconventional and might sound questionable on paper, but the proof is in the numbers – the company is valued at $470M by Google Capital as of June 2015.
Seek inspiration outside of your immediate industry, and you’d be surprised by how effective (and creative) your design solutions become.
4. Establish a hypothesis to test before you design
A hypothesis introduces a way to seek truth. Every design has a foundation grounded by something strong enough to build upon.
Think of it like an essay’s thesis statement. It is the heart of the design. And it’s where your use cases come into play far ahead of development work.
Brainstorm as many scenarios as possible and whiteboard with your team. Run adesign studio exercise in which participants sketch their solutions for how to complete specific tasks. You should always explore (and iterate) your hypothesis as one of the first steps in design.
For a useful framework, check out Maximilian Wambach’s (Interaction Designer at Ebay) approach. The “If [action] then [outcome] because [customer need/problem]”mindset is extremely helpful.
5. Collaborate with a diverse group on the best solution
If your design is solid, it should hold up to critique and discussion. A group of people from different backgrounds who possess different experiences will lead you to better solutions.
Consider setting up a Think Tank of stakeholders to share their unique perspectives on how your design can be improved. Work with your design manager to ensure that the product team still has the final say, otherwise you fall into the trap of design-by-committee.
6. Create a story with documentation
Produce documentation that tells a story. Your personas are the cast of characters. Your use cases are key parts of the screen play. Your wireframes are the stage. Your process flows and user flows are the choreography. Your UI kit is the set design.
Everything relates and feeds into each other.
Many times documentation is ignored because it lacks context. Think of your design assets and artifacts as puzzle pieces. On their own the pieces have little value, but put together they build a picture that tells a story.
Don’t get tunnel vision and obsess over perfecting one design document. Instead, make sure the relationships between each design stage is easily understood.
Minimize documentation that doesn’t move the design forward. If your documentation isn’t usable, there’s no reason to create it.
7. Design and test on paper
Rapid paper prototyping can be done at any stage and always helps inform design decisions.
Give yourself or a group a set amount of time to quickly iterate ideas. It’s very easy to become attached to a design once it’s move into pixel form. Sketching and prototyping on paper, however, keeps your mind searching for possibilities.
Draw out sketches for the sake of exploring your own ideas, then run a quick hallway usability test with 3-5 people.
As soon as you come up with a design you think is solid, start testing it by conducting a virtual walk-through. Talk through the different use cases with a partner so you can help each other notice any gaps or potential flaws. Once your partner understands how the design works, they can act as the “human computer” for operating the paper prototype during usability testing.
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.
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.
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.
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.
Set yourself free. Get into a mindset that everything you create is an experiment. This simple shift will help you to take criticism easier and be more courageous to try new things while not being afraid of failing. If you treat your work as an experiment you can’t be wrong because experiment succeeds or fails, not you.
“I have not failed. I’ve just found 10,000 ways that won’t work.” – Thomas A. Edison
As a designer, it is important to regularly invest in yourself by playing around with the technology and tools you use. There are already many initiatives which showcase what is possible and without these experiments design wouldn’t be progressing so quickly.
Check out a gallery of Experimental Websites, browse through Behance’s experimental work to get some inspiration and courage to try something unorthodox.
“Steal Like an Artist”
Everything is a remix. You’re a mashup of everything you consume so if you surround yourself with things you want to absorb you eventually become more creative. You shouldn’t be ashamed of stealing great ideas, but there is a right way to steal; Austin Kleon wrote a book about it.
You have a unique set of values that filter your thoughts, experiences and ideas that come in and then you produce something of your own. So if you study different designers and their work you filter everything and produce work that is authentic and reflects you and your perspective.
“In the end, merely imitating your heroes is not flattering them. Transforming their work into something of your own is how you flatter them. Adding something to the world that only you can add.”
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.
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.
Who Needs Color Anyway?
It’s interesting to see websites without color, too. Sometimes you don’t need it. Websites can still be gorgeous without reds, greens or blues. Grayscale color schemes can create the necessary look and feel for a brand as well as make a statement.
Visual Soldiers does just fine, sans colors, just like Tomasz Wysocki’s portfolio. Both sites have a certain elegance to them. They grab your attention because of an overall lack of color. You’re looking for some slight hint of blue or green on a CTA or a link but it’s not there. And that’s okay. The lack of color is part of these two site’s brand. They both are stylish and look great in just black and white.
The new year will come with plenty of new techniques and trends, but the dominant theme is likely to be a continuation of things we have started to see at the end of 2015. More video, vertical patterns, Material Design-inspired interfaces and slide-style sites will grow in popularity.
And it’s not hard for you to make the most of these concepts. Here, we’ll ring in the new year with 11 web design trends (and plenty of great examples) that designers will be seeing a lot of in 2016. (Make sure to click the links as well and play around with some of these sites to really get a feel for them. Many of the trends are just as much in the user interface as the visuals.)
2016 Web Design Trends
Vertical Patterns and Scrolling
A bigger leaning toward mobile – with some thinking mobile traffic could equal desktop traffic this year – means more sites are being designed with vertical user flows.
A few years ago, we were all debating the end of the scroll in web design only to find it roaring back as an important inzeraction tool. Smaller screens lead users to scroll more and designers to create user interfaces that are much more vertical in nature.
More Card-Style Interfaces
One of the biggest elements to spring from Material Design has been the emergence of card-style interfaces. They are in everything from apps to websites to printed pieces. Cards are fun to create, keep information organized in a user-friendly container and are engaging for users. The other bonus is that they work almost seamlessly across devices because cards can “stack” across or down the screen (or both).
Hero Video Headers (Think Movie-Style Sites)
Websites design is going to the movies. Higher speed Internet connections and better video plugin integration is making it easier for more websites to include an immersive movie-style experience. Video clips are growing from small snippets to almost full-length preview clips. The images are sharp, crisp and in high definition, creating a video experience online that is new to users, but familiar from other devices, such as televisions.
Animation has been one of the “it” trends of 2015. From hero-style animations that lead off a site design to those tiny divots that you almost miss, moving elements are everywhere. And they will continue to grow in popularity, even as they decrease in size.Animated user interface elements are a fun way to help engage users, give them something while they wait for content to load and provide an element of surprise.
Focus on Interactions
Going hand-in-hand with animation is interaction. As the staple of apps and mobile interfaces, interactions create links between users and devices. Good interactions are often small – even micro in nature – and provide value to the user. From the simplest of alarms to a text message to a blip that it is your turn in a game, these small interactions shape how people interact with devices (and how loyal they are to associated websites and apps).
Even More Beautiful Typography
Streamlined interfaces have paved the way for the emergence of beautiful typography. (As has the addition of more usable web type tools such as Google Fonts and Adobe Typekit as mainstream options for creating expansive type libraries online.)
Big, bold typefaces will continue to rule because they work well with other trendy elements. This simple concept of lettering gives more room to other elements, while communicating the message with a highly readable display. The must-try trick is a simple pairing of a readable typeface and fun novelty option.
Illustrations and Sketches
Illustrations and sketches bring a fun element of whimsy to a site design. They can work for sites of all types and aren’t just for children anymore. The illustration style has also started to grow in popularity when it comes to some of the smaller pieces of website design as well, such as icons and other user interface elements. What’s nice about this trend is that illustrations make a site feel a little more personal. Because an illustration or sketch style icon appears to be hand-drawn, it looks and feels personal for users. That can go a long way into creating a connection with them.
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.
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.
The task of prototyping a website is an extensive process of creating a basic wireframe with interactive features. While a wireframe may be static images or sketches, a prototype is often interactive with functionality for all the major pages.
Graphic editing programs have always been the most popular choice for prototyping. But in recent years more developers are switching to in-browser prototyping. It’s much faster, cleaner, and simpler when constructing a brand new project. But how do you get started?
In this post I’d like to cover the basics of prototyping in the browser and give you some tools to help you along the way.
Basics of In-Browser Prototyping
Websites can be described as digital interfaces built to run in a web browser. Many designers like to create these interfaces in graphics editors before moving on to coding.
But it makes more sense to prototype websites in a browser to see how each feature works, and to gauge initial concepts like layout structure and page animations.
There is no single best way to prototype although most designers have their own routines for getting started on a new project. Many designers still prefer to start in Photoshop, but starting in the browser has many advantages.
- Easier to test & change grid systems
- Breakpoints can be added on a whim
- Dynamic effects like dropdown menus can be tested live
- You start with a small codebase and slowly add more as you go
Photoshop doesn’t allow you to dynamically interact with a mockup. This is also true for responsive breakpoints where you’d need to create individual documents or layer groups for breakpoints.
Ultimately browser prototypes are a more accurate representation of the final interface. Mockups and sketches are flat and static. These are still valuable assets, but eventually you’ll need an interactive layout. This is why browser prototyping saves a lot of time.
You can jump right from initial sketches into the browser to create interactive web prototypes with all the major features you need in the final version.
The tools used to achieve a prototype will vary greatly. But don’t mistake the tools for the process.
You can prototype in the browser using raw HTML/CSS, open source libraries, or other tools like browser add-ons. No matter what you use the goal is always the same: to create a bare-bones interactive UI which models how the final website will behave.
The Prototyping Process
I think it’s always best to start with paper sketches for rendering ideas. These sketches could be done in a graphics program, but you generally have more freedom when working on paper.
Quickly iterate new ideas and just get a rough feel for the design. You might indicate columns, gutters, and make written notes to describe container properties(width, padding, etc).
Once the sketches look good you can move into the browser. Aim to design a basic grayscale layout first. This can be done with many different resources like Placehold.itwhich generates raw grey images of any size.
With a simple grey layout you can focus more on grids, typography, white space, and dynamic elements like slideshows or dropdown menus. The purpose of this stage is to design how the layout should behave without getting distracted by aesthetics.
You want to iron out all potential kinks with browser bugs and responsive breakpoints. Get the whole layout working and functional across all browsers.
From there you can quickly add content, images, and other related styles without worrying about the bigger picture. This is absolutely the best strategy for in-browser prototyping because you’re focusing on big elements first.
If the layout breaks in Firefox it’ll look the same whether you have colors or not. But it’s a lot easier to fix layout problems when you’re only concerned with the layout.
Once you have a fully functional prototype you’ll have a much easier time coding ancillary features like background patterns, tiles, icons, and other similar features.
There’s a lot to consider in this prototyping phase. Each project will have its own goals, but here’s a quick list of objectives to consider while prototyping.
- Does the layout work in all major browsers?
- Is there enough white space between elements?
- Do all dynamic page elements function properly?
- Have you setup all the necessary responsive breakpoints?
In-Browser Prototyping Tools
It’s important to note you really don’t need any special tools or libraries to build browser prototypes. You can write generic HTML/CSS/JS code and get a working prototype ready quickly.
You should feel free to use whatever resources you’re comfortable with. But if you’re looking for new tools I would highly recommend the following options. All of them are completely free and super easy to add into the prototyping phase.
There’s a nifty little feature in Google Chrome DevTools called Workspaces. These are local directories on your disk which can be tied to the browser while editing.
If you make a simple HTML/CSS prototype and open it in chrome, you’ll be able to make edits in the DevTools panel. By creating a Workspace you can save those in-browser edits locally to the file on your computer. You can also create new files and duplicate code locally in Chrome.
Most developers already use DevTools so this is a great way to literally prototype in the browser. Check out this brief tutorial to setup a workspace in Chrome.
Every frontend developer should know about the Bootstrap library. It comes with pre-built components and CSS classes for every page element you could imagine.
You get buttons, columns, tab widgets, dropdown menus, and a bunch of other common website features. There’s no need to write anything from scratch because Bootstrap covers it all.
The only downside is that so many websites have this generic Bootstrap look that it has become somewhat boring. If you’re willing to overwrite Bootstrap with your own custom styles then this is a great prototyping library.
One other very popular option is ZURB’s Foundation. I think Foundation is much cleaner and simpler than Bootstrap, only because it doesn’t have many default styles.
Foundation is very easy to overwrite with your own styles for buttons, text, links, and widgets. Bootstrap is often used in projects that stick with the generic Bootstrap style. But Foundation is so basic that you’ll almost need to add custom styles.
And as far as functionality I cannot think of anything better than Foundation. It’s a powerful framework that comes with all the same major components as Bootstrap, but without unique styles.
One other CSS/JS framework I want to recommend is Pure CSS. It’s open source just like Foundation and Bootstrap. It comes with grids, typography, buttons, and dynamic components as well.
I think Pure is a nice mix of functionality and aesthetics. It is definitely on the simpler side, but it’s perfect for any prototype and it offers just as many features in one condensed library.
Interaction design is a process in which designers focus on creating engaging web interfaces with logical and thought out behaviors and actions. Successful interactive design uses technology and principles of good communication to create desired user experiences.
Interaction design in terms of websites and apps is something we have been talking about for 10 years or so, but those bigger conversations and much never. One of the best and most cited introductions to the concept was published by Bob Baxley in 2002 in a 12-part series that defined interaction design for web applications.
“Introducing Interaction Design” breaks the field into five pieces that are still useful and relevant today:
- Human/machine communication is the translation of conversations between the device and user.
- Action/reaction looks at how interactions happen and unfold.
- State ensures that users know what is happening and why in terms of the application.
- Workflow ensures that users know who to use a tool or application and what happens next.
- Malfunction takes into account mistakes that are bound to happen.
Further, there are certain considerations to keep in mind when creating design interactions. Usability.gov offers basic questions in six different categories that can help shape how the design comes together.
- What can a user do with their mouse, finger or stylus to directly interact with the interface?
- What commands can a user give to interact with the interface?
- What about the appearance gives the user a clue about how it functions?
- What information do you provide to let a user know what will happen before they perform an action?
- Are there constraints to help prevent errors?
- Do error messages provide a way for the user to correct the problem?
- What feedback does a user get when an action is performed?
- What is the response time between an action and response?
- Are the interface elements a reasonable size to interact with?
- Are edges and corners strategically being used to locate interactive elements?
- Are you following standards?
- Is information chunked into a few items at a time?
- Is the user end as simple as possible?
- Are familiar formats used?
Role of an Interaction Designer
If you find yourself thinking about or asking the questions in the list above, you are an interaction designer.
An interaction designer is the person on the design, development, creative or marketing team that helps form and create a design strategy, identify key interactions of the product, create prototypes to test concepts and stay current on technology and trends that will impact users.
This may sounds like a lot of different concepts compiled into one fuzzy job description. To make is it simple: Companies hire an interaction designer to make sure their digital applications work and function in the hands of users.
The career paths of interaction designers are varied. Some formal design programs are teaching it. Others come into it from experience or by chance. But one of the common traits of interaction designers are a thirst for how things work, not being afraid to ask questions and an ability to visualize and play with elements and concepts in new ways.
Interaction Design Concepts and Principles
So what really pushes forward the field of interaction design? What makes it different from just design? That line is pretty blurry. We mostly talk about interaction design because it carries weight and focus. But the reality is that interaction design is just one piece of good design in terms of digital, web and application design and development.
The “Complete Beginner’s Guide to Interaction Design”, published by UX Booth in 2009 is still a great reference. While some of the key players and tools have changed the concepts that drive interaction design are the same.
Here’s a look at each of those concepts:
- Goal-driven design: Why does your site or interaction exist? Figure it out and make sure your application does this one thing exceptionally well.
- Interface as magic: You don’t even really see the best interfaces. “The best interaction designs don’t exist: they don’t take a long time to load/respond; they don’t make users think; and they don’t give user’s cause for grief.”
- Usability: “Interfaces which make the state of the underlying system easy to understand and use are favored.”
- Affordances: “The best (industrial/interaction) designs are those that speak for themselves; in which, as the saying goes, form follows function.”
- Learnability: “A great deal of what comprises a usable interface is made up offamiliar components. … The best interaction designers don’t reinvent the wheel every time a similar design challenge comes. Rather, they call upon a set of patterns.”
Interaction Design Showcase
So we can’t talk about interaction design without showing some great examples of work happening around us. Each of the projects or shots below is something that gets to the heart of what this concept s all about. Make sure to visit the links to really learn more about how each of these projects (or shots) came together and work.
How will the web look in virtual reality?
The 2D web could become immersive, interactive and tangible. Imagine Wikipedia as an extensive multimedia library. Instead of reading about the Egyptian pyramids, you could wander around them, explore the inside of the pyramids, view the texture of blocks used to build it or solve a puzzle to gain access to the pharaoh’s tomb. You could even have a virtual guide accompanying you, narrating the history of the pyramids and answering questions. And all this while being accompanied by distinct ambient sound effects and sounds.
What about surfing Amazon, searching for the ultimate wedding dress? You could try them on, see yourself from a 3D perspective. You could create multiple avatars to compare several dresses to could choose the one that fits and have it delivered in one day. Visit a virtual car dealer, test-drive the car, select options, tweak the seat position, see if it suits you and … summon it (Hello Tesla!). Science fiction? Twenty years ago, shopping on the internet was science fiction. Twenty years ago, the idea that you couldwatch the Olympic Games on your VR headset was equivalent to Star Trek’s holodeck.
The hardware to achieve this, while still in infancy, is here. HD cameras, 360-degree cameras, fast graphical processors and VR handsets are the pathfinders to a new era. Expensive, bulky and sluggish at this time, as the rate of adoption will rise, the hardware will get cheaper, smaller and faster.
Microsoft’s Hololens are shipping to developers. Not the developer type? Sony’sPlayStationVR is available for preorder. In a hurry? Oculus Rift can be purchased now for $599. Expensive? Samsung Gear can be ordered for $99. If you already have a Galaxy, you could experience VR at the price of two high-quality cases. Or, if you are extremely budget conscious, Google Cardboard is available starting at $15. You can even build your own.
In fact, you can even browse the virtual web as you are reading this. Open the Janus Browser, and you can experience a very probable future of the web. You’ll have a lot of fun in Janus Reddit section, trust me.
Ready to roll? Head on to MozVr, select one of the 11 showcased projects and prepare to be amazed. (My personal favorite is Inspirit). If you’re still here instead of frantically reading the documentation available on Mozilla Developer Network, then I’ll point you to Vizor.io, where more VR goodies are available. If you happen to have an HTC Vive, you are probably on your first steps to becoming the Picasso of the VR with Mozilla’s A-Painter.
Most of the projects above are based on A-Frame, the open-source WebVR framework for building virtual reality experiences with HTML. Powered by three.js, A-Frame is created to make virtual reality accessible to the web developer and, intrinsically, to jump start the WebVR content ecosystem. A-Frame is made on top of an entity-component-system pattern and integrates with a lot of existing web development frameworks and tools. Being fully extensible if a feature doesn’t exist, you can write a component to enable a missing feature or, if you find a particular component limiting, you can fork it.
In fact, we may never have a virtual web. Unlike games, or entertainment, where VR is more or less bound to happen, a functional virtual reality web is a complex ecosystem. While individual sites could offer an interactive virtual reality version to differentiate themselves from the crowd, the plethora of sites available on the internet will still limit to a 2D version floating in a 3D environment.
And this won’t work. The basic desktop monitor is at 30 to 40 centimeters away from the user. All UI elements are there in front. A slight eye movement is sufficient to focus on the element. In virtual reality, the canvas is the environment. There is no bottom or top of the screen. Moving your head to the left, and you have additional canvas. Look down and the canvas expands. You could artificially establish a frame, where you could align icons or notifications (F22 Raptor anyone?), but this is no longer virtual reality. This is augmented reality. Virtual reality is all about creating an immersive environment.
Instead of a screen in front of us, we can have apps, browsers and even a window to the reality surrounding us. Such an environment is based on depth and scale.
To give you an idea of the canvas in virtual reality, we’ll refer to a passive VR device such as Oculus Rift. According to a paper by Mike Alger, based on useful observations provided by Samsung’s Alex Chu, the main canvas is the field of view when the user is looking straight forward. For example, Oculus Rift’s actual field of view is 94.2 degrees (110 according to specs), close to the 120-degree view of binoculars. Oculus recommends a distance of 0.75 meters to provide a comfortable experience for the basic user. This canvas can be extended 30 degrees from the center with a maximum distance of 55 degrees to the side as a result of head rotation. Upward the canvas can be increased to 20 degrees with a maximum of 60 degrees and, downward with a minimum of 12 degrees with a high of 40 degrees.
The shift to a new paradigm in UI/UX is necessary to avoid the “window” metaphor in VR environments. Developers are adapting the metaphor to suit the needs of basic VR device. On the Samsung Gear VR, the familiar web interface floats in front of your eyes. Head gestures, taps and voice commands are functioning the way we are accustomed to with a traditional keyboard and touch interfaces. And while this is sufficient to sell the consumer the idea of virtual reality, it is not enough to convince the user of the advantages of simulated realities.
Should you invest your time in learning WebVR? Definitely yes. In the immediate future, designers and developers will start including VR features on their websites. Interactive maps, educational tools and visualization tools are elements which could set your website apart and give you an edge on the competition.
Obviously, the traditional web will continue to coexist with VR. Some things are just not practical in VR. While I could read a blog post with a virtual reality handset with SPRITZintegration, I still prefer to actually read it on my iPad. And, while I love my Kindle, I prefer to read a book the old-fashioned way. The smell of typographic ink, the habit of turning pages, the written notes I scribe and the sense of accomplishment after I finish the last page are totally worth it.