# data[].attributes.body
Create maps using streetview, 3D, and enhancements to make the journey real.

# data[].attributes.attachment_link.title
Google Earth Tutorial: Intro to Creation Tools

# data[].attributes.attachment_link.title
AP®︎ US History | Arts and humanities | Khan Academy

# data[].attributes.attachment_link.description
Learn AP US History: key concepts, themes, and periods from the pre-contact era right up to the present, all designed for learners preparing for the AP US History exam. Expand your knowledge of the United States's rich history, and review your learning using our AP-aligned practice questions.

# data[].attributes.attachment_link.description
Official website of the Smithsonian, the world's largest museum and research complex, with 19 museums, 9 research centers, and affiliates around the world.

# data[].attributes.body
Gov games

# data[].attributes.attachment_link.description
At iCivics, we encourage educators to look globally when teaching students about elections. Seeing how things are done differently elsewhere may provide insight into our systems. In this blog post, we explore France - Gabriel Neher's home nation.

# data[].attributes.body
Go here to login to edit your group site

# data[].attributes.body
Our US History Gateway to the FINISHED product

# data[].attributes.attachment_link.description
Is there a test on the horizon for you and you need to do some prep for it which won't put you to sleep? Did you hear a subject mentioned in the news or by someone else which was a bit vague, so you...

# data[].attributes.attachment_link.readable_text
There's more to great UX design than selecting pretty pictures. It's time to stop neglecting your text layout. The art of words is all about the way that words look on the page or screen.

Since the dawn of the written language, the manner in which letters are presented and arranged has always mattered. Today is no different. This post will take a look at why text layout is important, how layout techniques have evolved, and how you can create a masterpiece.

Let's get to it!

Why text layout matters
-

Words are the copywriter's job, right?

Not anymore.

Graphic designers are having to be more flexible than ever wearing multiple hats for any given project. Don't worry though, copy and design go hand in hand and we are starting to see a rise in hybrid positions such as the 'UX writer.' *ooohhh*

If you're feeling uninspired about the art of words here are a few reasons to motivate you.

1. Your readers care... a lot

Clunky layouts and huge blocks of text have been proven to lead to higher bounce rates (people bailing on your website). People usually skim web pages for information, so bad typography, incorrect font size and poor spacing can make reading a real strain. This is bad times two: you've lost a user and your reader missed out on your awesome content.

In a world of GIFs, 7 second videos and memes, you're competing with a lot of media, and if your copy doesn't captivate a user, you'll lose them. The reader is always right. Give the people the text layout they want.

2. Your copy is a boat and your design is the ocean

The two were made for each other, but they have to work together.

Great design can make a website look good, but if users aren't reading your content, then you may be heading towards a marketing shipwreck. It's the same with your written content. Without visuals and good design your copy is left incomplete.

A word of warning: add too many visuals and you run the risk of drowning out your content. Trust me I'm from Belfast. We built the Titanic. Using too many colors, photos, animations and text features will make your readers jump ship.

It's all about finding that sweet spot. Keep it clean, keep it clear, keep it readable.

3. Easy to do. Big results.

A little formatting doesn't take a lot of time, but it can go a long way with your readers. An extra 10 minutes could be the difference between a post that flops and one that goes viral.

You don't have to be a protegé to master the art of words. The principles of color, layout and typography are simple and easy to follow-especially with help from thanks to some modern, helpful (and free) tools. Speaking of, let's take a look at how you can create stunning layouts.

How to master text layout
-

Don't worry: you don't have to be a grid-demon or spend months styling your written content. Follow in the footsteps of those who have discovered these time-tested techniques for text layout.

1. Pick colors that work

Use different colors so written content stands out, but make sure you get it right. Text that's impossible to read defeats the purpose of what we're doing. Use tools like Adobe Color to set a color palette for your project with colors that complement one another.

Remember that visibility and readability are more important than pretty looks here. You've got to take a pragmatic and functional approach to the written or typed word.

2. Pair your fonts

The only thing worse than clashing colors is clashing fonts.

On rare occasion, dramatically different fonts can be used to provide a stark contrast between a headline/header and body copy. But it often just ends up looking ugly.

via Typewolf

Use fonts that are in the same family to keep the art of words consistent across your entire design.

The good news is you don't have to be a typography wizard to figure it out. With free tools like Typewolf, you can automatically find awesome examples of matching typography so you can find the perfect font styles that go well together and fit your brand.

3. Use headers properly

Header tags are a common feature in most writing platforms. They're used to make your post look good by allowing users to scan your content quickly. They're also important for search engine optimization (SEO) and ensuring that your content pops up on Google.

Design by tale026

When Google crawls through your site, their system looks for header tags, which usually indicate content that is organized well. Google bots assume that this type of content is more readable and bumps it up in search engine results.

The same basic principles apply even if you're writing copy for a poster, brochure, card or honestly anything else. Use bigger headers for the most important stuff (the thing you want the reader to see first) and work your way down from there.

