Tag Archive for: Carrie Cousins

10 Web Design Elements You Can’t Forget

, ,

The best websites are all designed with the unique needs of a business and their customers in mind, but don’t think there isn’t some common ground between them. Web designers have their own process and plan when it comes to making a new site, but they all share some web design elements that simply can’t be left out.

These elements make a site go from boring to exciting and they ensure users are always happy with their online experience. Today, Carrie Cousins shared 10 different parts of a website you can’t neglect if you’re hoping for success.

1. Space

Beatbox Academy

Beatbox Academy

Space is the basis for all web design. Space dictates the flow, readability, mood, and style before you’ve even begun to consider the details of your site. The best designers all have a solid grasp on how to use space and they experiment with space in ways no one else is. Whether designers are playing with the idea of wide open space or creating a more clustered environment, you have to take the time to actively decide how you want to manage space if you want a successful design.

Space also plays a strong role in determining the focus of your page. Any image or text surrounded by open space will automatically seem more important and even larger than a design element crammed next to other aspects fighting for attention.

2. Simple Navigation

Visitors can’t actually use your site if they can’t easily navigate it. Every website should have obvious, easy to use, easily identifiable navigation. Even the most complex sites should be able to be fully explored from a set of five to ten menu items.

Navigation doesn’t always have to come in the form of a menu up at the top. Navigation can also be simply telling your visitors how to use your site, such as adding arrows to a parallax scrolling website.

3. About Us

While it may not be the most exciting part of web design, including an ‘About Us’ page is indescribably important for a smaller business or site owner to tell visitors who they are and what they offer. While it may not be as essential for major companies, you will notice even they tend to include one of these pages.

The trick is to keep it simple. You want to tell visitors enough about your brand and what you bring to the table to interest users, but you don’t want to bore them. This shouldn’t be just a simple template page. It should be kind of like a long-form business card. Short and sweet, but informative, and visually interesting enough to help you stand out without distracting.

4. Contact Information

Without contact information, how are you expecting to get feedback from visitors? Contact information is important for letting your visitors reach out to you, but it also helps validate that you are who you say you are. Nothing makes a site seem sketchy like not being able to find a way to contact a business easily.

To make it easier for users to find and reach out to you, you want your contact information to be highly visible and contain all of the modern ways users might want to connect. A phone number and physical address are absolute musts, but you should consider including social media profiles of yours such as Twitter and obviously an email address is expected for any website.

5. Call to Action

Most websites are created with an objective in mind. Whether you want to make a sale, educate the public, or gather contact information to more thoroughly connect with your audience, there is some goal you are hoping to achieve. A call to action is how you get your users to fulfill your goal, and it should be obvious and strong.

You wan to start out by determining exactly what your objective is, then design it so that action is immediately obvious. Color, contrast, and space are all useful tools for drawing users to the buttons and pages you want.

Even a common signup form is an example of a call to action in web design. The best way to use one of these sigup forms is to place it in a prominent location on the page and make it simple enough to not disuade users from filling it out.

6. Search

It is absolutely shocking how many sites feel they don’t need a search function. Think about all the times you wanted to look up some older information but you weren’t able. Chances are, if you use a site regularly, you will eventually want to search for something, and being stonewalled by a negligent designer can be a real problem.

Implementing search bars is rather common practice, and you all have to do is design that box to be unobtrusive but available. If you want to use an icon, the magnifying glass is accepted shorthand for search, using something else can be confusing.

7. Informational Footer

Many sites use the footer area as a dumping ground for all the information that would otherwise clutter up their site. These unorganized blocks of links aren’t entirely wrong, but they fails to take advantage of the space. Instead, you should try to use the area to communicate a short message or important information in a condensed form, while including those important links in a clear and organized form.

The footer should be simple and streamlined, but it is a good place to include contact information, a small site map, and a selection of important other information. Make it easy to use and understand.

8. Obvious Buttons

It should seem pretty obvious, but every button should look like a button. Pick a visual cue for your site and stick with it so every button is clearly available to users. Not only do you encourage user to click around your site more, but you’ll avoid frustrated users who can’t navigate your page. Using a consistent style is important for web design and branding.

