Visuals and Digital Layouts Course Hub
Course Overview
Week One: Typography and Spacing
Week Two: Visual Clarity and Simplicity
Week Three: Effective Visuals and Graphics
Week Four: Color Usage and Ratios
Week Five: Final Design Project
Description
Design is in the details! Building on the principles covered in Intro to Design, we'll take things a step further by discussing and going hands-on with the more intricate practices of digital design. In this five-week course, we'll run through topics such as typography and spacing, visual clarity, button layouts, color ratios, and more to create eye-catching experiences in the Ceros Studio. Each week we’ll tackle a design challenge in the Ceros Studio to puts the topics we cover to practice.
Prerequisites
Though this course is very interactive in the Ceros Studio, and we will be touching on Studio tips, tricks, and best practices, it is not a course on how to use the Ceros Studio. This is an intermediate visual design course, so you don’t need to be a Ceros expert by any means, in fact you could be somewhat new. But to get the most out of Visuals and Digital Layouts, we highly recommend making sure you have the following:
A Ceros Studio account Completed the Studio Welcome Box Attended a Live Studio Training
Schedule
Starting June 14th, each weekly session will be held on Wednesday at 2PM ET.
Certification breakdown
Throughout the course, you’ll have opportunities to complete challenges and activities to earn Design Points . If you earn enough Design Points, you’ll become Ceros design certified. There are three levels of certification you can achieve in Intro to Design depending on how many Design Points you accumulate. Work hard, earn a badge, and share your achievement with a digital Ceros Design Certificate.
How to earn Design Points in Visuals and Digital Layouts
“Hands-on” Weekly Design Challenge
“Design in the Wild” Weekly Activity
Final Design Project
100
50
550
400
150
1,100
Total possible
Assignment due dates
Each completed assignment will be due 5 minutes prior to the beginning of the next session in order to be eligible for Design Points. For example, Week One’s “Words Only” Design Challenge and “T and S in the Wild” must be submitted before Week Two’s live session begins. No late work, no half points, no make-up assignments.
Certification levels
Green Certified
“The Achiever”
700/1,100
Gold Certified
“The Overachiever”
950/1,100
Diamond Certified
“The Completionist”
1,100/1,100
Back to Hub
And you must have at least one of the following:
Completed Intro to Design Intermediate graphic design experience At least 20 hours spent in the Ceros Studio
Week one: Typography and spacing
Course outline and certification explanation
Typography choice and combinations
Copy layout and spacing
Quick tips
Words Only Design Challenge overview
Design in the Wild overview
Week two: Visual clarity and simplicity
Week one refresher and review
Avoiding visual clutter in your designs
Leveraging interactivity
The art of button crafting
Transitions and animations
Decluttering Design Challenge overview
Week three: Effective visuals and graphics
Week two refresher and review
Beware of the stock photo trap
Authentic and relatable visuals
Apply visual consistency
Graphics at Last! Design Challenge overview
Week four: Color usage and ratios
Week three refresher and review
Color ratios in digital design
How vibrant is too vibrant?
Color contrast and readability
The Color Design Challenge overview
Week five: Art Show
Final Designs Art Show
Course wrap up
Session recording
Typography
What better way to practice using typography and space than only using typography and spacing? This is a great, low-stakes space to practice and put your creative thinking to the test. Click the "View instructions" button learn how to complete the challenge. Then, use the “Open in Studio” button below to get started.
A quick word on choosing fonts
Layout and spacing
Applying typography and spacing
Words Only Design Challenge
Step one:
View instructions
Submission for this activity is now closed. Though you can no longer earn Design Points, feel free to still complete the activity for practice.
Submit work
Step two:
Design is all around us! But it's most noticable when we're looking for it. So, find one good and one bad example of typography or spacing while going about your week. Upload a picture or screenshot of the examples to the "T and S in the Wild" experience using the "Open in Studio" button below.
Open in Studio
T and S in the Wild
Effectively using typography means ensuring high readability while still maintaining visual cohesion.
Close
Don’t be too on the nose with fonts
Some typography examples
Improving your spacing
Digital Typography
Helpful resources
Ceros Webinar
10 kerning tips for improving your typography
99designs article
Session recording will be uploaded here afterwards
Don’t over-use decorative fonts. They can be hard to read and can *really* stick out.
Just because a font is cool, doesn’t mean it’ll fit in your design.
Body fonts should be simple and complementary.
Use fonts that *correctly* portray your message.
First, a little refresher on Alignment.
There are no hard and fast rules to font sizing, but here are some general guidelines.
Body:
Body fonts should be somewhere in between 16px and 18px. Anything smaller will be too hard to read. If you have enough room, you can try sizing up to 21px max. But be careful; you don’t want to overcrowd the design. Remember to let your design breathe.
Header:
Header fonts should be roughly 2 to 3 times larger than your body font. You can try going a little bigger, but again, don’t overcrowd the design.
Subheader:
Your subheader should be a tad smaller than your header and include some tweaks to add some contrast between the two—for example, weight, color, or font. You’ll also want to make sure there is a significant enough size difference between your subheader and both your header and body font to establish a visual hierarchy.
Titles, statements, and text-as-graphics:
There aren’t really any guidelines for these except for... you guessed it, don’t overcrowd the design. There are great for adding contrast and focal points to a page, but make sure your design stays clean and easy to follow.
With spacing, you’ll want to utilize visual proximity while still ensuring the text is readable.
Not enough line spacing will make your body text appear cramped and hard to read.
Too much line spacing will make your body text look spread out and unpolished.
A good rule of thumb to follow is to space your body text lines at least 1.5% of the font size.
For larger type (titles, headers, etc.), you can use less line spacing, but it’s a good idea never to use less than the font size.
Choose wisely
The right font and correct spacing can make or break your design. It’s true! While font choice will increase immersion, the spacing will improve readability and confidence. Together, they create a user experience.
Typography and spacing are a part of your visual design.
The core of good design
There's been a lot of talk about and hype around AI recently. As in, Artificial Intelligence. How it will improve our lives, increase productivity, and even replace some jobs! As AI continues to rapidly improve and become more powerful, some people have even begun to wonder if it will someday replace the need for human designers. Can AI-generated content match that of an experienced designer? Will the speed at which it can output material outshine the designer's eye? I think NOT. No matter how great AI may become, it could never replace the real, natural, and human elements of a true designer.
To further prove this point, we will design an experience in the Ceros Studio throughout this course that explains and demonstrates how the need for human designers will NEVER CEASE TO EXSIST. Starting this week with the Words Only Design Challenge, we will take AI's own words on the matter and transform them from a plain script to a stylized and visually appealing digital design. That's right, I used AI to generate ten reasons why AI will never be able to replace human designers. Your challenge is to use what we learned this week to transform the AI's words into an engaging, visually interesting, and user-friendly one-page design.
1. Images or graphics 2. Shapes 3. Lines 4. Colors (You can only use black and white, not even grey) 5. Buttons 6. Logos or icons 7. Pop-ups or overlays 8. Additional page (you can increase the page's canvas size)
But there's a catch. As the name suggests, you can only use the words provided and nothing else. That means you can't include:
Words only! The idea is to hyper-focus on typography and spacing but also remember to utilize sizing, weight, contrast, proximity, alignment, and repetition to enhance your design. Flex your creative thinking and take risks, but remember to ensure your design is clean and usable. Lastly, you'll notice there is no title provided in the AI-generated text. So, come up with a good one yourself.
Visual clarity
Iterate on your design project from last week by adding visual clarity and simplicity to your layout. View the instructions below, then open your project from last week in the Ceros Studio to get started.
Button Crafting
Decluttering Design Challenge
Design is all around us! But it's most noticable when we're looking for it. So, find one good and one bad example of typography or spacing while going about your week. Upload a picture or screenshot of the examples to the "Visual Clarity in the Wild" experience using the "Open in Studio" button below.
Visual Clarity in the Wild
Local lawyer billboards: They’re all the same and they’re all bad.
The anatomy of a button
gorillalawfirm.com
There are two main button styles:
More often than not, you’ll be designing with a lot of content. In these cases, creating easily consumable content blocks is crucial.
Sometimes basic proximity and white spaces aren’t enough. Trying to fit all the required content on the page while utilizing good design principles can result in the death scroll.
Death scroll =
Loss of interest and/or orientation on a page due to excessive length and scrolling.
Use interactivity to avoid the death scroll.
This week we are working on the next iteration of our design project by adding visual clarity and simplicity to its layout. Last week, you were constrained to text, spacing, and canvas size as your only design tools. This time, you can also use buttons, pop-ups, additional pages, interactions, and object states! Yes, that means you can use the Shape tool but ONLY to create the necessary elements for buttons, pop-ups, and containers. You can't use the Shape tool to create graphics and other visual features.
Now that you can "hide" content and include more pages, you'll probably need to restructure and rethink the overall layout of your design. Remember, this is a new iteration, not an update. So simply hiding the body text in a pop-up while leaving the rest of the design untouched will probably look a little strange.
1. Images or graphics 2. Shapes (Except for buttons, pop-ups, and containers) 3. Lines 4. Colors (You can only use black and white, not even grey) 6. Logos or icons
Though you have new design abilities unlocked, you still can't use the following:
Don’t design local laywer billboards
Some visual clarity examples
Simplify your layout
Hide your extra content
Apple Trade In
MacBook Air
macOS Ventura
Three great examples from Apple
goodreads.com
arngren.net
Hide your content with:
-Pop-ups -Additional pages -“Flip cards” -Toggles -Tab menus -Dropdowns
Standard button:
Pairs well with text and graphics in a content block
Tile button:
Acts as a thumbnail or “cover page” for content blocks
Button composition:
Buttons should look like buttons:
Buttons should act like buttons:
Buttons should be interactive
Smooth, subtle, and natural
But not too interactive
Distracting, unpolished, looks like a spinning sign
The Capital W Rule:
The base of your button should be big enough to fit AT LEAST one capital W (of the same font size of the CTA) between it’s borders and the edges of the CTA. And at most, the width of the base should not fit more than two capital Ws on either side of the CTA.
Button sizing (Standard style):
This week's challenge will require you to rethink your design from last week. So, flex your creative thinking and take risks, but remember to incorporate plenty of white space and design principles.
Why visuals are important
Iterate on your design project from last week by adding visuals and graphics to your design. View the instructions below, then open your project from last week in the Ceros Studio to get started.
Pick five pics
Applying visuals and graphics
Graphics at Last! Design Challenge
Design is all around us! But it's most noticable when we're looking for it. So, find one good and one bad example of visuals or graphics while going about your week. Upload a picture or screenshot of the examples to the "Effective Visuals in the Wild" experience using the "Open in Studio" button below.
Effective Visuals in the Wild
By nature, we are visual learners and consumers.
The hottest new workout fad needs some visuals
Visuals are like acting.
What’s the greatest acting performance of all time?
This week we are focusing on using effective visuals and graphics to increase the engagement of our designs. As with last week, since you'll add more content to your design, you'll probably need to rethink your current layout. Remember what we discussed in this week's session, and be mindful of the images, graphics, and icons you choose to include. Think of the anchor points of good visuals and include assets that include all three to some degree. Your visuals should complement the typography of your design and shouldn't feel out of place.
Though you can finally use visuals and graphics in your project, you still CAN NOT include color. Black and white only, not even grey! In order to effectively use visuals and graphics, you're going to need to think outside of the box! Maybe even create some graphics from scratch. This constraint will force you to think creatively about your design and look at options outside of stock photos and stills.
Visuals by the numbers
Good visuals are...
Choosing the right visuals
Three attributes of effective visuals
Dentistry
Project management
Customer support
Bad acting is distracting, immersion-breaking, and discrediting. Bad visuals are like bad acting.
Think about shapes, lines, icons, abstracts, and illustrations. But again, also consider the anchor points of good visuals- Prioritizing Pathos, Ensuring Cohesion, and Including Abstraction. As always felx your creative thinking and take risks! But remember to utilize good design principles and practices. Good luck, have fun!
Creative design
People retain:
80%
of what they see
20%
of what they read
10%
of what they hear
60,000X
Visual elements are processed
faster than basic text on its own
All that to say, we like visuals.
Typography and spacing are a part of a design’s visuals, so this week we’re focusing on images and graphics.
Good acting is
.
Good visuals are
Prioritize pathos
When deciding on visuals, consider how you want the design to make your users feel. Include visuals that invoke those feelings and emotions rather than visuals that portray the logic of the subject matter.
Ensure cohesion
When including many visuals throughout a design, make sure they feel like they belong together. Differently styled visuals will feel out of place. Remember, many repeating visuals create one cohesive design.
Include abstraction
Don’t be too on the nose with your visuals. Not always, but often, it’s difficult to portray authenticity through concrete or literal visuals. However, more abstract visuals can prioritize pathos without feeling scripted or forced.
grandstreetdental.com
hellotend.com
asana.com
zendesk.com
ceros.com
Jump rope brand Target audience is 22-28 year old fitness enthusiasts looking for a new fresh new workout routine Brand identity is approachable, fun fitness that doesn’t take itself too seriously but still portrays an intense and rewarding workout
Effectively Varying Visuals
Additional resource
Ceros on-demand webinar
Color 101
This is it! The final submission. The rules this week are simple: No design restraints at all. You have finally unlocked color usage, so apply what we discussed this week to your project. Now that you can use color, be sure to make any tweaks, changes, or updates to the layout and visuals of your design. Remember, the typography, spacing, assets, visuals, and color you include should work together to create one cohesive design. Good luck, and see you at the art show!
Primary, secondary, and third...ary colors
Schemes, ratios, and theories
Applying color
The Final Design Project
There are two basic color models that you should be aware of.
The color wheel
Hues, shades, and tones
Color picker
Practice selecting a color scheme
RGB
The color wheel is a visualization of the basic color combination spectrum
Color schemes to get you started
The golden ratio
A quick word on Color “theory”
Used for digital mediums Every color in this model is a mix of red, green, and blue Often referred to as the “Additive” color model since you add colors to produce a new color
CMYK
Used for physical mediums Colors are generated by adding various amounts of black (Key color) to combinations of cyan, magenta, and yellow. Red, green, and blue can’t be used as the primary mixing colors in physical designs because they are too dark and will result in inaccurate coloring. Often referred to as the “Subtractive” color model since you subtract light from color by including different colors-- think of mixing paints
Primary colors
Secondary colors
Generated by mixing primary colors.
Tertiary colors
Generated by mixing a primary color with a secondary color
The basic color wheel includes three primary colors
The basic color wheel includes three secondary colors
The basic color wheel includes six tertiary colors
Half of the colors are on the color wheel are considered “warm” colors
The other half of the colors are on the color wheel are considered “cool” colors
Hue is pure color with no additions.
Shade refers to adding black to a color.
Tint refers to adding white to a color.
Tone refers to adding grey to a color.
color.adobe.com
Complementary
There four basic color schemes to be aware of.
Colors are directly across from each other on the color wheel.
Analogous
Colors are side by side on the color wheel.
Triadic
Colors are equally spaced on the color wheel.
Monochromatic
Only using a single color along with its various shades, tints, and tones.
When selecting colors, a great guideline is:
1-2 primary colors
1-3 secondary colors
1-2 accent colors
The golden rule for color ratio:
6:3:1
Or:
7:3
examples
Color theory does have statistics and data to back it, but at the end of the day, it’s still just a “theory.”
Use color theory as a guideline or starting point, but make design choices that are best for your users.
Import experience
Instructions