For digital content, headers tags usually run from biggest (H1) to smallest (sometimes you'll see up to H6). Shoot for the reverse pyramid based on importance and paragraph structure. Use H1 for main headlines, H2 for topics, H3 for subtopics and H4 for small details.

Here's an example:

See how I'm introducing the main idea in the headline?

Steps you should take (H2)

This is a topic and opens up a new angle to discuss and explore.

Use a reverse pyramid model (H3)

This is a sub-topic because I am exploring a point under the topic.

Secret conspiracies in copywriting (H4)

This is a tangent on a sub-topic. Perfect if you want to lead the reader further down the rabbit hole.

4. Karate chop your paragraphs
Long-winded sentences are a surefire way to make your readers lose attention quickly and when they go on and on they tend to switch off and you lose them quickly, in that time they may click away from your site entirely and move on to something more interesting like watching YouTube videos about the hidden messages in big corporation logos.

Humans now have a shorter attention span than goldfishes, so you gotta keep it short and sweet. Check out any major online publication and you will notice one thing: they rarely have paragraphs longer than three sentences.

Shorter sentences and paragraphs keep the reader engaged and makes your content much more scannable. Not everyone can put their feet up and spend 10 minutes reading an article. Most of us arrive on a page to find some information and then get outta there.

5. Use bullet points and numbers

It's that simple. Here's why:

1. Bullet points break up your text layout.

2. They provides short bursts of information.

3. Lists are perfect for facts or details.

Also, try to keep your bullet points looking good.

A general rule of thumb is that if a bullet point is longer than one line, it's too long to be a bullet point. (Oops!)

6. Mix up your content

There's a reason why sites like Medium, Buzzfeed and Upworthy are exploding in usage: they've made written content sexy again.

In general you should be looking to give readers a break from blocks of text every 250 words. Of course, you can do more, but look at finding a balance. All GIFS and no copy makes Jack an uninformed reader.

Quotes

I'm a big fan of block quotes! They really help break up blocks of text, give your readers' eyes a rest and highlight important sentences. Plus, they just look great.

Visuals

Whether it's a Quora answer, Medium post or a webpage, visual content increases the power of your content dramatically.

Photographs, graphics, GIFs, infographics and everything else are all great tools in keeping the reader engaged. The rise of Buzzfeed says it all.

Bold is great to make a certain word or phrase pop out at the reader. Use it to make your reader stop skimming.

Italics can be used to emphasis a point, imply tone or even convey dialogue.

Highlights can help avoid overusing other features like bold or quotes.

Underlines are tricky with digital content. They may be confused for links, but you may still want to use them for emphasis or titles.
These are powerful weapons to deploy in the art of words but overusing them can lead to content looking unprofessional and cluttered.
If everything stands out then ultimately nothing does so reserve these for things you actually want to draw the reader's attention to.

Go create beautiful written content
-

More and more platforms measure the success of content on read-through rates rather than merely the number of people who view an article. The art of words is your secret weapon to keep readers reading and guide them through content until the very end.

If you have made it this far, congrats! It probably means one of three things:

1. I've done my job properly.

2. Your attention span is much higher than that of a goldfish.

3. (Most likely) you are heading to the comments to fight with me. *cries*

However you got here, use this quick crash course in text layout to bring your written content up to speed!

What are your favorite tricks to make your written content look like a masterpiece?

# data[].attributes.attachment_link.title
The art of words: how great text layout can transform your design - 99designs

# data[].attributes.attachment_link.description
There's more to great UX design than selecting pretty pictures. It's time to stop neglecting your text layout. The art of words is all about the way that words look on the page or screen. Since the dawn of the written language, the manner in which letters are presented and arranged has always mattered.

# data[].attributes.attachment_link.readable_text
If you've ever researched web design principles, you're probably more than familiar with the following attitude: "Web design is just so easy these days. With lightning-fast internet speed and sophisticated browsers, designers hardly have to deal with any of the restrictions that shaped the early days of the web. A website is, more than ever, a designer's canvas."

This may be true enough from the perspective of someone already comfortable with the basics, but if phrases like "CSS responsive grid system" and "Google Web Fonts" are alien to you, then jumping into the supposedly "oh-so-easy" world of web design may still seem a daunting proposition.

In recognition of this, we put together a truly basic set of web design basics with the beginner in mind. Of course, it's never a bad idea to review the fundamentals, even if you consider yourself a wiz.

1. Grid systems
_

Manuscript via Graphics.com; New York Times grid overlay via Design O' Blog

Since the invention of the codex in the 1st century, the grid has determined how we read. Thousands of variations, involving different arrangements of rows and columns, have emerged over time.

Think of the way text and images are arranged in books, newspapers and magazines. These are the systems that were more or less directly carried over onto the web, and they work. Word to the wise: many a designer has attempted to avoid the grid in the name of "creativity"; many such websites go unread.

In a world where people are as, if not more likely to browse the web on phones and tablets than on traditional computers, the issue of "responsive design"-designs that translate to smaller screen sizes in a smooth and intentional manner-is also paramount.

Profound Grid is an example of a compatible, responsive-ready grid system

To make our lives easier, a huge number of pre-fabricated grid systems have emerged which are responsive, compatible with major coding languages, and generally free to download.

Some popular ones are 960.gs, Simple Grid and Golden Grid System, but the list of good options is truly enormous, with some being more complex than others. Here's a good article from WebDesignerDepot to get you started.

Of course, if you're feeling adventurous or feel your project demands a truly unique solution, then by all means, create your own.

2. Visual hierarchy
_

We recently wrote a full article on this subject, so we'll be brief here. Basically, it's a known fact that in most cultures, people read left-to-right and top-down. However, it is also a known fact that, within these parameters, reading behavior follows a much more complex set of rules. This is especially true on the internet where people actually "scan" pages much more than they "read" them.

Good web pages are built in response to these measured reading patterns by placing important elements, like the logo, call to action or a key image, along the axes that the reader is expected to scan. These conventionally take either an "F" or a "Z" shape.

Beyond that, visual hierarchy is about signaling to readers what should be read first and what should be read next. After page placement, this may involve strategies like font size, spacing, direction and typeface pairing, as well as the use of color highlights.

3. Web-safe fonts
_

In 2014, the term "web-safe fonts" already feels like something of an anachronism. Back in the early days of the internet, browsers supported a very limited number of fonts-typically just ones that were already installed in users' word processing software-and if you deviated from these, some visitors would just wind up seeing random symbols.

Today, it is still true that certain fonts are supported by most browsers while others fonts are not, but the number of web-safe options has exploded thanks to the adoption of what is known as @font-face embedding in most modern browsers. Indeed, many designers complain of having too much to choose from.

Fee-based font services include Typekit, WebINK, Fontdeck and Fontspring. You can find nice free fonts, too, if you do a little searching through free services like Google Web Fonts. Here is a recent roundup of nice free web fonts by CreativeBloq.

Now that you know where to look, there are just a few general rules to keep in mind:

Serif fonts are for headlines
In web design, serif fonts are always reserved for headlines, because at smaller sizes they become hard to read. Body text should generally be sans-serif.

Keep fonts minimal
To reduce clutter, keep the number of different fonts on a website to a minimum. Two or three at the most. Check out our recent article on smartfont pairing for more information.

Don't take up too much space
Remember that some font files can be pretty enormous, and this could potentially slow the load time of a website.

4. Images and colors

The principles of image and color placement are not especially unique to web design, so we won't go into too much depth here. The main maxim to keep is: don't overdo it.

For colors:

Keep your color palette minimal
Like fonts, just stick to 2 or 3. They should of course echo the host's branding, while serving to highlight important areas, as noted in the "visual hierarchy" section.

Consider color blindness
One other consideration worth keeping in the back of your mind is the fact that something like 5% of the (male) population is colorblind, so watch out with your color pairings. We wrote a more in-depth article on the subjecthere.

For images:

Keep movement minimal
Avoid images that move. Resist the urge for flash. Even .gifs are highly questionable, unless executed with the utmost skill. In general, studies show that viewers much prefer websites that keep still.

Choose images thoughtfully
Don't use images simply as a way to fill space; visitors will pick up on this immediately and may lose interest in your page. Instead, only use images which communicate useful information-illustrating accompanying text or explaining something about a product being described.This article on Designinstruct covers this issue more in-depth.

Always abide by all stock image licensing restrictions
Be aware of the licensing restrictions associated with your images. Most images are copyrighted, meaning that you or your client will have to pay to use them, according to your needs. You can familiarize yourself with this subject usingpast articles we have written.

Keep file sizes small
Make sure your image sizes are as low as possible (web resolution is 72 ppi). Images often account for 60% or more of a web page's size/loading time.

...And those are more or less the web design basics. Ask your questions in the comments!

# data[].attributes.attachment_link.description
If you've ever researched web design principles, you're probably more than familiar with the following attitude: "Web design is just so easy these days. With lightning-fast internet speed and sophisticated browsers, designers hardly have to deal with any of the restrictions that shaped the early days of the web.

# data[].attributes.attachment_link.readable_text
Effective website layouts are actually puzzles with a bunch of small pieces carefully arranged to bring them all together. With the right parts, you can build a website that will drive conversions, build a relationship with your audience and boost your brand to new heights. Pick the wrong ones or put them together incorrectly, and your site can't do what you need it to do.

So, let's take a look at the building blocks of awesome website layouts. When you stack them the right way, the parts of a website can build something great. Like this block recreation of Westeros. Or, you know, a website. Either one is cool.

Start with the building blocks
-

Your layout is the structure of your website. And depending on the type of business and content, different layouts will work better for different things. Mix and match these layouts based on what works suits you and your content.

The Featured Image

If your business, organization or project isn't heavy on the images, the Featured Image layout should be right up your alley. This layout brings attention to one photo or graphic (the featured image... #captainobvious) while keeping the rest of the page simple and text-focused. This is a great fit for folks with fewer visuals and more content.

The Grid

Think of The Grid as the advanced version of The Featured Image. This layout features one large graphic area followed by a section separated into multiple blocks of varying shapes and sizes. You can insert any kind of content you want into those boxes-product images, text boxes, featured blog posts, whatever strikes your fancy. This layout works great when a lot of content that needs to be displayed.

The Power Grid

The Power Grid is The Grid on steroids. This layout incorporates different squares, rectangles, and areas of space within the grid. This layout is an awesome solution if you've got tons of different types of content (think video, text, opt-in forms, images... you get the picture) that you need to organize.

Fixed Sidebar

In all the previous layouts, navigation is typically found on the top of the page. With the Fixed Sidebar layout, you'll find it on the sidebar along with additional content. Place the sidebar on the left or the right-either way works-and pull elements from other layouts to round out the page.

A Fixed Sidebar layout showcases your navigation no matter where your audience wanders on the site, making it super simple to move from page to page. If you've got a particularly tricky site with several different pages to choose from, consider a layout like this.

Design by INSANELY.US

When you should use these

You can't have a website without a layout. But you don't need to use all of these. Mix and match to create something that works for you.

Where you should use these

Use a template to get the layout look you're after. Or, if you want to go more custom, have your web designer build one from scratch.

Responsive web design

In today's day and age, the number of people who are looking at your website on an actual computer are dwindling.

In 2016, mobile web use surpassed desktop for the first time in history. That means if you want to create a quality experience, you need to make sure that your website looks just as awesome on an iPhone as it does on a MacBook. And how do you do that? With responsive web design.

When you should use this

Every website platform has responsive themes and any web designer worth their salt can build you a responsive website. If they say they can't, you're working with the wrong person.

Where you should use this

The responsiveness of your website has to do with the code, so it's either going to be implemented automatically within the code of your theme or manually by your web designer. Before you take the site live, make sure you do cross-browser and cross-device testing to make sure your audience will have the same awesome experience no matter how they view your website.

Build out your blocks
-

With your basic framework in place, now it's time to fill in each layout block with awesome content. Every website will have a mix of the following types of content.

Navigation bar

If your website was a country, your navigation bar (or "nav bar") would be the map-hence the whole "navigation" thing. Use this tool to show your audience where they can go and how your content is organized. If they get lost, your navigation bar should point them in the right direction.

When you should use this

You need a navigation bar on 100% of websites-literally all of them. If people don't know where your content lives or how to find it, your website is essentially useless.

Where you should put this

Two locations work really well for a navigation bar: the top of your page or on the left sidebar. Typical nav bars are located on the top of the site, but if you have a lot of pages, consider the left sidebar since there's more room for vertical categories than horizontal.

Images

No website layout would be complete without well-placed images, which can be used for so many different reasons.

Images can strengthen an idea from your copy.

Photos can build an emotional connection with your audience.

Headshots can introduce your audience to yourself or your team (smile!).

Artwork can add visual interest.

Illustrations strengthen your branding.

Graphics can bring attention to key elements of your website.

When you should use this

When it comes to images, apply the "Three Little Bears" principle: not too much, not too little, but just right. Use enough images to make your website visually interesting, but don't overdo it. Too many images or images that don't make sense will take away from your content instead of adding to it.

Where you should use this

There are an endless number of places where you can feature images on your website:

Featured images for blog posts

Gallery slider

Author/bio images

Header images

Product pages

When choosing where you want to place your images, try to reverse engineer the process. What are you trying to accomplish by adding this image? Once you know that, you'll have a better sense of where your image should live. For example, if you want people to read your blog post, using an engaging photo or graphic as a featured image would make sense.

Typography

I don't care how visual you or your business is. You can't have a website without text. Period.

Text is an essential part of your website, and you need to do it right. By leveraging typographic hierarchy, you can draw attention to important messaging, make your content more readable and engage your readers.

Here are the basic rules you'll want to follow to make your text awesome:

Avoid using too many fonts. One is great. Two is fine. Anything more than two, and you're giving me a headache.

Make it big enough to read. If I'm squinting to make out the copy in your blog post, guess what? I'm not reading it. For normal body copy, size 12-14 is a safe bet.

Keep your font on-brand. If you're a hardcore action sports company, Comic Sans probably isn't on-brand font choice. Actually, no matter what kind of company you are, stay away from Comic Sans. Ugh!

Avoid big blocks of text. They're visually overwhelming and the design equivalent of a "Do Not Read" sign draped over your copy.

Your text also needs to be organized. Practice using different styles and sizes of text to bring emphasis to key parts of your copy. There are three key sizes you'll want to utilize:

Headers: Headers mark your largest sections with headlines or titles to grab your reader's attention and let them know what your copy is about.

Subheaders: Subheaders mark smaller sections to make the entire page more scannable for your reader.

Body: The body of your content is everything else. It's the meat of your copy.

When you should use this

All the time. There's never an occasion where you don't need words on your website.

Where you should use this

Everywhere. Every single page and section of your website should have legible copy that has a clear hierarchy.

Color

Just like Skittles, your website needs to taste the rainbow. Color is an extremely effective design tool and, when used strategically, it can help influence your audience and drive results. For more on how to use color to inspire action for your business, we've got a great piece on color psychology.

When you should use this

From day one, you should have an established brand color palette. Use these colors to brand your website and drive the results you want.

Where you should use this

Everywhere, but don't go crazy. Keep your color palette to three colors or less. More than that and it'll look like a bag of Starbursts threw up on your website. And don't forget that a lack of color is sometimes just as powerful. White space is an effective tool for visually separating different areas of your website and bringing attention to important messaging, images or CTAs.

Footer

Most people think of the footer as an afterthought, but it's actually a really important part of your website. Things to highlight in your footer include:

Links to key pages from your navigation, like "About Us" or "Contact Us"

Important legal information, like your privacy policy or terms of service

Address, phone number and a Google Maps link to your office

Social media buttons

When you should use this

Every website needs a footer. Not only is it a place to house important information, it's also a visual cue that your website, is in fact, over.

Where you should use this

At the bottom of the page... you know, in the footer section.

Put your content to work
-

With great content in place, you've now got the opportunity to engage your audience. Get them clicking, liking, sharing and interacting with your site.

Call-to-action

No website would be complete without is a call-to-action (CTA). Your website's CTA is your opportunity to drive the results you're looking for by telling your audiences exactly what you want them to do.

Via Headspace

There are 8 different types of CTAs you might want to include on your website:

Lead generation: "Give me your email address and I'll give you something in return."

Forms: "Fill out this form and I'll give you something in return."

Read more: "Click here to find out more."

Product or service discovery: "Learn more about what we do by clicking here."

Social sharing: "Like this content? Share it with your friends!"

Lead nurturing: "You're already interested, but I'm going to sweeten the deal with this offer."

Sale closing: "Buy now!"

Event promotion: "Register here."

Which CTA you use depends on what you're going for. And don't feel like you need to be limited to just one. It's totally fine to mix and match CTAs on your website to help maximize your impact. All of them should have a few things in common.

Grab attention. Getting your users to take action is one of the most important functions on your website. Make your message is easy to spot, and immediately grab the eyes of your visitors.

Be clear. If your audience is scratching their head as to what you want them to do, your CTA will fail.

Make it easy. Don't make your audience jump through hoops and click a button, fill out thirty forms, respond to an email and give you their firstborn child in order to successfully complete your CTA. The more steps, the more people you'll lose.

When you should use this

Anytime you want your audience to take action and do something.

Where you should use this

Think about adding a CTA on your sales pages. Or at the end of blog posts. Or your sidebar. Or in a pop-up. The list goes on. Test out different locations to see which performs best and gives you the highest conversion rates.

Pop-ups

Oh, pop-ups. Think of them as the annoying-little-sister building block of your website. They're sure to get on some people's nerves, but they might be perfect for you.

Pop-ups are a fantastic tool for capturing leads and building out your email list. And, let's be real, that's just about the most powerful marketing tool you can have in business. These little guys come in several different types:

Timed pop-ups: Appear at a specified time interval

Click pop-ups: Appear when a visitor clicks a certain area of your site

Scroll pop ups: Appear after a visitor scrolls past a certain point on the page

Entry pop-ups: Appear as soon as your website loads

Exit pop-ups: Appear when someone tries to click out of your website

Each type is effective in different ways, and the pop-up you choose depends on your messaging and goals. If your pop-up reads: "Wait! Before you go, sign up for our email list to receive this exclusive offer!" then you'll want to use an exit pop-up.

When you should use this

Here's the key to successfully leveraging pop-ups to gather email addresses: don't overdo it. If you have a pop-up coming from all angles every ten seconds, your audience will get frustrated and hightail it out of there. The less intrusive you can be, the better.

Where you should use this

Your pop-ups come from a few different places:

A pop-up that takes up the whole screen

An overlay that appears over the center of the page

A slide-in box that moves onto your page from off-screen

Experiment to see which style and location converts best with your audience and messaging.

Go forth and build awesome website layouts!
-

With these building blocks, you have everything you need to create the website of your dreams. Now get out there and start building!

Got some layout ideas that a designer can bring to life? Start a web design contest on 99designs.

# data[].attributes.attachment_link.title
The building blocks of effective website layouts - 99designs

# data[].attributes.attachment_link.description
Effective website layouts are actually puzzles with a bunch of small pieces carefully arranged to bring them all together. With the right parts, you can build a website that will drive conversions, build a relationship with your audience and boost your brand to new heights.

# data[].attributes.attachment_link.readable_text
The principles of design are the rules a designer must follow to create an effective and attractive composition. The fundamental principles of design are: Emphasis, Balance and Alignment, Contrast, Repetition, Proportion, Movement and White Space.

Design differs from art in that it has to have a purpose. Visually, this functionality is interpreted by making sure an image has a center of attention, a point of focus. Maybe you're thinking, 'But wait! I thought design was all about creativity?' If you're an entrepreneur or designer who's just starting out, you might be tempted to go wild and combine the first five typefaces and colors that catch your eye, believing you're creating something fresh and new. You will probably find yourself with a design that is muddled, unfinished, or well, just plain ugly.

Graphic design, like any discipline, adheres to strict rules that work beneath the surface to make the work stable and balanced. If the design is missing that balance, it will be weak and ineffective.

Learn more about the 7 basic principles of design by watching the video below or reading the rest of the article. Either way, knowing these principles and how to use them will make your next project stand out.

1. Emphasis
-

The first of the 7 design principles is emphasis, referring to the focal point of a design and the order of importance of each element within a design. Say you're creating a poster for a concert. You should ask yourself: what is the first piece of information my audience needs to know? Is it the band? Or the concert venue? What about the day and the cost of attending?

Make a mental outline. Let your brain organize the information and then lay out your design in a way that communicates that order. If the band's name is the most essential information, place it in the center or make it the biggest element on the poster. Or you could put it in the strongest, boldest type. Learn about color theory and use strong color combinations to make the band name pop.

Like writing without an outline or building without a blueprint, if you start your composition without a clear idea of what you're trying to communicate, your design will not succeed.

2. Balance and alignment
-

Never forget that every element you place on a page has a weight. The weight can come from color, size, or texture. Just like you wouldn't put all your furniture in one corner of a room, you can't crowd all your heavy elements in one area of your composition. Without balance, your audience will feel as if their eye is sliding off the page.

Symmetrical design creates balance through equally weighted elements aligned on either side of a center line. On the other hand, asymmetrical design uses opposite weights (like contrasting one large element with several smaller elements) to create a composition that is not even, but still has equilibrium.
Have a question?Ask our team.
Symmetrical designs are always pleasing, if not occasionally boring. Asymmetrical designs are bolder and can bring real visual interest and movement (more on that later!) to your composition.

3. Contrast
-

Contrast is what people mean when they say a design "pops." It comes away from the page and sticks in your memory. Contrast creates space and difference between elements in your design. Your background needs to be significantly different from the color of your elements so they work harmoniously together and are readable.

If you plan to work with type, understanding contrast is incredibly essential because it means the weight and size of your type are balanced. How will your audience know what is most important if everything is in bold?

As you seek out examples of really strong, effective design, you'll notice most designs only feature one or two typefaces. That's because contrast can be effectively achieved with two strong fonts (or even one strong typeface in different weights). As you add fonts, you dilute and confuse the purpose of your design.

4. Repetition
-

If you limit yourself to two strong typefaces or three strong colors, you'll soon find you'll have to repeat some things. That's ok! It's often said that repetition unifies and strengthens a design. If only one thing on your band poster is in blue italic sans-serif, it can read like an error. If three things are in blue italic sans-serif, you've created a motif and are back in control of your design.

Repetition can be important beyond one printed product. Current packaging design is heavily embracing beautiful illustrated patterns. Anyone thinking about a startup knows one of the first things you need is a strong logo to feature on your website, business cards, social media and more. Brand identity? Another term for repetition.

5. Proportion
-

Proportion is the visual size and weight of elements in a composition and how they relate to each other. It often helps to approach your design in sections, instead of as a whole.

Grouping related items can give them importance at a smaller size-think of a box at the bottom of your poster for ticket information or a sidebar on a website for a search bar. Proportion can be achieved only if all elements of your design are well-sized and thoughtfully placed. Once you master alignment, balance, and contrast, proportion should emerge organically.

6. Movement
-

Going back to our concert poster. If you decided the band was the most important piece of information on the page and the venue was the second, how would you communicate that with your audience?

Movement is controlling the elements in a composition so that the eye is led to move from one to the next and the information is properly communicated to your audience. Movement creates the story or the narrative of your work: a band is playing, it's at this location, it's at this time, here's how you get tickets. The elements above-especially balance, alignment, and contrast-will work towards that goal, but without proper movement, your design will be DOA.

If you look at your design and feel your eye get "stuck" anywhere on it-an element is too big, too bold, slightly off-center, not a complimentary color-go back and adjust until everything is in harmony.

7. White space
-

Poster design for pmoretti

All of the other principles of design deal with what you add to your design. White space (or negative space) is the only one that specifically deals with what you don't add. White space is exactly that-the empty page around the elements in your composition. For beginning designers it can be a perilous zone. Often simply giving a composition more room to breathe can upgrade it from mediocre to successful.

White space isn't sitting there doing nothing-it's creating hierarchy and organization. Our brains naturally associate ample white space around an element with importance and luxury. It's telling our eyes that objects in one region are grouped separately from objects elsewhere.

Even more exciting, it can communicate an entirely different image or idea from your main design that will reward your audience for engaging with it. The logo above uses active negative space to communicate multiple ideas in one fun, creative design.

How to use the principles of design
-

A design doesn't have to strictly follow these rules to be "good." Some absolutely mind-blowing designs ignore one or more of the principles of design in order to create an eye-catching and effective work.

The Bed Moved by Rebecca Schiff. Designed by Janet Hansen for Knopf

Consider the cover of "The Bed Moved" by Rebecca Schiff, designed by Janet Hansen. This was one of the most lauded book covers of 2016.

But did you immediately read the first line as "Theeb?" Did your eye jump to the bottom line where the M from "Moved" is isolated on a different line than the rest of the word? The design is clearly breaking the two rules of movement and alignment. But! Because of the designer's confident use of a bold contrasting color scheme and a repetitive structure, your eye is easily guided to the title and author of the book.

The important information is communicated. That jarring moment of slight confusion is what makes this design so revolutionary and rewarding.

The elements of a design should be viewed as moving parts that combine to tell a story. As you approach your design project you must first familiarize yourself with these principles of design. Only then will you be able to break these graphic design rules to create your own signature style.

This article was originally published in 2019. It has been updated with new examples and information.

# data[].attributes.attachment_link.title
The 7 Principles of Design and How to Use Them - 99designs

# data[].attributes.attachment_link.description
The principles of design are the rules a designer must follow to create an effective and attractive composition. The fundamental principles of design are: Emphasis, Balance and Alignment, Contrast, Repetition, Proportion, Movement and White Space. Design differs from art in that it has to have a purpose.

# data[].attributes.attachment_link.readable_text
Good design can sometimes seem magical, like the designer simply stumbled onto a great combination of components that both engage and enlighten the viewer. In actuality, graphic designers use a set of tools, known as the elements of design, to build and hone that perfect design.

Remember that every single piece of design is trying to communicate a message. Design can tell us which emails are unread in our inbox, which brand of socks to buy, or even to be wary of falling rocks. The elements of design are tools a designer uses to craft meaning and bring clarity to a muddled mess of ideas. They will make sure your design is as powerful as it can be.

So, what are the elements of design? Here is an overview of the six basic elements of design you need to know.

The elements of design
-

Line

Lines enclose and contain the parts of a design by creating outlines. They can be smooth, rough, continuous, broken, thick or thin.

Lines also send subliminal messages. A diagonal line, for example, has kinetic energy and movement, while a straight line is more ordered and clean.

Lines can be used to emphasize, setting particular information off in a busy composition and drawing the eye to a particular area. They can be formed into shapes or frames (more on both of those a bit further down). The eye will also see lines in other places-think buildings, branches of a tree, a horizon, or a set of train tracks-that offer a natural edge or borders.

Color

These beautiful and evocative illustrations are made more effective by great color choices. Via netralica and chocoboracer

Often designs are undone by sloppy, careless or inappropriate color choices. Color is incredibly important and should never be an afterthought. Even a design set entirely in grayscale needs to be balanced and contrasted appropriately.

In addition to hue (red versus blue), consider the saturation and brightness (or "value") of each color. Learn the basics of color theory to be sure a composition has the right mood, temperature and tone. Finally, consider what color space ( CMYK or RGB) is best for the printer or screen where the design will be seen.

Shape

The diamond shapes in this website design draw the eye toward different pieces of information making it easier for the viewer to digest and navigate. Via arosto.

While our kindergarten teachers all hope we know what a shape is, for our purposes, a shape is any enclosed space defined by lines or in contrast to its surroundings. They can be geometric (squares, ellipses, triangles, etc) or organic (a speech bubble, a blob, those little spiky things that pop on the screen when Batman punches someone).

Other components of a composition, like blocks of text, are also shapes. A designer progresses by leaps and bounds once she sees everything in her design as shapes that need to be ordered and sized based on an invisible grid.

Texture

This design by bomba really pops of the page because of the excellent vintage textures that make it seem chromed and shiny.

Texture is everywhere as we navigate the world around us by both sight and touch. While we can't feel them on websites and printed pages, textures from the outside world can be brought into a composition to give it life.

Want to imply softness, comfort, and coziness? There's no quicker way than a cotton textile background. On the other hand, if you're selling building supplies, you'd probably lean toward cement, stone, and brick, with grittier textured text.

More than with any other element, textures serve as a nod to our natural environment.

Framing

Frames can be subtle but once you train your eyes to look for them, they'll start showing up everywhere.

Frames organize information and create hierarchy for the eye and highlight the most important information for the viewer. They can be pretty and decorative or basic and utilitarian. Frames also help define shapes in the blank white space of a page.

Type

Bold, stylized type creates a memorable design for a bike shop that works equally well with or without the logotype. Via -G-

Typography is an important element of design because it literally conveys the message you want to communicate. But type can also be more than words: if used in an intentional way, type can also be a striking visual element or a shape, as well as provide structure between the content and the visuals.

Conclusion: Time to experiment!
-

Graphic designers use most or all of these elements of design while being guided by a set of principles, known as the principles of design. If the principles of design are the instructions, the elements are the tools.

The best way to master these elements is to experiment. Once you see that something as simple as making a slight adjustment to the color scheme or adding a shape can be the a-ha! moment that elevates your design, you'll be on your way to crafting more meaningful and effective compositions.

This article was originally written and published in 2017. It's been updated with new information and examples.

# data[].attributes.attachment_link.description
Good design can sometimes seem magical, like the designer simply stumbled onto a great combination of components that both engage and enlighten the viewer. In actuality, graphic designers use a set of tools, known as the elements of design, to build and hone that perfect design.

# data[].attributes.attachment_link.readable_text
Everyone knows to get better at any art form, you have to first understand the particular tools and procedures that form it. Design is no different from playing an instrument or even a chef making a meal. If the elements of graphic design (line, color, texture, shape) are the ingredients laid out in front of her and the principles of design (movement, rhythm, proportion, etc) are the recipe she uses to make the meal, then think of design layout and composition as the final plating.

Cake brochure by Luz Viera

Sure, the chef could throw everything into a bowl and call it good. Or, she could arrange the ingredients in a way that highlights the individual elements inside; she can deliver a message in a beautiful package. With time and care, she can create an incredible experience for the person consuming the meal.

Read on to learn more about the many ways you can structure your design compositions to have the showstopping effect of a perfect seven-tiered cake.

The 5 rules of design composition and layout
-

Grids give order to graphic design. They speed up the design process by helping designers decide where content should be placed rather than where it could be placed.

Most designers see an invisible grid running through all their designs. In modern web design, clean grid lines have become popular and almost impossible to avoid. There are a few simple reasons for this: grids make your designs cleaner, more efficient and easier to adapt.

Be My Travel Muse website design by DSKY

Grids bring organization not only to the design, but to the process of creating design. Say you want to create a poster for a lecture series. Create a strong grid and if the dates, times, images and colors all change, your basic designs will feel related. Instant consistency and less time updating and adjusting. Baseline grids also give you a great roadmap when working in a team. Every designer knows the feeling of relief that comes with opening someone else's design and seeing a clear grid to follow!

2. Emphasis and scale
-

This ad uses color and scale to emphasize the cake, which is the focal point of the design. By adwindesign.

The eye generally needs a place to rest or something of interest to hold it, otherwise people will look at your design and quickly move on. Say you take a photograph of your mom at a family reunion. Your purpose is to bring attention to the moment and the joy of the gathering by making your mom the subject and focal point of your composition.

To communicate the message to the viewer that your mom is the focal point, you want to use scale and emphasis. You could place her prominently in the photograph and make sure she is the largest object in the photo. You could emphasize her by blurring the background to make her stand out or focusing her brightly colored dress.

Figuring out the focal point of the design will give your eye the guide it requires to structure the composition, as well as organically build hierarchy. In the design above the focal point is the ridiculous cake-our eyes go right to it and then read the rest for context.

What happens when you don't have any white space. Manipulation by megireid.

This web design balances different sized elements perfectly by supporting them with equal white space. By TeeBox ™.

Isn't everything in life a search for balance? Design is no different. Designers must constantly juggle different elements to find harmony in their design. Imagine an invisible set of scales in each design and make sure you don't tip the scales by cloistering elements on one side of your grid. The website design above does this cleanly by marrying large type elements ("What We Do" "Our Works") with smaller, equal-sized paragraphs of longer explanatory copy.

Keep in mind that in terms of composition, white space (or negative space) is also an element. White space gives our eyes paths to follow through the design. Give each element on the page some space to breathe and balance between positive and negative space will emerge organically. You can see how moving the elements in the web design above closer together (thus shrinking the negative space and disrupting the balance of the piece) makes the design claustrophobic and ultimately unsuccessful.

4. Rule of thirds
-

A well balanced t-shirt mock-up using the Rule of Thirds. Via BATHI.

The Rule of Thirds is inescapable in design. It's a fundamental guideline that's so simple and effective, it often feels like a cheat: divide your design into three rows and three columns. The points where the vertical and horizontal lines meet form natural guidelines for where you should place your subject and supporting elements. Struggling with finding balance in your designs? The Rule of Thirds is about to become your best friend.

A perfectly balanced landscape photo. Via Andreas Wonisch.

For the most clear examples, look at photographs. In the example above, the focal points (the tree and horizon) are perfectly aligned with the grid created by the Rule of Thirds. If the tree was dead center horizontally and the mountains were directly in the vertical center, the composition would not be so pleasing.

5. Rule of odds
-

A logo design that uses the Rule of Odds to draw the eye to focal point. Via Freshinnet.

The Rule of Odds says that pleasing compositions seem to often have an odd number of elements placed in the foreground, most commonly three. The two objects on the outside both balance the focal point in the center, creating a simple, natural balance. (If you're a wedding photographer this is probably the most difficult rule to follow.) This is often true in logo design, where a centered mark might be offset on either side by the company name, like in Needle Records' logo.

The power of a well-composed design

This is just an overview of the different ways a designer can shape a composition to have the greatest impact on viewers. As always, remember that rules are meant to be broken. But once you start understanding and executing these rules and structures in your own work, it will improve and strengthen your designs immeasurably.

# data[].attributes.attachment_link.title
The 5 rules of design composition and layout - 99designs

# data[].attributes.attachment_link.description
Design composition is how you place elements on a page. Learn how to layout a design to creating meaning and be more aesthetically pleasing.

# data[].attributes.body
Lots of other articles that might intrigue graphic designers for crafting a better look

# data[].attributes.attachment_link.description
Colors, fonts and layout, oh my! Get to know the graphic design essentials.

# data[].attributes.attachment_link.title
Flippity.net: Flashcards and Other Resources for Educators and Learners

# data[].attributes.attachment_link.description
Create an interactive virtual breakout activity.

# data[].attributes.attachment_link.title
AP U.S. History Chapter Outlines - Study Notes

# data[].attributes.attachment_link.description
100% Free AP Test Prep website that offers study material to high school students seeking to prepare for AP exams. Enterprising students use this website to learn AP class material, study for class quizzes and tests, and to brush up on course material before the big exam day.

# data[].attributes.attachment_link.description
Join a game of kahoot here. Kahoot! is a free game-based learning platform that makes it fun to learn – any subject, in any language, on any device, for all ages!

# data[].attributes.attachment_link.readable_text
The evidence is in the practice

ESSA Level 3 correlation evidence in math and ELA, earned by teachers running frequent formative assessments.

When teachers run 30+ formative questions a week, the research is clear: they get more data-driven, their students get more engaged. Wayground is built to make that practice enjoyable ot run, attainable to fit a class period, and habitual enough to last past September.

# data[].attributes.attachment_link.title
Quizizz is now Wayground | Teacher AI and Resources

# data[].attributes.attachment_link.description
Find standards-aligned resources that engage every student. Wayground (formerly Quizizz) helps teachers differentiate instruction with AI and track student progress.

# data[].attributes.body
Custom "talking" Avatars

# data[].attributes.attachment_link.title
Voki | Speaking Characters For Education

# data[].attributes.attachment_link.description
Voki is a fun tool that students can use for homework, classwork or projects. Customize their appearance and what they say, and share with others!

# data[].attributes.body
Create a custom timeline for any period with pictures, videos, audio, and text content

# data[].attributes.body
Custom Maps