9. High Quality Images

Consider how people are accessing the internet. Smartphones, tablets, and even gaming consoles are all used to browse the web, and most of these have high resolution screens which leave little to the imagination. Users want images to create a visual interest, but you can’t skimp. Low quality images are going to look awful on a ‘Retina’ display. However, with just a few high quality custom images, you can make your site stand out from the crowd.

10. Web Fonts

Just a few years ago, the internet ran on just a few typefaces for everything. They were considered to be the most readable and they solved the issue of making sure every visitor could see text. But, those limitations no longer exist. You can use almost any font you want and you won’t have too many problems.

However there are two reasons web fonts are still important: compatibility and licensing. When you use a web font service, you ensure your search engine optimization won’t be hurt and your site will look consistent on every platform.

/0 Comments

The Drawbacks of Using Design Kits

,

Design Kit Screenshot

In general, web designers seem to like tools and resources that speed up their work and ease some headaches. This is most notable by the sheer number of them available. Nearly every design blog or website offers some unique design kit or has a recent blog post sharing the best recent kits.

You might be asking what a design kit is, but these kits aren’t uniform. They come in all shapes and sizes, varying wildly in scope and cost. They also range in quality from ‘incredibly useful’ to ‘waste of harddrive space.’ The best definition for a design kit is any prepackaged tool or piece of software which aids in the creation of a digital design project.

Some design kits come with interface packs, buttons, and graphics all intended to be used together. They may come with a specific color and font palette, but they are almost always customizable. Some kits are niche designs aimed at solving a specific problem, while others are catch-all assortment or full design templates.

The thing is, while these design kits can definitely help a designer in a time-crunch, they have their fair share of drawbacks, as Carrie Cousins discussed in her recent article for Design Shack.

  • Costs – One of the biggest issues with these kits is they don’t always come cheap. There are some great free kits available, but you should expect to pay for kits filled with premium features. For some budgets, this alone can rule out using a specific design kit. Thankfully most kits are relatively cheap for single license use.
  • Too Similar – Some kits begin to look bland because all of the parts are designed to be used together, but without a full finished design in mind. This can result in kits with 50 nearly identical buttons in an assortment of colors. It is up to the designer to choose parts that will look interesting together, but it can be tiring trying to sort out a repetitive and boring kit.
  • Incomplete Kit – Be careful to read all of the details for any kit before you buy so you know what you’re getting. A 1,000 piece kit may seem really useful and interesting until you discover it is largely made or elements you can’t really use. Many kits are themed and only contain certain types of icons such as social media buttons or calendar icons. Don’t spend money on something that doesn’t offer what you need.
  • Looks Too Much Like Another Site – Obviously the biggest problem with using pre-made tools and elements is eventually you’re site will look astonishingly like someone else’s who also used the tool. Many designers aspire to work solely from scratch specifically to avoid this problem, but you don’t have to completely swear off design kits to be original. Use the kit as a starting point. If you use all the elements and layouts as they came, you’re much more likely to look like any other site. If you spend the time to give these elements your own personal touch, you’ll look equally unique.
/0 Comments

Oversized Layouts: Why Designers Are Going Big

,

Risk Everything

 

For much of the history of the internet, one of the biggest guiding pressures was to fit as much content into the immediately visible area of the page while also providing an aesthetically pleasant view. The focus on “above-the-fold” design meant most sites generally have a header taking up 20-30 percent of the screen, including navigation, with content immediately available below. But, these days many designers are eschewing the old ways in favor of going big.

Many web designers are using oversized layouts with large, gorgeous images and videos, and luscious typography to immediately catch visitors’ attention. They make a statement immediately, and encourage users to begin interacting with the site. By opening the composition of your page and expanding everything, you push users to take in the sight and then start scrolling to see more, especially when combined with parallax scrolling and effects. As Carrie Cousins explains, “because the design is divided into screens that are unique, having something supersize on each is a great way to keep users interacting with the content.”

These types of websites also show that the designer or brand pushes past the standard for something more. Rather than relying on stock images, these oversized layouts are based on unique and visually exciting imagery. You get to showcase great visuals, which then showcase your own work.

