Introduction
Hello, everyone. Welcome to the live stream of our webinar, How to Get Started in Graphic Design. My name is Dan Rodney, and I'm an instructor and course developer at Noble Desktop. I've been a graphic designer for over 20 years.
Tonight, we will be talking about graphic design and how to get started in this field, whether you want to become a full-time freelancer or create some designs in your spare time.
In the video description below this video, you will find a link to this presentation for future reference.
We're a training center based in New York City for anybody unfamiliar with Noble Desktop. We teach people in live online classes and in-person in New York City, and we've been around for over 30 years. Our specialties are design and coding, so the topic of tonight’s presentation is one of the main topics that we teach.
What are we going to be talking about tonight? We're going to be discussing:
- What exactly is graphic design?
- What do graphic designers do? I'll be showing some examples of design work.
- What apps do graphic designers use? It's important to know what you'll need to learn to become a graphic designer.
- What type of computer might you need to develop a portfolio of your work? A portfolio is how you show your work to people, which will be essential for getting a job. When you apply for a job in this field, you have to make a resume linked to your portfolio.
How to Get Started
A Lesson Learned
Ultimately, I would recommend starting with one particular design area and focusing on that. Then you can branch out and get into different types of areas.
What are the areas that you're going to start with first? That's one of the reasons we'll be talking about the various types of design, and you’ll need to learn the apps you can use to make designs.
Now, the apps are just tools. It's something you're going to use to create designs. It does not make you a good designer, but you still need to know how to use the tools. For example, if you're a construction worker and you don't know how to use a saw or a screwdriver, you're not going to be very useful as a construction worker.
The same thing applies to designers who don't know the apps needed to design, which will make it very hard for you. As I said, knowing an app doesn't make you a good designer, though.
The other thing you need to learn is design concepts.
What makes a design compelling? Examples are typography, color composition (which is how you arrange your layouts), and if you're getting into digital stuff, user interaction and animation.
Depending on the mediums, there are different types of design concepts that you will need to know. What makes a good design, and then you execute it with the apps that you learn.
To get started with this, you need to practice. Practice is what makes people better.
Here’s an excellent study that a photography professor conducted on one of his classes: He had half of his class take hundreds of pictures, and they were graded on the volume. The other half had to shoot one perfect picture, and their goal was the best single picture they could make.
The second half analyzed their work, and they didn't focus on taking pictures. They focused on trying to make the best photo. The first group had to shoot many photos, and it turned out that their work ended up being a lot better because they practiced. The more they shot, the better they got.
The group that only shot one picture was tasked with trying to make the singular best photo they could. They didn't shoot as many photos, and therefore their work was not as good.
Practice makes perfect. When it comes to design, this does hold up.
Practice as much as you can. In the beginning, you're not going to be as good as you want right away. You might not be able to produce high-quality designs immediately. What's going to bridge that gap is practice, practice, practice. The more you practice, the better you'll get.
Ultimately, you’ll want to build a portfolio that can present your work to others, and some of those projects can be created as “practice projects.” If it’s good enough for your standards, you can put it into your portfolio.
What is Graphic Design?
Graphic design is visually communicating through artwork with a combination of images and text.
It is a graphic medium that can be many different types of things. It can be designing logos, ads, social media, graphics, websites, apps, books, signage, and packaging. These are only a few examples. You can probably think of more, but generally, they will fall into either print or digital categories.
Graphic design has various applications, especially in the digital sphere. For example, this presentation I’m giving right now had to be designed using graphic design principles.
There are different areas of graphic design that will help you practice. Some people choose to focus on one.
Graphic design has been around since about the 1970s when the term “graphic design” was first coined. Some people still associate it with older types of design, such as print, because back then, there wasn’t any way to create digital designs. Nowadays, you can specialize in various design topics if you're a graphic designer.
If you say you’re a graphic designer, you’ll need to specify your area of focus. Most people can infer that you work with text and images, but they won’t know the exact work. For example, a visual designer specializing in digital designs may not work in print. It’s vital to specify your specialties when telling others about your craft.
Digital areas of graphic design, such as User Experience (UX) Designers or User Interface (UI) Designers, generally have newer terms. Designers created these terms to help differentiate themselves from general graphic design because graphic design as a field is broad.
Examples of Graphic Design
Logo Designs
Let’s take a look at different types of designs.
Throughout this presentation, you’ll see some portfolios, and you should have access to the link through the presentation slideshow. I’ll try to reference either the link, the graphic, or the person’s name to help you find their portfolio. Later, I’ll talk about what you should keep in mind while building a portfolio.
This first example, Ignacio Macri, is a fantastic logo designer. The logo shown in the slideshow perfectly displays their skill: Nutriveristy. The fork looks like a university. It has a simple text style and a clear image of its supposed to be.
If you go into their website, there are some fantastic displays of their work. Here we have another excellent example: Debugging. They took the “D,” the “E,” and the “B” and designed them to look like a bee, which makes an excellent symmetrical and iconic graphic.
The beauty of logo design is distilling ideas into something recognizable and straightforward. It should be simple because you can tell there are few visual distractions. If there are too many design components, it can detract from the original intent, and it will be hard to reduce it down to a smaller size.
This person’s designs work well with a smaller size. For instance, if the design were on a website, it would still work nicely. Logo design, in particular, is the art of creating something that is unique and can draw attention, even if it’s small. Whether people pick up on the subtle details doesn’t matter too much. It’s there, and the subtitles will stick with the viewer even if they don’t consciously notice them.
Book Designs
I used to work in a design studio that produced books, and I've worked on books like “Janson’s History of Art,” which was a thousand-page art history book.
When I tell people I design books, they often think that I only design the covers, but there’s more to it. It’s easy to forget that design also happens on the actual pages of the book. For the “Janson’s History of Art,” one thousand pages needed to be laid out and the cover. It was a year-long project.
Some books are more straightforward and take less time, but some books are complex with details such as color choices, text design, and layouts.
These concepts apply even if the book is being sold online. If you look at the image shown here for “The Shape of Design,” it showcases an image of the book. Looking at it closely, you can see the shadow that makes it stand out like a physical book on a table. It’s not digitally showing a file. These are photographs of the book.
In this case, a companion website went with it, and you can view parts of the book on mobile as well. You can see the illustrations like the digital components that went into it, but you also see the physical components. This example is a nice mix of digital and physical, and this mixture creates a nice variety in the portfolio.
Social Media Graphics
You may take it for granted when companies post on social media, and you might not think about what goes into creating those graphics. Maybe it's mostly photography. It depends on the particular image that companies are posting.
This example was created by a company called Dare to Know, and their goal was to create social media graphics that feature specific messages.
They would post these images on their website and social media so that people could download them and spread the word. Somebody had to design the graphic, and the typography, colorize the photograph, decide what colors in the photos, and choose the photos to use.
A lot of thought went into putting the logo on here, creating the outline, and making the dark background. All of those decisions were made when designing this visual.
When a company makes an ad for social media, somebody has to design those graphics when they just create a regular post. It’s easy to forget that somebody had to make that.
PowerPoint Presentation Design
PowerPoint design is an area that not many designers pursue, but there are plenty of uses to having these skills. In business, PowerPoint is critical to businesses. Many businesses operate through Excel and PowerPoint, and many designers aren’t interested in presentation design. That’s okay—it’s a pretty niche design skill that’s still worth learning if you have even a vague interest in it.
I know a woman who has purely made presentation design for decades. She made good money from it, and because most designers don’t work in presentation design, there’s not much competition.
Presentation design is a specialty niche that allows presentations to be more effective. Since businesses might be pitching a moneymaking idea or winning over clients with their presentations, businesses will pay to have someone create a visually pleasing presentation. The better design, the more influential the presentation is going to be.
It doesn't have to look like PowerPoint fonts or designs, either. There's no animation in the presentation shown here, but you can also animate images using PowerPoint presentations. It doesn't look like a typical PowerPoint presentation because it's custom-designed with custom graphics typography.
PowerPoint isn’t something your average designer knows. If you want to learn PowerPoint, it’s a very niche skill with a ton of value.
Apps in Graphic Design
When it comes to apps that graphic designers typically use, the Adobe Creative Cloud is a designer’s standard program. This package contains Photoshop, InDesign, and Illustrator, which you can use depending on your needs.
Adobe Photoshop is for retouching photos, color correcting photos, and social media graphics. Photoshop uses a photography tool as well as a graphics tool.
The graphics in it are pixel-based. Pixels are these little square blocks that, when formed together, present a digital image. When you take a photo, the real-life image is converted into pixels.
Adobe Illustrator is a vector design tool that does not break images into pixels. They're perfectly crisp, clean curves that, behind the scenes, are mathematically described.
Whereas Photoshop is good for retouching photos and pixel-based graphics, Illustrator is suitable for logos that require precise proportions. Many fashion designers use illustrator because it’s great for patterns. People who design packaging will use Illustrator too.
Adobe InDesign is specifically for print-oriented images. While it’s commonly referred to as a digital image program, it’s also great to use for creating PDFs. InDesign is vital when it comes to single or multipage layouts.
Learn Graphic Design
These apps require specific skillsets, and luckily, you can learn those skills with the right help. You can find a link to different certificate programs as we go through the presentation.
The Graphic Design Certificate program will allow you to learn Adobe InDesign, Photoshop, and Illustrator. There’s also the Graphic Design Portfolio Bootcamp, where you’ll learn how to use all of these programs and some design principles that will help you build projects. Here are some examples of projects our students have made in the past.
Web Design & UI Design (User Interface Design)
Let's continue onto some specialty areas. We’ll start with web design and UI design, also known as user interface design.
UI design is designing the visuals of digital products. If somebody says that they're a UI designer, that might mean that they create apps or websites or any sort of digital interface.
If somebody is a web designer, you know they specialize in websites. If they're a UI designer, that doesn’t necessarily tell us what they make. Do they tend to work with apps, websites, or a mixture of the two?
UI design is typically broader than web design.
When you are a UI or Web Designer, you'll still think about layout, typography, color composition, and visuals. It’s similar to a Print Design—you’re still creating layouts and typography, and you’ll ask yourself the same questions while designing. Am I making one column or two columns? How do I space things out?
People also refer to UI design as visual design, but the term visual design doesn’t denote the visual designer's types of designs. In most cases, Visual Designers create digital work.
Print is a static medium. Things don't move. But in UI design, web design, and visual design, you will be dealing with digital objects, and these objects can move.
There can be animations, and users can directly interact with the images on the screen. That's the extra dimension that is not found in static mediums.
If somebody switches from print design to digital design, they're going to think about these new concepts. Thankfully, most of the core concepts they learned in print design would translate to digital design.
Sometimes you’ll start with one type of design and then expand into other types of design as you gain more experience. The fundamentals like layout, type, color, and composition are still applicable no matter what graphic design area you choose.
Examples of Web Design
Let's take a look at some examples. You might be saying, “I've already seen websites,” but how many of those were well-designed websites?
Here’s one called Stripe. Stripe does payment processing for various companies, and they have some cutting-edge designers and developers. The designers create the visuals, and the developers code the site to ensure it works. They have these beautiful gradients that are animating and changing. It's even going over the type and interacting with the type.
As far as a visual goes, Stripe has an identity for its company, and its logo shows some of that visual identity. There's a little bit of a slash on the bottom of the “P,” on the top of the “T,” and on the dot of the “I.”
Notice that the diagonal slashes are all at the same angle. These slashes are built into the Stripe logo, and that's part of their identity. At some points in the rest of the design, you'll see that they will integrate that same slash that is going through here.
You'll see that same diagonal as we go through their website. Stripe doesn’t always use it, and sometimes the letters will have straight across lines, but you'll notice they integrate diagonals at specific points.
One of the things that I like is that they change it up a little bit. If they always use the slash repeatedly in the same way, it might get a little dull and repetitious, but they mix it up. That adds a little bit of interest each time you're going through it.
There are subtle differences to keep it interesting, yet there's still some repetition so that it becomes a repeated system. There's a delicate balance between overdoing a design element and not using it enough. If it’s used too little, it doesn't become part of their visual identity to their audience.
Stripe has a beautiful design in terms of the color choices, the spacing, the alignment of objects, the subtle shading of the shadows, and the uses of animation. The animations, in particular, are not super in-your-face, annoying, flashing all the time, but every once in a while, they catch your eye. The same thing applies to these little icons. They're not constantly flashing in your face, but there are subtle little animations that happen sometimes.
It’s not enough to design a website with animations. A developer has to be able to code these animations as well. It takes a team of designers to be able to design the vision and developers to execute that vision.
If you continue going through the website, you’ll find a similar style occurs throughout the pages. The height of the entire site feels cohesive. It has similar iconography and the same kinds of animations at certain times.
Another site example is Optimo. This website has a more straightforward design setup. The brand revolves around expensive hats, and the subtle details on this website take that into account. Whenever I hover my cursor over one of the hats, the hat doesn't lift. Instead, the back of it raises, and the front goes down.
Think about somebody with a hat for a moment. When that person greets you, they would grab the rim in hand, take the hat off their head, would tip it towards you. It’s a sign of respect. This website imagery emulates that motion—they're tipping their hat to you and showing that same respect.
It's a little twist on something you would see in everyday life. It looks like you can interact with it.
When you click on it, and it goes to the next page about that hat, the hat flies into view. It's like they threw their hat into the ring. It glides into view and then settles down, and there's this three-dimensional shadow here.
When I click the following button, the next hat flies across the screen again and settles down again. Notice that the shadow is on the ground the whole time, and it's the hat that moves.
That adds to the realism that the hat is floating in space. This page is just a simple slideshow that goes from one photo to another but adding that subtle animation makes sense on a conceptual level and adds a little bit of liveliness to it.
Sometimes, a simple animation can set your website apart from others. Simplicity is key. I went to a talk once about logo design, and the presenter mentioned that you want to have one visual trick or one visual idea at a time. You don't want to have four or five of them because you're diluting it if you put too much in there.
The logos we’ve seen thus far only utilize one visual trick. The Stripe logo has that diagonal line concept, and the hat website has the tipping idea here. That's their little trick, their unique thing that sets them apart.
They could have just taken the easy route and made a standard slide show that moves from one photo to another. It would have been okay but not as memorable as this extra little custom animation.
Here’s our final example, Harvard Law Review. I highly doubt that any of you watching this have gone to the Harvard Law Review website. Picture a law website. Do you think it's going to be a stunning website? How good can a law website possibly be?
Harvard Law Review is a beautiful example when it comes to typography. They've chosen gorgeous typefaces. It’s easy to read, but they paired everything well together.
They have a simple sans-serif typeface up here paired with a serif. So you can see those serifs, and they appear with italics. This text is almost script-like, and not all italics are presented this way. Some italics are slanted, and they're not script-like. They put a little divider line here with an “X” going down at the bottom. The mailing list is beautifully laid out with nice white space around the background.
It's not crammed or boringly laid out. The company puts some nice divider lines that are subtly colored. They have the HLR as like a monogram here for Harvard Law Review. There are clear labels of the topic, the article's name, and the introduction to tell you something about that particular article.
They visually look different by conveying their importance. For example, the title is the most prominent text on this page. Then there are these little numbers here with a tiny diamond around the numbers to make them stand out.
You can click more if you want to see concepts you have to think about as a visual designer or a web designer. For example, how can I simplify and give people access to what they want without cluttering up the interface? Maybe I don't have to show it all. Maybe I can make a reveal more button as they did here, and such a pleasant visual reading experience.
Harvard Law Review’s website doesn’t have a stark white background. It's off-white, and that makes the contrast not quite as extreme. If this were a bright white background, it would be harder on your eyes. The contrast would be a little extreme. They have white on the navigation background here to set off the navigation from the rest of the page.
The white color makes it a little bit nicer to read. Also, this text isn't quite precisely black. It's a very dark gray, which also gives it some subtlety. Having a little less contrast is easier on your eyes and easier to read when having a text-heavy page like this one.
If you're interested in web design, as you browse the web, look at the sites and pay attention to what makes them well-design or badly-designed websites. Look at designs with a critical eye and think to yourself, “Why did they do this?”
What I think might be good, somebody else might think is terrible. We're never going to get everybody to think your design is lovely. But does it work for that particular goal? Does it function properly? And do the vast majority of people find it appealing??
Examples of App Design
You could do pretty much anything you want with apps and websites.
There are some specific rules in terms of website navigation. When it comes to apps, there are some standards—such as tabs that you can tap to toggle through pages—but apps tend to stray from guidelines. A game is not going to have tabs across the bottom—a game will probably have its own specific custom typeface. It depends on the particular app.
The norms of the app usually come from the genre, such as the game example above. There might be a bag or cart icon somewhere on the top for shopping apps. We can often find those in the top right corner, but they may be somewhere else, depending on what the designers intend for the app.
Think about the goals for the app when you’re designing it. What is the purpose of this app?
When it comes to both websites and apps, you have to consider usability. I would say that there's more variation among apps than among websites.
For example, there isn’t a website that is a camera app, right? A camera app is going to be different than a calendar. Websites tend to hold more similarities between each other because there are only a handful of ways we can utilize websites.
There's more variety in terms of user interaction when it comes to apps. Both require thought into how they’re going to work, but designing an app usually includes a broader array of design choices than websites typically do.
Apps for UI & Web Design
Somebody had to design the Google Play store. Somebody needs to think about the onboarding experience of somebody using it for the first time. That person is the UI Designer, Visual Designer, Web Designer, and other positions that are involved with graphic design.
People typically use Adobe XD, Figma, or Sketch to design their apps, but some use all three. These three apps each hold the same essential tools: they’re digital design programs that three different companies made.
Adobe XD is made by Adobe, and if you already have the Adobe Creative Cloud bundle, Adobe XD is included with it. Most designers use the other programs within the Adobe Creative Cloud, so this is the program that designers typically use.
Adobe XD and Figma can be used on both Mac and PC, but Sketch is an app that only works on Mac. Before using these apps, we used Photoshop or Illustrator to make our digital designs, but Photoshop and Illustrator are not focused on user interface.
These three apps are focused on digital design and user experience. It seems that Sketch and Figma are the two most popular ones right now, but Adobe XD and Figma are the most capable in terms of versatility.
You can use them to create a working prototype that will allow people to simulate using the app or website. It's not building them entirely but designing how they would work for testing purposes.
If you're looking for industry jobs, you can apply for any of the ones listed here, but each position uses the same core graphic design skills. When you learn one of them, the others will become easier.
Should I Learn to Code?
“Should I learn to code?” is an essential question if you want to work with digital graphic design in any capacity. Some web designers will learn visual design and coding, and some web designers don't learn coding at all.
If a web designer also learns to code with HTML, CSS, and JavaScript, the three coding languages that we use to build a website, they would use Visual Studio Code, a free code editor.
That's the most popular code editor out there. It's not a design app, but when we're talking about apps, you would need to write the code in a code editor such as Visual Studio Code.
Whether you should learn to code or not depends on your career goals. As a company, we recommend that you understand web coding because it will be helpful for you as a Web Designer.
If you know nothing about how a website is coded, your designs might not translate well to code. If you understand how code works, it’ll be easier for you to create designs that you can convert into code.
You need to understand web pages because search engines will show the headings you use on Google, and it needs to be coded in a specific way to allow search engines to find them effectively. The more you know about coding, the more you’ll be able to take advantage of what coding can do for your website or your app.
Developers will be able to translate your ideas into code. The more you understand their language, the more you’ll be able to communicate with them.
Nowadays, the web is more capable compared to what it was decades ago. If you're working with a small budget or running short on time, you might avoid making certain features right away. Your decisions will revolve around your team’s design skills, but they will also revolve around your team’s coding skills.
If you have a client working multiple rounds with you, you might want to work on the more accessible aspects upfront and save the more expensive and time-consuming aspects for the next round.
I know both coding and design, and I can't imagine designing for the web without understanding that code. Knowing both made me a better designer.
Web Animation
There's also web animation. Video and animation are becoming more important on the web. Think about most social media sites like TikTok and YouTube. They’re mostly video, and a diverse array of programs are used to create those animations.
Animated GIFs are helpful on social media. They're also used frequently in HTML email. If you see animation in an email, most likely it's an animated GIF.
Those are created in Adobe Photoshop. Adobe After Effects is great for creating remarkable animations if you want to do more complex animations.
It's about producing a final video or animated GIF instead of an interactive element that you would find on a webpage. When it comes to the interactive elements in a webpage, we use JavaScript, a programming language.
JavaScript allows you to make interactions that occur when you click on something. For example, most of the interactions you can do on Stripe’s webpage were probably built using JavaScript.
Then there’s the GreenSock Animation Platform; a JavaScript library specifically focused on animating. If you want to make complex animations with as little code as possible, GreenSock is the way to go.
CSS, or Cascading Style Sheets, is how we style fonts and colors and padding—-which is like space between things—for simple animations within a webpage. It's essentially the styling language that we use in a webpage.
You can make simple animations. For example, when you hover over something and it changes color. You can get a bit more complicated than that, but as you get more complicated, you want to use JavaScript instead.
Let's take a look at some examples. Here’s an animated GIF that’s traditionally animated, where you're seeing one image after another, and the animated GIF format goes through picture after picture. If you go through them quickly, they won't necessarily look like picture-by-picture or frame-by-frame animations, but that’s fundamentally how the GIF format works.
You can make simple stuff in Photoshop. Adobe After Effects is good at creating more complex animations. I would say that if you're creating something straightforward with After Effects, it's overkill. It’s easier to create simple animations in Photoshop, and it's easier to create advanced, complicated animations in After Effects.
When it comes to GreenSock, it contains interactive animations. You could simply watch it. You don't have to interact with it, but you can because it's coded with JavaScript.
This animation is an excellent example here. There's also some sound when I click on any of these images. A high-quality animation starts as I hover over them, and that's all done using GreenSock. You can do a Fruit Ninja-style swipe on these pictures to get an animation to open this one up.
This one is a more traditional website with animated elements in it. You can scroll through the page and notice subtle details in these animations. This one has a pulsing effect, where it grows bigger and smaller, and you can see how this small detail gives the website some life.
Learn Web Design
Animations are meant to keep things exciting and draw your attention as you’re scrolling through the pages. The types of animations and web design details you can learn will differ, but you’ll learn a wide array of them through the Certificate programs.
The Web Design Certificate will teach you how to design with apps such as Adobe XD. Having the app itself doesn’t necessarily make you a good designer. You’ll need to know how to use it, and having an instructor teach you will give you insight on techniques that you can easily miss if you’re looking through it on your own.
Here are some examples of work from the Visual Design Portfolio Bootcamp. These examples are some student work from people who have gone through the program. You’ll learn how to use the design app and what makes a design compelling and usable. Then you’ll learn a little bit of coding to help build websites.
The Visual Design Certificate focuses more on design but not how to build websites. You’ll learn how to use Photoshop, Illustrator, and Adobe XD. There's no coding in this program.
Then there’s the UX & UI Certificate. UX is user experience, and that’s generally researching how people respond to using the website or the app in question. UI is user interface, and that’s how easily people can interact with the interface. We’ll make improvements to the user interface based on feedback. There’s some prototyping involved in both processes.
If you mix and match these two aspects together, you’ll have something that works well and looks good. This certificate doesn’t involve coding either, but it does focus on how it works and how it looks.
Computer Requirements
You might be wondering, can my computer handle these apps? What if I'm getting a new computer? As long as you have a newer Mac or PC, you’ll be able to work with most of these apps.
If you have an outdated computer, you might want to consider getting a newer one before using these apps. As long as you have a decently powerful computer, it’ll work. There’s some debate about which style of computer to use—Mac or PC—depends on personal preference.
If you're going into a design studio, most design studios use Macs. I know both Mac and PC. I vastly prefer a Mac, but I also know how to design on Windows. You can do your work on either platform. While most design studios prefer Macs, PCs can run most apps.
These days, if you're getting a new computer, make sure that you're getting what's called an SSD, or solid-state drive, instead of a hard drive. When I refer to hard drives, I'm talking about the spinning hard drives, such as the old thick platter-based hard drives.
Those are considerably slower than solid-state memory. Most laptops these days are sold with SSDs, but some cheaper computers will have a spinning hard drive simply to make them cheaper.
Getting a fast SSD will make your computer faster. The last time I had a spinning hard drive computer, it would take a couple of minutes to boot up. Compare that to the SSD, which would boot up the computer in seconds. Solid-state drives were a massive boost in performance. Like I said, most laptops these days are only made with SSDs.
If you're getting a desktop or something, avoid the regular spinning hard drives because they are super slow. It’s okay to have them for external storage and to put files on them. When it comes to the internal drive you're using to install your system, get an SSD.
If you’re getting a desktop and a monitor with it, make sure you get a high-resolution monitor. Apple calls these retina displays. Most of them are 4K or 5K displays. HD is high definition, but 4K is ultra-high definition.
4K and 5K will have a sharper, crisper display. You don’t want to design on an older low-resolution display like an HD monitor because it will not present well on a higher quality screen. They are more expensive, but they’re worth it.
It’s important to note that you’re unlikely to buy tons of monitors over the years. You can buy a monitor that works for you, and you’ll keep it for years. It’s worth investing in a quality monitor because everything you create will be through that monitor.
What Professionals Use
Professional designers use the Adobe Creative Cloud, and we use the Creative Cloud because the files go across Mac and PC with one subscription. If you’re a freelancer and working by yourself, are there ways to save money? Yes, other apps are out there, but if there's any chance you'll be working with other designers at all, Adobe is the industry standard.
Portfolios
Portfolios are how you use your work to communicate with the world. It’s how you show people what you can do.
Let’s take a look at some portfolio examples. As we're looking at these portfolios, think about how they're presenting it and not necessarily the work they show. Don’t think of it as “let me critique this person’s work.”
Instead, think about the presentation and imagine how you want to display your portfolio. I’ve chosen differently styled portfolios presented in various ways to give you some ideas.
These examples range across a variety of different industries. This website right here shows that this person works primarily with 3D graphics. All of the essential information is here: Danny Jones, a 3D designer from San Francisco, California.
This portfolio clearly shows that Danny is a 3D designer and where he's located. Then I can check out his work. I’m getting a sense of his style without needing to click anything.
When I click on something, it shows more extensive displays of examples that talk a little more about the project details. This particular design was a personal project, and the designer clearly shows that a company did not hire this designer to create this design. He simply wanted to make it.
That’s an excellent way to present your work when you're first getting started. You can still show off your skills and work before you’ve booked your first client. It didn't matter that somebody didn't pay him to make this work.
Here’s something else to consider: What if you want to do some personal projects to show off your skills that you're not allowed to display in your day job?
You can still present personal projects that show your ability, even as a professional working in the industry for years. It's okay to have these personal projects and label them as personal projects in your portfolio.
When you get to the bottom of the page, there's this button to go into the next project. It’s nice that he leads from one project to the other.
When you get to the bottom of the page, you’ll want to see more, and most likely, you're going to click on that button and start a brand new page. Then the cycle will continue as you proceed through this portfolio.
This example is an excellent way to set up your page for usability. I can always go back to this button if I want to see the overview of the projects again.
It doesn’t matter what you’re making, either. If you're making website design, interior design, logo design, or any other type of design, having prominent beautiful examples in an easy-to-navigate format makes for a pleasing experience.
Let's take a look at another one here. From this simple homepage, I can see this person’s work. One thing I would like to see in this case is a section that shows their specialties. What does this person do? They don’t say an easy-to-read statement readily displayed.
I can start to look around and figure out what they do, but it's not immediately apparent. So I would like an introduction when you enter the website.
Here it does say creative. It shows art direction, design, and collaboration with somebody else, and they give credit to the other people involved in the project.
You can go through these pages and see what they've done for each particular piece. As you scroll, you can find excellent examples that are easy to see.
You should put prominent examples of your work, but I've seen lots of portfolios where they give tiny little thumbnails that are hard to see the finer details of their work. You’ll want to make your examples big to let everyone see their quality.
When you get to the bottom, you’ll find another grid where you can see their work. One thing I like here is that this person labeled each as editorial design or brand identity. That was something that was missing on the homepage. If I go back to the homepage, nothing labeled the kinds of design they did. I think that actually would have been helpful on the homepage.
If you’re applying for a job, keep in mind that you could be one out of one hundred people. What if the company has to look through fifty websites? They only have one minute to look at your work. You’ll want to make it as effortless as possible for them to scroll through your portfolio.
This example is one that I like because it’s simply displayed. There are no pages, and there's no clicking to the next slide—there are only edge-to-edge, border-to-border displays full of the most significant examples of the work possible in one seamless scroll.
While this example doesn’t label the project, it doesn’t need labels because the project types are distinct. Steven creates packaging because he shows us plenty of bottle labels. He alternates between the bottle packaging and the 3D graphics, and each project is different from the one immediately before and immediately after.
Then at the bottom, it shows that you can email him or contact him through social media. This page was simple because it was only image after image, but you get to see the detailed quality of his work. It could not be a more straightforward user experience. All you need to do to see everything is scroll down.
It could help have some language potentially describing the work, but it might not be necessary because of how the page flows. The main idea is that you want to show people what you can do. You want to make sure that they understand your style and that you can show them prominent examples of your work.
Let's take a look at two more examples here. This one is for a web design company. Click on it to load it up. They show the desktop version, the mobile version, and the tablet version via an iPad.
In this last example, one thing to note here is that the grid was not relatively even. Like just two columns, the two columns overlap a little here and then mix some of the text with the visual. Suppose people don't want to read it because they don't have time. But if they're interested, they might take the time to read that.
I think it's nice to have some text explaining certain parts without overwhelming people with it. This person knows that people might not read that text unless they're interested, but if they are interested, some of that text could be useful for them.
When I get to the bottom of the page, they have related projects, but they also have a close button, or they have the arrows up here at the top. As I'm scrolling through at any point, I can go to the next project.
Building a Portfolio
These were a few examples to give you different ways to present your portfolio via an easy-to-use format. Make it easy for people to flow through from one project to the next, and tell people what you do. Make sure that is clear to people.
I've seen many portfolios that don't clarify what they do. They don't make it easy to navigate, they don’t display examples that are easy to see, and they don’t make it easy to navigate.
Sometimes they’ll have their pages require more clicks than necessary, and these small details can derail your portfolio if you’re not careful. All of those things will work against you.
Make your portfolio website the best example of your work. That gives you the best chance of getting hired by that client or job.
When it comes to building a portfolio, start with a few projects. As you're building it, you're going to start small. You're not going to have a ton of work.
It's perfectly okay to start with only a handful of projects. It's better to have a few outstanding projects than many mediocre ones. Don't bring the average down with some low-quality projects with the sole purpose of filling out your portfolio.
In the early days of my designing career, a student portfolio went viral, and it was his redesign of American Airlines’s website. It was purely a student project that he made when he graduated from college.
He made a presentation video showing the design, and I thought that is what American Airlines should have on their website. It was so much better than what they had at the time—light years better—and if this college student could design that quality, it didn't matter that he wasn't hired by American Airlines. He showed that he could make unique designs, and that's all that mattered.
That's why he went viral. Tons of people were talking about it. It got in front of American Airlines’s staff, and an internal designer at American Airlines commented on it pubically. They explained why they couldn’t use this student’s design, and then American Airlines fired the designer that commented on it.
It was a whole controversy that spawned because of this viral portfolio. I don't remember anything else about that portfolio. I only remember that one piece that was so strong that it stays with me today.
I would hire him based on only that one piece. The lesson here is don’t focus on filling up your portfolio. Focus on making good, quality work.
It's okay to start with a few high-quality stuff and add more when ready. It's okay to include practice, fictional, or personal projects. You can call them concept pieces.
There’s always something that you can produce. It can be social media graphics, email promotions, websites, menus, and anything else that comes to your mind. Think of what businesses in your niche need and design something from them. You can put all of that work into your portfolio.
Josh Rogin went through our program and a few classes with us. He created this website called Post NYC.
This website was just an idea because he wanted to practice the design concepts he had learned in class. It’s an actual website that helps people in Astoria, Queens.
He asked himself, “what are the best places to eat there?” and created a website to guide visitors and locals to those places.
It's a practical website, but also he got to practice creating designs through this project. He got to practice using WordPress to put a blog on his sites, and you can see he's still active on this website.
He did it as a project, but as a project that has a real purpose. This website serves not only as a portfolio piece but as a functional guide that people can use right now.
I think he also runs some Google ads on it. I don't know how much money he makes from those ads, but people could pay to sponsor something on his blog. It could be something you could turn into a profitable business, too. The reason that you create it, though, is for your portfolio.
Create things that interest you. For example, somebody I know is really into knitting, and if that person were to make a website, I would tell her to make a knitting website because she loves knitting. Take an area that's a passion project for you and design something around it.
You could put those ideas into your portfolio until you get projects from clients. Whether it’s an actual client or not isn’t necessary. It’s the quality of work that’s important. The more you practice creating work, the better you will get at mastering these tools.
Final Thoughts
There are many different types of design, and you need to see which area of design interests you. If you want to learn more with us, we have various classes in graphic design, web design, user interface design and user experience design, and visual design.
You can check out these pages to learn more about those programs. Our classes are held both live online as well as in person. If you want to take a class in the New York City area, you can come and take it in person. If you are not in the New York area, you can join us live online.
You’ll screen share into the instructor's computer for live online classes as they're teaching a class. There will be other people that are online as well. They're all held at Eastern Time, which is New York time.
They're not the prerecorded classes. They're all live interactive classes, and they’re also an ongoing rotation of classes, unlike college semesters. Check Noble Desktop’s website to view the schedule. We have classes during the day, evening, and weekend. There are plenty of options available to help you learn more.
I hope this has been helpful. Again, this link here for this presentation is in the video description. You can also find and use all the links that are there. We’ll keep this presentation up so you don't have to worry about that link disappearing in the future.
I wish you the best of luck as you begin your journey as a graphic designer. Thank you so much for watching, and I look forward to seeing you in a future webinar or class.
