Monthly Archives: February 2017
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.