The copy on your page also gets more attention on oversized layouts. There are less huge blocks of text to overstimulate the user at once, while the impressive layout draws attention to the text. Oversized layouts also allow designers to increase the size of text, demanding the attention of viewers. This is all bolstered by the use of quality typography which is allowed to standout on these types of layouts.

Cousins has a few other tips which will help designers play with the new larger possibilities of web design. While many clients may call for something more traditional, some projects allow you to expand your abilities and demand more of viewers while rewarding them with a gratifying user experience.

/0 Comments

The Downsides of Flat Design

,

Flat Design Example

 

Flat design is undoubtedly one of the most popular design trends of the moment. You’ll find it online, on your phone, and it is even starting to make its way off the screen and onto posters and physical designs. It has already spit off into sub-categories of flat design like the so called “almost flat design” Apple is employing in their new iOS and the newly popular long shadow design.

But, the design style isn’t perfect. None are. The trendy style has numerous things it achieves very well, but there are far too many people glancing over the more problematic side of using flat design. Carrie Cousins wrote about the pros and cons of flat design, but plenty of people are willing to sell you on the upside of flat design. Today, I wanted to focus on the drawbacks.

It’s Trendy – While being trendy can be a positive – no one wants to be falling behind – you also have to be aware that flat design won’t last forever. As we’ve seen with the splintering into new iterations like long shadow design, the trends are already moving away from completely flat design, and there is no way of knowing when it will suddenly seem out of date entirely.

Usability – The simplification that lies underneath flat design can cause usability problems. Flat design can streamline a site, but it can also cause users to feel confused by the minimalistic interface. Many say they don’t know where they are supposed to click or tap, because the style does not do a good job defining what is and isn’t clickable.

Typography – Great typography looks absolutely marvelous in flat design, but boy does the style make it noticeable when typography is weak. Just look at iOS 7. The initial unveiling used an insanely thin typeface which many complained about. With layouts as simple as these, the eyes immediately go towards problem areas, and there is less to hide any flaws. If you aren’t great with fonts, you might ask for help or consider another style.

Too Simple – Not every site needs minimalism. The reason you haven’t seen flat design on many news sites is that the style isn’t good at conveying large amounts of information visually or textually. The style demands short phrases, impactful concise words, and full paragraphs just don’t tend to fit. The style of your site should entirely depend on the needs of your site. If you fill like you’re having to cut too much to fit into the trend, you should choose another design solution.

/0 Comments

The Most Important Printing Terms for Web Designers

,

Large Format PrinterChances are no matter what medium you work in, you consider yourself a designer. Not a web designer, or a print designer, but simply a designer. It is increasingly rare to find a designer that restricts themselves to a specific medium. Why should they when they have almost limitless possibilities for matching their design to the best medium?

The biggest distinction that still lies between digital and print design is the language. Every medium has its own technical jargon, and as a designer it is important for you to understand and be able to speak the language. Even if you think you don’t, Carrie Cousins points out there is a good probability that at some point a client will ask for print components to go with the website. Eventually a client will want to be able to put part of the design onto posters, or business cards, or pamphlets.

You don’t want to be caught off guard and look amateurish in that scenario, and getting informed isn’t difficult. All you need to do is add some new words to your vocabulary. Design Shack put together a list of the ten most important terms. I’ve explained some of them below, but there are always more terms you could learn to be a more rounded designer.

1) DPI

Dots per inch is a literal measure of printing quality. Many traditional printing methods still being used today work by creating tiny dots to create an image. The more dots used per square inch, the higher quality and accuracy of the detail. Most print jobs use 300 or 600 DPI, but lighter papers require lower DPI to prevent color bleed and over saturation.

Many programs include settings to increase or decrease DPI, but the settings only refer to print design. Increasing the DPI will increase a file size, but it means absolutely nothing to digital projects because screen resolution is measured using pixels, not DPI. DPI can improve the quality of printing, but it doesn’t intrinsically affect the quality or size of an image.

2) CMYK

Digital designers are familiar with the RGB color profile, but printing uses a CMYK color model. The CMYK model refers ro a four-color (or plate) process of printing where each letter refers to a color used in the process: Cyan, Magenta, Yellow, and Black (K equals black).

