Transcripts
1. Welcome to Information Design!: All designers, our
information designers. The world is full of
information and it's a designer's job to organize it, make sense of it, and
present it in a way that's enjoyable and
accessible to everyone. The basic skills used to organize and visualize
information are extremely universal and can be implemented in any
design project. I'm Carolyn graphic designer, who is really excited to share the basics of information
design with you today. I took this really awesome
information design class at RISD last summer, and I was so excited to apply my new skills across all
of my design projects. So today I am going to share those skills that I
learned with you and teach you how to make your own personal
information design project for your portfolio. Along the way, you'll learn
these key design skills, giving form to content,
visual storytelling, practicing empathy for users, building strategic
design systems, and creating visually
cohesive projects. You'll practice
your new skills by turning your research
into sketches, building a concise group
of information designs, designing a webpage and a social media image to
feature your designs in and working in Figma for
Graphic and Web Design. This class is for
all creatives at any skill level from
beginner to advanced, who want to learn more
visual storytelling and graphic design skills
will be working in Figma, which is a growing design tool that is free and easy to use. In this class you'll have an amazing information
design project that really showcases your communication and visual problem-solving skills
across graphic design, web design, and digital design. I can't wait to see what you come up with for your project. So let's get started.
2. Project: For this class, I
want you to create a webpage design and a
social media image design as a part of a larger
data-driven campaign. This campaign
project will feature three visually cohesive
information graphics that you will create on
a topic of your choice. Will complete your project
in a few easy steps. Will research your topic, brainstorm and
sketch some ideas, and then take those sketches, transform them into a
whole designed system that will make up your
data driven campaign. You'll need a few tools and materials to help you
throughout the class. You'll need sketching
materials like pencils, markers, and paper to help
you brainstorm your graphics. And then you'll need Figma, which is an online
design tool we'll be using to design your
campaign project. It's easy and free to use. You don't even have
to download it. You can just use the
browser version. Just go to figma.com
to get started. By the end of the class,
you will upload the following to the
project gallery. Your sketches of your
information, graphics, and images of your webpage
and social media designs. Feel free to upload your
sketches or ideas at any point during the class to get feedback from me and from your
fellow classmates. Before we start your project, Let's get inspired by
learning a bit more about information design and see
some really exciting examples.
3. Information Design: Information design
is the practice of presenting
information in a way that fosters effective and
efficient understanding of that information. To get inspired before we
started in our projects, I'm going to show you guys a few examples of infographics. This is a super great book
called information graphics, and I can link to it in the projects and
resources section. So it kind of goes over a broad history of examples
of information graphics, starting with ancient
Egyptian tombs. This is a very early form
of graphic design that is basically just a map with
a bunch of images on it. This is an example of
a graphic that was on the cover of
American scientists. It's super complicated, so this is a zoomed
in version of it. But it's basically
just this big circle. And it uses color-coding. And even grays out some of the irrelevant information
behind here so that the colored information
can really pop out and it makes it
easier for us to read. But if this is obviously
a very complex graphic, this is showing
human DNA compared with dog DNA. Actually. This is, I think, a
really interesting infographic showing the comparison of audio
and video technology. So you can see kinda
like your typical, like bar graphs and
things like that, or a line graph down here. But I think it's
really nice that they included these illustrations
on the sides here. That really helps
us connect like, Oh, this is a Blu-ray desk. This is about video, or this is an iPod and
this is about music. I think the limited
color scheme here and the illustrations do a really great job
of helping us as an audience understand
the information quickly. Here is another example of how the designer did a great job of using a very limited
color scheme. Obviously, it's only
black, white, and bread. And I guess there's this
later shade of red here. But they use
pictures and imagery to connect the subject matter to the audience much quicker. So you can see here, this is all about
Michael Jackson. Everything on this poster or this newspaper article is
related to the timelines. So we can see here like 1972 and there's a
picture next to it. So that's how he
looked at that date. And this is what was
going on at this date. What's style of music
he was working with? I think this is a really
interesting and strategic way to lay out all of this information
about Michael Jackson. So here we have this
plain simple chart. We can see the prices at night, the 1800s, and then we can see that compared
right next to 2008. And then these are all of
the countries listed out and color-coded with these
little rings next to them. But we can see a much more interesting
visualization of this. These numbers in this
diagonal graphic in the middle of this poster. The colors correspond to the
colors listed in this chart. And it's just really
fascinating to see a visual comparison. This is a really
great way of showing the information and not just
telling you in the chart. It's actually doing both, which is really
good for people who maybe want to see the
numbers listed out. Instead of abstracting
it in a more visual way. This book, which is
not a design book, is actually a cookbook, does a really great job of showing you some really
cool visualizations of the information
presented in the book. This is an example of different dressings that you can make based on
recipes in the book. This is kind of an axis. So you can go from
light, tender, creamy, too crunchy, and it's all color-coded
again really nicely. And so depending on what kind of dressing
you're looking for, you can find that on the axis. So if I want something
crunchy and creamy, I can look in this
lower right quadrant. We can't talk about
modern-day information design without talking
about Georgia loopy. She's a human focused
information designer who makes information more
personal and relatable. Here's a project
that she did call deer data with a friend,
Stephanie postsynaptic. They basically thought
about their week, picked a topic and representing that topic in a week of their life and send it to
each other for a year. So this is an awesome example
of making information fun, making it part of
your daily life. That was just a really
quick overview of a huge section of
graphic design. I hope that you are inspired and already have some ideas
for your own project. So let's get started on that
project and the next lesson.
4. Pick Your Topic: We learned that some basics
of information design and saw some really cool
examples in the last lesson. So I think we're ready to
start on our design project. Your first step is
to pick your topic. It can be anything
from climate change, Animals, music, cooking,
whatever interests you. I am going to pick the
topic of guns in America. I feel like we've
been hearing so much, unfortunately lately
about mass shootings, school shootings in America. And I wanted to learn more about the statistics behind
that violence. And teach myself
something through design, which is what I
love about design. You can design
anything on any topic, and by the end of your project, you'll learn more about it. Once you've decided
on your topic, I want you to pick
a lens, an angle, a story to tell
about your topic. This project is an exercise
and visual storytelling. So what is the story that you want to tell through
your design? I'm going to talk about how gun violence is a very
uniquely American problem. So that's going to focus
all of my research and the three information
graphics that I'm going to come up with
in this class today. Pick your topic and pick
the story you want to tell so that we can start
researching in the next lesson.
5. Research: You've picked your topic. Now let's get to some content. Research, at least
three different pieces of information that communicates the story you
want to tell about your topic. Here's an example of one piece of information I found that I can be one of my
information graphics from. Here's the
information, It's just written out in a text document. And here's an example
of how I later turned that into my
information graphic. This is a process of
giving form to content. The content is your information and the form is
your future design. Here's some quick tips on collecting research
and information. Create a text document to collect the information
you want to use. This can be your
catch-all document where you can write down specific statistics
and information you want to visualize. And you can also link
to your sources here. Remember what story you're trying to tell with your topic. E.g. I. Am focusing on how gun violence is a uniquely
American problem. So my information is
going to focus on comparing american gun violence statistics
with other countries. For my pieces of information, I am going to include
some information about firearm related
deaths per 100,000 people in different
countries, including America. Americans are ten
times more likely to die by a firearm related death than people in 22
other developed countries. Active shooter incidences per
year in the last 20 years. Then I might throw in this
piece of information about how Americans think of gun
violence in the US. During this class, I want you to nail down three pieces of information and make three
information graphics. The great thing about
this project though, is it can be scaled up later. So you can make hundreds of information graphics out of hundreds of pieces
of information. Complete all the research
you need to start sketching your three information
graphics in the next lesson.
6. Show Don't Tell: I wanted to take a
quick detour from our project to discuss a really huge pet peeve of mine and a really common
mistake and design, and especially
information design, which is when people tell
and they don't show you. So in all of design, your goal is to show
people, not tell people. Here's an example of
telling and not showing. One of my information pieces is Americans are ten
times more likely to die by a firearm
related death than people in 22 other
developed countries. It's not visualizing anything to make the number
ten really big. When you're working with
numbers and your information, you want to show quantity, you want to show a comparison. You want to help people connect that number with
something meaningful. Here's an example
of how you could show that information instead of just telling you want
to visualize ten times. And other words, one
versus ten as a visual. That way your audience
can see how much greater ten is when compared
to just one. Remember, this
project is all about visual storytelling and
you're not going to tell R, even visualize any story by just making the number ten
really large, e.g. you want to think about how others could easily,
effectively, efficiently understand
information, which again, is what information design is. Let's get back to designing our project in the next lesson.
7. Sketch: We're feeling inspired. We saw some examples and we have our research ready to go. So let's jump into sketching. So I have a few pieces of paper here and a few drawing utensils and this ruler circle guide to help me draw a
little bit better. But it doesn't matter how
you draw at this point. It's all about getting
your ideas down on paper. So don't worry about it
looking perfect or anything. I'm actually going
to set this up. So this will be my
first sketch over here, and then the sacrament
interpretation of that first piece
of information. So the firearms
related death will be in both of these
quadrants here. And then my second
piece of information. So let's get started
on the first sketch. I think to visualize all
of this information, I'm going to try a bar chart. So I'm going to grab three
colors with my markers. I'm going to set it up as if one color represents
the United States. So I'm going to use
this gold color and put that right
in the middle there. That's gonna be kinda like a medium length line because that piece of
information is 10.6. So I'll just make a
note of that here. Because this is how I want it
to look in my infographic. I want the country to
be on the left side and then I want the numbers
to be on the right side. I think, of this bar. Then I'm going to use a
different color, red, Let's say that will represent the countries that are higher. The US. I'm just kinda
eyeballing it here, but you'll actually put it
into scale on the computer. I think this is
good. This is pretty straightforward and I'm happy with the overall idea of it. But I think it could
be a little more fun. Maybe. I'm going to experiment
with just a different way, maybe a more slightly
exciting way. Yell out again to depict this. And I'm thinking back to that diagonal
proportional circle graphic that we saw
for the GDP numbers, this circle will
represent the US. And maybe we can just write
it right on the circle. If that looks good once we get on the
computer and try it. And then proportionally
the circles around it can scale up things. So that's my first
piece of information, the firearms related death. So I'm going to move on to my second piece of information. I used this gold color for the US and both of
these sketches, I'm going to keep doing
the same in the sketch. So I want to again be
visual and show not tell. So I am going to make
ten little guys here. And then I'm going to
compare them to one guy, which would be the
22 other countries. So maybe I can label it by using this arrow
system and maybe I can do that here, even Mexico. And obviously you can go back to any of your sketches
at any point in time if you've got ideas
from your other sketches, That's the nice thing
about sketching. You can quickly change things
and move things on paper, which is why I think
paper is so great. Now I'm going to maybe go
back to this circle idea that we did here and
maybe make circles. Then I can use the
same labeling system, probably with the US here and then the
other countries here. But I'm going to grab this
new sheet of paper here and continue on with my
third piece of information. And then I'm going
to maybe just do a typical line graph here. So you don't need to write
every single number here. I'm already getting rid
of this other axis here. So if you notice, I only drew out this bottom axis for
the ears because that's kind of a more important way to establish this line graph. So everything is set and oriented to this bottom line
that shows you the year. Then the rest of this
is all just kind of floating at the top here. But I think that's really nice because it emphasizes the line which is the information and the most important
part of this graph. Then I think on this
right side again, I, I'm going to try the
circle theme again. And then maybe
again I highlight. Okay, so I'm gonna say e.g. one student. So people know that
this one little circle is one incident. And then I can say
three for this year, I can say 40 for this year, I can say 24 on top of all the circles like
I did for the three. Again, you guys just have to do six total sketches to sketches for each
piece of information. But I did four pieces
of information. So I'm going to do
eight sketches. And a pie chart
works here because the information is
out of 100%. So e.g. this active suitor shooter incidents graph is
not out of 100%. It's just whatever
the number is, It's the number of
incidents per year. Definitely use your colored markers, your colored pencils, whatever to help you differentiate your
pieces of information. And it doesn't have to be like these colors
don't have to be the colors I'm going to use
in my actual infographics. It just helps to have
different colors to distinguish this different
type of information. I think I am going to go back to this line or this rectangle
theme on the right side here. So I'm going to make
a bar chart of sorts, but it's all gonna be
about proportions again, just like we did in that first
sketch with the circles. This is gonna be my 50%. I, it doesn't really
matter what size this is. All that matters is
that the other sizes of the rectangles to come or in proportion to this rectangle. If this is 50, I
want to make 33. This rectangle next to it is going to be
a little smaller. I think I have some
really good options to move to the computer with. Let's get set up in Figma
in the next lesson.
8. Set up in Figma: Now that we've researched
your content and started giving that content
form and our sketches. We're going to get
on the computer and start designing
our campaign. Your first step is to open
up Figma on your computer. So just go to figma.com
and start a new project. So it probably looks like this. Once you get to figma.com, you want to either
log in if you have an account or get started. You can sign in with Google, which makes it super easy. So right now they're offering a free version of sigma that
might change in the future. I just use the free
version for now, but you can also
pay per month for a professional license
that allows you to do a few more things and gives
you a few more features. But let's do the free
version for now. And then we're going
to design with Figma. Just select a blank canvas and that will generate
a new project for us. Alright, so we have our
Figma file ready to go. I'm going to quickly rename it. We have this blank canvas, this blank background
and space ready to go. So just a quick little
tour here of Figma. The tools are at the top and
you can share prototypes, play prototypes,
zoom in and out. On the top here. We, on the left have
your layers panel, your assets and your pages. And then on the right we
have your design elements, you're prototyping elements, and then your Inspector tool. So we won't be using a lot of these things in this project, but just wanted to
show you around. So first we need to make a
frame which is kind of like the equivalent of an art board in something like Illustrator. So we can just drag out a frame at any old
size that we want. Or we can pick the frame
tool and we can go to the right and it'll give
us some preset options. So I'm just gonna do desktop
and it'll label it desktop. So I don't want that. I want to label this system. This is where we're going to
create our design system. Then also really quickly
just to keep us organized, I am going to rename this page number
from this page name, from page one to system. Let's start setting up your design system
in the next lesson.
9. Design Your System: I know when I get
on the computer, There's a big fear of the
blank page or Canvas. How I overcome that fear
or feeling of overwhelm is by taking small steps to
create a design system, right when I start a project, I design system is
a collection of repeatable components
and a set of standards guiding the
use of those components. Think of this as your visual
language for your projects. It can include fonts,
colors, iconography, and other imagery that makes your project a consistent,
cohesive piece. So first I want
you to think about the title of your project. This should be something that explains your subject matter and cues your audience into what there'll be learning
about through your campaign. I'm going to call mine us plus guns because it's about the
United States and guns. I also kinda like the US, looks like us a bit. So us and guns kinda like a
relationship of us and guns. I kinda like the word play. But then I'm going
to create it into more of a square shape. I want you to create
a hierarchy or a system where your readers will easily be able to
see the titles, the headlines, and the body
copy of your campaign. So our titles are going to be the titles of our infographics, the titles of our webpages, and the titles of our
social media images. So we want them to be big, we want them to be
bold and noticeable. And the first thing that
your eye is drawn to, that's what I'm going to make
this really big and bold. Try to pick a font that has a variety of weights
in its family. So we have then we have light, we have regular, medium,
bold, semi bold. I can do a lot with that. Then I also have the Serif and
Sans Serif versions of it. And then like a
monotype version of it, which I probably won't use. But it's a good option to have. So we have our title. Now we're going to
create our headlines. For the headlines,
we want it to be slightly smaller
than the title text. So I'm gonna go ahead and
pick like 32 or something. Okay, So that's good. It's very clear from even
just looking at this, that the titles are
really big and important. The headlines are
also pretty big, but not quite as important. But I think I might do
like a medium instead. And then maybe we'll
go back and mix it up by doing that san-serif
typeface again. Okay, So this is looking good. It's clear that you
got a title here, clear that you gotta headline. But now what about
the smaller text in your project or
your body copying? We don't want it to
be quite as equal to the headlines because
it's going to be smaller. There's going to be
more Body Copy and then the headlines or
the title is even. So we need to make it a
little smaller so it can fit in with all of
your other content. Let's try something like 18. Okay, yes, That is looking good. So I think this is a
great typographic system. Now let's add these
textiles and Figma. I have my title selected, my little text box
selected for my title. I'm gonna go to my text
panel and click on this little four dot button to the right here
that says style. You can add a style by clicking this little plus button in
the upper right corner, and then you want to
name it something. So let's go for it
and name it Title. Okay, so now when I
click off of that, I can see my text styles. Over here. We have our title style, which is 64 points
over 70 points, which is the line spacing is
that second number 70 there. So now I'm gonna do the
same thing for my headline. However, I don't think I want
70 to be the line spacing, so I can edit the
style by clicking this little button over
to the right here. So let's do something
closer to 32. So there's not such a
line gap between the two. So let's do 40 and see
how that works out. Again, we're creating these
styles in a vacuum over here. We're not actually applying
them into a design yet. So we can add these
styles at anytime. As you can see, it's
very easy to go in and add styles
or edit styles. I want you to create
a color palette with at least six colors
and just drag out six boxes or shapes
to work with here. You can go in and align
things in Figma by selecting two different layers and going over to the top right here, you can see there are
different ways to align at the center, at the top. I want to align these
two at the left. Alright, so that's
clearly our colors. So I can go here
and pick my shape. I can go into the
fill panel where it's just this light
gray at this point. I can change the color
and a few different ways. So I can type in the
hex number here, or I can click on the square and select anything
on this gradient. I can also slide these colors. I can change the
opacity here too. But I liked that red. So I'm gonna go back
to the red. Perfect. Then I can create a style by clicking our four
dots in a square. And then I don't have any
color styles here yet, so I'm going to click
the plus button and just name it red and
create that style. Now, if we click off
of any layer on, we can see our color styles starting to appear
with our textiles. So go in and add at least six colors to
your color palette. When you're picking
your color palette, you definitely want to have
a diverse amount of hues. So your hues are
like your Roy G Biv, your actual color names. So the red, the
yellow, the green. That way in your
information graphics, it's really easy for people to differentiate the
different colors. And the different
colors will mean different things in your
infographics, right? It's also good to use a variety of values
and your color scheme. So e.g. this purple
is pretty dark, but this beige is pretty light. So there are good contrast
between each other. It's also really good
practice when making your color schemes to check
that it's colorblind safe. And the contrast between the colors and the
backgrounds are good to use. You can go to Adobe colors accessibility tools and check to see if the contrast is working
or not in your colors. So e.g. here's my beige color. If I was using my beige color on an all white background, e.g. that would not be high enough
and contrast to be legible. So I don't want
to use that color just for texts on a
white background. I want to use it and my graphics
that aren't actionable, like buttons and
things like that, because it's not
very easily seen. So go into the Adobe Color
accessibility tools and make sure that your contrast is looking good between colors
and your background. And your color palette
is color-blind safe. I think it's really nice
and a color palette to have a medium gray
color to use for text and things that we don't want to be
black or super harsh. The last thing I'm
going to ask you to make is a learn more button. Your button, we'll
just say Learn more. And you want the text to look
clickable and approachable, which I think it does. Compared to the body copy. It's a little bigger
and a little bolder, which I like and
I think will work very well and grabbing
people's attention. I'm going to change the
color by going into the fill and clicking on our styles
to maybe that purple. So that way it's not
black and boring. It's a little more exciting. Then I am going to try
making an underline. So it looks kinda like a
link that's clickable. I'll make the line a
little thicker and then maybe change it to like
the red or something. Okay. I think that looks like
a good button to me. It's not a super
obvious buttons. So a more obvious
button might look something like this where
it has a rectangle. And then I'm going
to move this back. And my Layers panel
here on the left by clicking command and
then the left bracket key. You can see in the layers
panel it's moving down. Moving down. There we go, it's
below. Learn more now. And then I'm going to make it
look even more clickable by rounding the corners
over here on the right. And then I'm going to not
make it this gray color, but maybe the beige
color, e.g. okay, cool. So I think these are two
good button options. Now I'm going to make them
a component which will be reusable asset that we can use throughout our
design project. So I'm going to click on the Learn More text
and the line below it. I'm going to right-click
and hit Create component. That is going to generate
a component for us. And the symbol for component is this little diamond shape that you can see in
the layers panel. And then over here in our
styles or our settings. I'm going to rename it from component 12 button or BTN line. Then maybe I want to
use this button style. Maybe I don't, I don't know. So I'm going to just
create a component anyway. I'm going to rename it btn. We'll see if I like one
or the other later. But you just need to
create one button style. So now we have all
of the components of our design system. You can also create a
set of iconography if that will help tie your
three infographics together. Now that you've established
your design system, it'll be super easy to jump right in and design your
information graphics, your webpage, and your
social media image. In the next few lessons,
Let's get started.
10. Design Your Information: You set up your awesome
design system in Figma. So now all we have to do
is take your sketches from paper to
computer and Figma, start by making another
page for your infographics. On the left here, you should have your six sketches close-by and you're going to pick your three favorite sketches
to design in Figma. My favorite sketches followed
that circular theme. So I'm going to start
designing those in Figma and see how they turn out. I'm going to quickly go through
and show you guys how I designed my three technically
for infographics, but I'm gonna give you some
pro tips along the way. Copy and paste is
your best friend. Once you have a few
different elements, you love them, just
repeat those elements. That will also help
your visual state very consistent across all
three of your information. Graphic, figma or the
program you're working in, do the math for you. I can just do the Starkey, so Shift eight and type in the number I need it multiplied by and by using that star key, it'll automatically calculate that
multiplication for you. The design process involves
a lot of trial and error. So tweak your information and your styles as you go. So e.g. this first infographic I made, I sketched out a very clear or what I thought was clear idea
of how I wanted it to look. But once I got on the computer
and I started actually making these graphics to scale
based on the information. It was not working. Some of the circles
were way too big. Some of the circles
were way too small. So I adjusted and created a more consistent graphic that had
more consistent sizing. To do that, I had to pull a
different set of information. Ultimately. Use
elements like arrows, lines, and shapes to
clearly label your designs. Make sure your design
elements are consistent. And if they're not, there is meaning behind the
inconsistency. Throughout your process, put yourself in your user's shoes. E.g. I ended up not overlapping the circles like I
had in my sketches. Because I thought it might be
confusing for my audience. I thought maybe they
might interpret it like a Venn diagram where the
overlap means something. Whereas here it was
just a stylistic choice that did not need to be
there and confuse people. Minimize texts on your visuals by using your graphics title or statistic as a label
or labels. So e.g. my statistic here, I split
it up into two pieces to act as labels for the
two different pieces that I visualized in my graphic. Whenever you can try
to de-emphasize or minimize the supporting
information like axes, keys, and things like that. E.g. in this bar chart
that I'm making here, I don't need two axes. I don't need an
x-axis and a y-axis. I can just use one
and then create labels to help get my information
across to my audience. Similarly, you want to strategically label
pieces of your designs, not necessarily
the whole design. So don't go overboard
with labeling things. Once you label and
one or two places, your audience will probably pick up on what you're
trying to communicate. Use Figma is alignment tools to keep your designs
tidy and readable. Going back to that copy and paste concept I
mentioned earlier, repeat your design
elements to create consistency and make
it easier on yourself. After you create one or
two of your infographics, you'll probably have
these consistent elements like your labels and arrows, lines, things like that, that you can reuse in all
of your infographics. That'll create a
consistent look and feel to tie all
of them together. Are you making a pie chart? It's super easy to
use arcs and sweeps. In Figma, you simply
draw out a circle using the ellipse tool and a little white dot will
appear, that's the arc. So click on the dot and
drag it up or down. And you're going
to create an arc, which is basically like a
slice out of your pie chart. And from there you can go in and say what percentage
you want the sweep TV, and that will be the percentage
that your pie chart is. Don't blindly stick
to your sketches. Experiment with styling,
color and layout, and keep working on your three infographics
until you're happy with how your designs
are coming together. You have your three
information, graphics design. So let's put those into a more final
real-world application by making a webpage design. In the next lesson.
11. Design Your Web Page: We've created a
really awesome set of three infographics that all
look really great together. They're here, they're looking
pretty on our computer. But how are they going
to get to our audience? That's the whole
point of design, is to reach an audience and share your designs
with the world. So that's why we're
going to create this data driven campaign around our three
information graphics. So we're gonna do
that by creating a webpage and a
social media image. And that way, our designs
will move off of just our computer and move out into the world and reach
our audience. Let's get started on
your webpage design. So the first thing
we're gonna do is we're going to add another page, your webpage design and your
social media posts design will live on this page. And that way we'll have
our infographics page still with all of our
original designs. So if you edit these
infographic designs at any point while you're making your web page and
social posts designs, your original designs
won't be affected. We're gonna go up to the
frame tool and we are going to make a desktop size frame. So there are a couple
of different options under these desktop presets. On the right here, I'm just going to click
the one that says Desktop, which should be a pretty
standard desktop size. Before we start grabbing our infographics from the
other infographics page, I am going to just set
up a quick layout grids. So if we go over
here to the right, we're going to
click Layout grid, except I don't want
a grid per se. I would rather have columns. So I'm going to
click on this button here and select columns. You can also do rows, or you can just work
on a standard grid. But I like to set
up some columns before I get started
on a web design page. And that way it'll just help
you stay organized and keep everything clean and aligned. I usually like to do
a 12 column grid for something like a
desktop sized page. Because that'll give us
a few different options. We can do like a three
column situation. We can work with four columns, we can work with two columns. Then I do like to
have some margins just so things aren't going
to the edge of my page. You can always click
on this frame and hide your grid at anytime by clicking
on this little eye icon. Now we're gonna go in and set up the framework of your webpage. So we're actually
going to go back to our system page really quick and we're going
to pull in our title. And I'm going to just place it to the upper left-hand corner. So now we're going to
establish some basics of our web page and we're gonna do that by creating
a header area. So we've already done that by
dragging and our logo type, or you can just type out your
title simply at the top. And this will act
as our Home button. Normally on a
standard website that would exist on this
upper left-hand corner. And then we can go in
and make a menu here. We're only making one
webpage for this project. Just to make this look like
a more robust product, we are going to make up
some other web pages here. I'm going to copy this over. Imagine what other types of information I could include
in this campaign project. Gun owners are like, why do people own guns? What are the statistics on
how many people own guns? Things like that. So maybe that's something I can
add in the future. I think that's a good
start to my menu here. So I'm going to stop there. And then I'm going to go
back into my system page and grab one of
these buttons here. In general, I don't
want my call to action on the whole website
to be to learn more. I want it to be something
a little more specific. So I'm gonna say take action. I don't want this to seem like a hopeless set of information. I want people to be
empowered by learning this information and feel like they can take action
and do something. But think about the actual goal of your campaign at
the end of the day, what do you want people to do after they learn
about your information? And that can be the main call
to action on your website. Now we're going to go in
and add our infographics. Okay, so now I'm going to
select my four infographics. I'm going to copy and then
I'm going to paste them. So if you can see here, I'm only seeing like one
infographic at a time. So people really have to scroll down to get through all
of your infographics. But in reality, a
lot of people don't take the time to scroll
all the way down a page. So if you really
want them to see all of your infographics and might be smart to collect
them more at the top. I'm going to make a few tweaks
to this page and try and get most of my infographics
above the fold. So what I ended up doing
is kinda going for this like Pinterest
feed type of look. I place all of my graphics and their own boxes and then made the background
a little darker. Something I did want to
do really quick though, is just make sure that my user is oriented
in the website. So this page and these infographics are
all about gun violence. I'm going to bold and underline
this gun violence item in my menu to make sure
people know that that's what page they're
on this website. One last thing I really
wanna do is make sure that people can learn more about each of these pieces
of information. So I'm gonna do that
by adding a learn more button to each
of these pieces here. Make sure you're grouping
or graphics buttons and any other design
elements appropriately, you can use boxes like this
or divider lines and make it very clear what title corresponds
with what infographic, what Learn More button
corresponds with what info, etc. Doesn't this project and your infographics
seem more real now, it looks like a real product
that could exist just by incorporating some
basic graphic design and web design skills. Now that we have your
information graphics all set up and your
webpage design, we're going to put them in another application
or another way to connect to your audience, which is through social media. So in the next lesson, we're going to bring those
information graphics onto a social media image.
12. Design Social Your Post: We have your webpage and your information
graphics ready to go. That's great. They're already
reaching an audience, but we need to get
the word out faster. We need to educate more people. So we're gonna do that by
creating a social media post. So let's set up another frame
next to our web page frame. We're gonna go to
the frame tool, and then we're gonna
go to social media. And there's a whole
bunch of presets here, just like we had for
our desktop setup. And there's an Instagram
story page setup right here. So we're going to
click Instagram story. We're going to change
the name to social post. Okay, so we have
everything set up. The first thing we're gonna
do is we're going to add our logo type or title. Whatever you ended up doing
as a little circle here. So on Instagram
Stories, normally, your profile, picture or image, whatever it's called nowadays, is usually in this little icon up in the upper
left-hand corner. We're going to make this look
real and like it's actually on Instagram by creating this little circle with your
logo or your title in it. Instagram also has a
text box next to it for your title of your
Instagram account to go in. And then most importantly, we are going to pick one of your infographics
to feature here. Make it bold, make it
colorful and attractive. So it'll grab
everyone's attention and get people to
engage with your post. Your goal is to get
people to click on the link to your website
to learn more about your topic out of
buttons so users can click through and get more
information on your website. So I'm pretty happy with how my social post
design turned out. I ended up making
quite a few tweaks, like reverting back to
these arrows for my labels. Instead of doing this key like I did for my webpage design. So I think this is a really
fun and approachable design that will work well for
an Instagram story. Work on your social posts design until you're
happy with it. And then we're going to critique our designs in the next lesson.
13. Critique Your Design: Now that you've put together
some awesome designs, it's time to trade your designer hat for
your critiquing hat. This can be really hard to do, but it's really important as
a designer to always push yourself and make sure
that you're making the best work that you
possibly can be making. I definitely recommend
taking a break when switching from design
mode to critique mode. It can be really
hard when you've just designed something
really awesome that you're really proud of to then judge it and challenge it. But by judging and
challenging your work, that's how you grow
as a designer. So I recommend taking about a 24 hour break in-between designing something and
then critiquing something. Here are some questions
that you can ask yourself while you're
critiquing your work. Do your designs
communicate your story? Remember at the
beginning of this class, you came up with
a story that you want it to tell
about your topic. Is that story coming through with your three infographics? Is the message or information clear and easy to understand? Maybe now that you're looking back and challenging your work, a chart didn't turn out exactly
how you thought it would. And maybe it's confusing
or it's just not working. And the format that
you originally chose are all of your texts
and design elements legible? It'll be very hard
to communicate your story if your audience can't read your text or
see your pie charts, are your labels, units, and keys distracting
from the information. Remember, your information is the most important thing
about your graphic. You don't need any
extra elements distracting people from the
main message or your story. And most importantly, are you showing and not just telling? You can always ask your friends or family to take a look to. That way, it'll offer a completely fresh and external
perspective from yours. Implement any of
those little tweaks or maybe big tweaks
that you need to improve your design
and get it ready to save as our final version
in the next lesson.
14. Save Your Designs: You've implemented
all of your changes. You have really strong
designs that you're obviously very proud of
and I can't wait to see. So now we need to save
your final artwork so we can share it with our
classmates here on Skillshare. Sigma makes it really easy
to export your designs. All you have to do is click on your frames that
you want to export. So we want our webpage and our social posts to
share on Skillshare. So we're going to select
both of those frames. We're gonna go
down to the bottom of this right panel and
we're going to click Export. You can save it as a PNG or
a few different file types. But I think PNG or
JPEG is probably the best for our
class purposes today, you select your file type. You can add any file names here, but it will just
automatically save your files as the
name of the frame. So it will save
this as web-page. And this is social posts, which is why it's
really important, again to stay organized
and Figma and label your frames, your
pages appropriately. It'll just set you up
for success. Later on. We can go ahead and
click Export two layers. And it will
automatically download our two layers in a zip file. Congratulations, after
all of your hard work, you've finally saved
your final designs. And I can't wait to see them. Be sure to upload these two images along with your sketches to the
project gallery. Put your designs and a mock-up to help see how it would look as a real product and make it look more real on your
portfolio website. Now we're just going to wrap up a few loose ends in our
last couple of lessons.
15. Other Applications: All of the important skills we just learned can be applied across any design
field and application. I hope you're as excited
as I was to apply these really important skills
in any design project. As I mentioned before, you can keep going
with this project. You don't have to stick to just three information graphics. You can build 100 graphics to put in your data
driven campaign. Update your design process
using the steps we took in this class to bring form to content through
sketching and iterating. In other words, not just
stopping at your first idea, but really pushing the
boundaries and getting more sketches out or trying
different design styles. Use a design system and your process to
create consistent, visually cohesive
design projects. Establishing those
styles upfront and your project can really make a big difference and help everything come
together in the end, it also makes it
easier for you to focus on your overall design instead of the little
design elements that pop up as you're designing, create more strategic
color schemes that are more inclusive to a wider audience by using those Adobe Color
accessibility tools. Practice empathy for users by considering how others might view or use your design
throughout your design process. Learn more about web design, user experience or
interface design, marketing, and more
topics that we explored and touched
on in your project. Let's wrap everything
up in the last lesson.
16. Conclusion: Congratulations, you
should be so proud of yourself for working through
this really challenging, but hopefully insightful
information design project. You've learned a lot in this
information design class, like giving form to content,
visual storytelling, practicing empathy for users, building strategic
design systems, creating visually
cohesive projects, and designing and Figma. But if you only take away
one thing from this class, I hope it's that you can and
should continue teaching herself new ways to grow your visual
problem-solving skills. Challenge yourself
and your skills regularly by creating new
projects for your portfolio, like the one we
created in this class. It will significantly strengthened
your portfolio to help you land jobs and sharpen your
knowledge simultaneously. Don't forget to upload your campaign project to
the project gallery by posting your sketches
and your final webpage and social
media designs. Be sure to reach
out to me or any of your classmates to
get new perspectives, get feedback, and hopefully
improve our design community. Thank you so much for
taking this class with me and learning more
about information design. I'll see you in the next class.
Carolyn Owsiany, Senior UI/UX Designer