This means any design you create on a computer for a print design needs to be created with CMYK profiles so that the color is accurately reproduced. Many printers will even require that a job be converted before being submitted. Above all it creates consistency across all print jobs.

3) Large Format

Large format refers to any project that needs to be printed on a specialty printer, usually larger than 16 by 20 inches. Usually these types of print jobs are for banners, posters, and sometimes billboards. These types of projects are also made to be viewed from afar, and are usually rather low quality or pixelated up close. From a distance however, they look great. It does require a high quality image to print these projects, but they also tend to be printed at lower DPI.

4) Pantone Color

Pantone is the worldwide standard for color. The company has been around since 1963, and they have established a universal system for understanding and matching colors created by mixing a set of standard colors in precise combinations. This way, they can be precisely printed across different presses and substrates.

The colors are identified by number, but what sets the system apart is the detail they take into consideration. They include information on how to account for different types of paper based on a lettering system.

5) Overprint

Overprint is exactly what it sounds like; it is the process of printing on top of other things. Specifically overprint is when inks are printed directly on top of each other. The effect ca be used to create special effects, but it can also create issues during the printing process if not taken account for. The most common issue is the use of pure black, which can become richer when overprinted, and tends to overwhelm images. Instead, it is suggested to use rich black created with all four color plates to prevent overprinting.

/0 Comments

What are Dominant and Recessive Colors?

,

Color Wheel

 

Have you ever seen the old “optical illusion” that makes one color appear to be two entirely different colors? If you’ll excuse the MS Paint quality image (is there a rule that all optical illusions have to have been designed before 1997?) the one below makes two spirals appear to be blue and green, when the stripes making the spirals are actually the same color. Its the same principle at play as when you look at a color in a design and it just doesn’t seem to work right. When placed next to specific hues, certain colors can take on the visual characteristics of their neighboring color. Making this even more tricky, the human eye perceives color in different ways depending on if it is in the background or foreground.

Optical Illusion

 

The specific colors that can take on other characteristics are referred to as recessive colors, while those who always look the same are called dominant colors. Many pure colors such as cyan maintain their hue even when mixed or paired with other colors. No matter what color is mixed with a dominant color, the original color will still remain at least partially visible.

Dominant colors also tend to “push through” the design, or powerfully assert themselves within the composition. While recessive colors easily fade into the background, it is hard to make a dominant color sit far in the background. Pure hues are naturally dominant, though primary colors are more dominant than the others, because red, blue, and yellow literally can’t be created by mixing other colors.

Recessive colors, on the other hand, naturally fade into the background. They also easily take on the properties of any surrounding color. Recessive colors act as a neutral in a palette which help the more dominant colors maintain their emphasis and focal attention. As Carrie Cousins puts it, “recessive colors are the blurry or muted tones behind the focal point of an image or the pattern that appears behind something you’re supposed to be looking at.”

Cousins explored the relationships between dominant and recessive colors exhaustively at Design Shack. Not only does she delve into the scientific basis for why we perceive these colors the way we do, she also explains how these ideas can be adapted to design of all kinds, including web design.

/0 Comments

The Typographic Principles of Flat Design

,

Flat Design Text Screenshot

It is no secret that flat design is the biggest trend right now, and it has raised many questions from designers trying to get caught up on the trend. One of the more common questions pertains to fonts, specifically which fonts “work best” with flat design.

Typographic focus in one of the biggest aspects to flat design and the attention to simplicity, so choosing which font you will be working with is an important step. Of course, the main point of good typography of all styles is that it is easy to read and matches the look and style of the page overall, so there is no way to suggest a font that will work in every situation.

However, for flat design you will usually be better off working with very simple fonts and font pairings, as flat design is inherently minimalistic and simple. Whereas past wisdom suggested maxing out at three font pairings per design or page, flat design streamlines it down to two fonts, and sometimes just one.

Because of flat design’s bright color schemes, lettering relies heavily on font weights and clean lines. Designmodo suggests using typefaces with even strokes that contrast against the color palette, and are bold enough to read. You also may want a dash of flair to really bring life to the page.

The trick with flat design is to not fall into boring patterns. The general trend suggests using sans serif typefaces, but it is also possible to work with novelty typefaces as well. The sans serif typefaces are popular for their easy to read nature and great contrast against backgrounds, while serif typefaces come off as formal and against the nature of the simple style, thanks to their usual embellishments.

Novelty typefaces can work well to draw visual interest to areas with bigger text that demands more attention, but it is discouraged to use these for smaller text blocks. Because of this, it is suggested to always choose a second sans serif font if your big text is in a novelty style.

The most forgotten aspect of using text in flat design is that the words you use are just as important as he typeface. Flat design demands simplicity, and overly wordy pages won’t sit within the trend. Use direct language that is brief but effective, and always cut to the point. You don’t need full sentences unless there’s a full paragraph of content. Otherwise, stick to simple word pairings.

There are other serious considerations for designers as well, such as how you use text against color as well as capitalizing on size and space opportunities within flat design. Carrie Cousins discussed those issues earlier this week in her article about typography in flat design, and she even suggested some fonts that lend themselves well to the trend.

/0 Comments

What Is Flat Design, Really?

,

Flat Design WindowsYou’ve no doubt heard about it. All the blogs are talking about it, the big companies are using it, and there has been a visible change on the internet over the past year. Flat design is in, and it appears to be here for the foreseeable future.

Still, unless you’ve been keeping up with the most recent writings about design, it is likely you haven’t even heard of flat design. What does it really mean? Conceptually, the style is all about designing for the screen rather than simulating an increasingly irrelevant physical world.

In the eyes of flat design proponents, skeuomorphism, or design replicating the three dimensional world, was used as a crutch to make computers usable to those unfamiliar with them. At this point, that introductory style design is less needed because children are growing up with technology present in their lives.

Flat design isn’t just a conceptual style though. It has very distinct visual characteristics as well. According to Carrie Cousins, there are five things that make a design “flat.”

  • No Added Effects – Flat design is so-named because it strives to depict two-dimensionality. This is best achieved through a style that rejects all embellishments that have long been used to replicate three-dimensions such as drop shadows, bevels, embossing, and gradients. In flat design, every elements is crisp and and without shadows or feathered edges that blend it into the page.
  • Minimalistic Approach – Flat design attempts to be as simple as possible and thus it is usually accompanied with an overall minimalistic approach. The designs don’t use tons of flash animation or any other over the top design elements. Many sites rely almost entirely on color and text, but others include simple high resolution photography to set the mood.
  • Simple Elements – To create a simple and clear visual hierarchy, flat design uses many simple user interface elements, like buttons and icons. The trend has been using simple shapes such as rectangles, circles, or squares, and allowing each shape to stand on its own. Every UI elements is simple to understand and easy to use, striving for an intuitive experience.
  • Focus on Typography – Flat design is deliberately simple and crisp, which means the designs rely heavily on typography. Luckily, typographical design is also hugely popular at the moment as the internet has made using creative and interesting text much more possible than it ever was in the past. The typeface should always match the design scheme, but also simple, bold, and worded efficiently. Art or vintage fonts work well as embellishment, but it is important not to go overboard.
  • Focus on Color – Because of the simple styling, flat design also relies heavily on color. Pastels gave been very popular within the trending style, but most importantly flat design color palettes are more bright and colorful than other design styles. There is also the possibility to use more colors within a design than is usually utilized on a page. Many sites mostly use two to three colors, but flat design palettes can consist of up to eight equally used colors.
/0 Comments

Getting to Know Parallax Scrolling

,

Parallax scrolling was on almost everyone’s list of predictions for this year, but the community has been oddly quiet on the topic for a little while, most likely because it requires more finesse than many of the other trends on the tips of designers’ tongues.

To use parallax scrolling, you have to thoroughly understand what it is and how to use it. You can’t just follow a simple tutorial. You have to design around parallax ideas which requires much more time and focus.

To see the effect in action, click the image.

To see the effect in action, click the image.

For those unfamiliar with the niche trend, parallax scrolling is a technique that happens when multiple layers of information and images are combined and move at different speeds to create movement, depth, or a 3-D appearance. What makes parallax scrolling different from other similar uses of this technique is putting the power in the hands of the user. Instead of an automated effect, the visitor controls the illusion with their mouse.

It is a tricky method to master, and requires quality resources to work properly. A great parallax scrolling page is easily ruined with low quality images. The scrolling can be vertical or horizontal. Though vertical scrolling is by far the more popular, horizontal scrolling is gaining a following slowly.

While it is difficult, parallax has some unique advantages over other types of designs. Many use the technique simply for aesthetics, but it also changes how users interact and read a webpage.

One of the easiest ways to see how parallax changes browsing patters is to look at its storytelling capabilities. Parallax scrolling can turn your average webpage into an interactive storybook that users can move through at their own pace. Where videos usually require sound and complete attention, stories can be told with parallax scrolling that puts the user in control, and won’t be as prone to get visitors in trouble when their at work.

Parallax scrolling is also especially adept at showcasing products. Like an online catalog  parallax techniques can make it appear as if you are flipping through a group of products, or seeing multiple angles of the same item for a better idea of what it really looks like, all while keeping the focus directly on the product by putting it front and center.

Carrie Cousins from Designmodo has a few other ideas of how you can use parallax scrolling, but the best thing to keep in mind about parallax scrolling is, as Cousins says, “the backbone of parallax is user experience.” Parallax techniques engage and intrigue users in a way that makes them feel as if they are experiencing web sites in a new way entirely. Don’t squander it with bad UX.

/0 Comments

Why Are So Many Sites Using So Much White Space?

,

Minimalism is all the rage in web design at the moment, and extra negative space is an essential aspect of the style’s aesthetic  But, is minimalistic design and the white space accompanying it just a trend or is there more to it?

White Space

To the more business minded designers, all the “empty” space could be used for ads, more content, or more usability features that guide a user through the site. If you compress the amount of space between images, columns, and every other visual component, in theory you can fill the page with more of what users want to see, right?

That mindset favors business, but it doesn’t favor aesthetics. As Carrie Cousins puts it, “space is the thread that holds your design together.” White space separates objects, letting users find what they want to more easily. Space between objects groups things together, and it creates a sense of balance that makes a design seem cohesive and professional.

For most designers, there is a rule about keeping white space around content for the sake of making it more readable, but the same is true for just about any aspect on the screen. It draws attention to the most attractive aspects of a site by singling them out from others, while also organizing your site.

Neglecting negative space can make your site seem busy, cluttered, and hard to comprehend. While filling extra space with adds, or squishing everything together to present the reader with more seems like a good idea, in reality less is often more. Readers don’t want everything at once, they just want to be able to easily find what they’re looking for.

But, minimalistic design is not even close to risking using too much white space. Most designers are already thinking about using small amounts of negative space to organize content, but the new design trend is taking that idea to its extremes.

Using huge amounts of white space can have its problems. While it can be used to create stark contrast, white space can also make objects feel small, or detached from the rest of your design, unless you make your negative space feel deliberate.

White space draws attention to one object in a way so forceful users can’t help by stop and notice the object floating in a sea of space, but it is possible to go overboard.

Good use of white space makes the “empty” space feel active or purposeful. Bad white space makes a page feel empty or incomplete. The best place, or at least the most common area, to use white space is the header. When a viewer lands on a site with a lot of negative space in the header, they are met with a striking and simple statement of what the site is all about, all encapsolated in a singled out set of images or text.

If you use negative space in the header, the limits white space can put on content are removed, because content still flows fairly traditionally underneath. Many clients worry about forsaking content for “empty” space, but if the content focused areas of the site still present everything clients would expect to find, negative space won’t detract from the design.

However, if users can’t find what they are looking for on a minimalistic page, they might place the blame on the amount of space not being used to provide a better navigational system.

Not every site needs a minimalistic or negative space heavy approach. These aesthetics are tools just like everything else in a designer’s repertoire, to be pulled out when the time is right. You don’t have to start at the extreme end. Just try letting your content breathe a little and see how you like it.

/0 Comments