Digital Design Masterclass for Graphic Designers | Lindsay Marsh | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Digital Design Masterclass for Graphic Designers

teacher avatar Lindsay Marsh, Over 300,000 Design Students & Counting!

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

65 Lessons (9h 18m)
    • 1. Course Preview - NEW

      4:55
    • 2. The Course Guide IMPORTANT!!!!

      3:43
    • 3. Introduction to Design for Digital

      6:18
    • 4. Design Theory for Social Media

      5:39
    • 5. Design Theory for the Web

      11:47
    • 6. Design for Accessibility

      2:46
    • 7. Effective Digital Layout Theory

      7:13
    • 8. YouTube Thumbnail Project

      10:32
    • 9. YouTube Thumbnail Project - 2

      10:51
    • 10. YouTube Thumbnail Project - 3

      10:12
    • 11. YouTube Thumbnail Project - Double Exposure

      14:29
    • 12. Social Media Campaign Project

      10:58
    • 13. Social Media Campaign Project - 2

      8:09
    • 14. Social Media Campaign Project - 3

      8:25
    • 15. Social Media Campaign Project - 4

      10:10
    • 16. Social Media Campaign Project - Instagram

      9:09
    • 17. Social Media Campaign Project - Instagram 2

      7:07
    • 18. Social Media Campaign Project - Display Ads

      11:46
    • 19. STUDENT DESIGN CHALLENGE

      0:52
    • 20. Animated Gifs in Photoshop

      12:57
    • 21. Animated Gifs in Photoshop - Photos

      8:29
    • 22. Animated Gifs in Photoshop - Exporting GIFS

      7:02
    • 23. BONUS - Making GIFS from Videos

      7:10
    • 24. E-Book Cover Project

      10:06
    • 25. E-Book Cover Project - Shadows

      11:06
    • 26. Hand and Procreate Lettering

      8:37
    • 27. E-Book Cover Project - Exporting

      5:11
    • 28. Creating Hand Drawn Digital Assets in Procreate

      9:47
    • 29. Creating Hand Drawn Digital Assets in Procreate 2

      13:15
    • 30. Using Our Hand Drawn Assets for A Social Media Project

      11:58
    • 31. Using Our Hand Drawn Assets for A Social Media Project - 2

      10:22
    • 32. Digitizing Sketches - Setup

      7:06
    • 33. Digitizing Sketches - Pen Tool Tracing

      7:12
    • 34. Digitizing Sketches - Coloring

      10:49
    • 35. BONUS - Puppet Warp Tool

      1:49
    • 36. Icon Set Design Project - Grids and Setup

      6:49
    • 37. Icon Set Design Project - Getting Started

      9:12
    • 38. Icon Set Design Project - 3

      8:37
    • 39. Icon Set Design Project - 4

      13:59
    • 40. Icon Set Design Project - 5

      8:30
    • 41. Icon Set Design Project - 6

      6:59
    • 42. Icon Set Design Project - Adding Color

      5:16
    • 43. BONUS - User Testing with a 5 year old!

      4:51
    • 44. App Store Icon - Getting Started

      10:17
    • 45. App Store Icon - Gold Bar Effects

      6:57
    • 46. App Store Icon - Gold Dials

      9:22
    • 47. App Store Icon - Exporting

      4:03
    • 48. Website Landing Page in Adobe Xd - Getting Started

      8:10
    • 49. Website Landing Page in Adobe Xd - Illustrations

      9:34
    • 50. Adobe Xd - Crash Course

      15:58
    • 51. Website Landing Page in Adobe Xd - Getting Started

      7:51
    • 52. Website Landing Page in Adobe Xd - Photos

      8:09
    • 53. Website Landing Page in Adobe Xd - Landing Page Details

      11:21
    • 54. Website Landing Page in Adobe Xd - Pop up

      10:15
    • 55. Website Landing Page in Adobe Xd - Prototype mode

      8:44
    • 56. BONUS: Global Styles

      3:23
    • 57. Exporting Assets from Adobe Xd

      5:55
    • 58. Introduction To Building A Wordpress Website

      6:32
    • 59. Wordpress Crash Lesson

      7:12
    • 60. Getting Started with Elementor Plug-in

      12:50
    • 61. Wordpress Website - Header Video

      12:07
    • 62. Wordpress Website - Creating other sections

      9:51
    • 63. Wordpress Website - Creating Our Instagram Feature

      9:55
    • 64. Wordpress Website - 3 Column Layout

      11:57
    • 65. Wordpress Website - Responsive Design

      5:31
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

7,913

Students

29

Projects

About This Class

The future of design is digital. This course was designed to get graphic designers up to speed on the latest and greatest digitally focused projects so they can expand their skillset and offer more services.

This course is massive covering so many Digital design projects from social media, icon design, web design and more.

SOCIAL MEDIA DESIGN (Youtube, Facebook and Instagram)
ANIMATED GIFS
DIGITIZING SKETCHES
CREATING DIGITAL BRAND ASSETS 

ICON SET DESIGN
APPLE APP STORE ICON DESIGN
E-BOOK COVERS
WEB DESIGN USING WORDPRESS
LANDING PAGE DESIGN USING ADOBE XD

We first cover Digital Design theory and talk about how to craft compelling social media posts, web layouts and more.

Next, we conquer several popular digital design projects including creating several YouTube thumbnails that drive users to click through. We even create an entire social media campaign and talk about how to design for facebook, instagram. We even talk about creating display ads for websites so you can feel comfortable expanding your skillset to all types of digital ad creation.

Need to know how to create animated gifs using Photoshops Timeline feature? We will create an animated display ad from our previous campaign and add movement and animation. We will also learn how to create GIFS from imported video clips.

Have you wanted to know how to create a compelling e-book cover? We will do just that and learn how to design for e-book covers. We talk about sizing, exporting and how to create a design that grabs the viewers attention. We will go over how to take hand written type and bring that into photoshop to use on our e-book and also learn how to work with other sketching apps to bring in hand written assets. We also create our own mock-up to display our final design. 

A newly added project goes into more detail about how to create hand drawn assets in procreate or other sketching apps and how to bring them into Photoshop to create modern, dynamic campaigns that have style and a unique flair. 

Do you like to sketch or illustrate? I even created a step by step project where we take a pencil sketch and digitize it using Adobe Illustrators Pen Tool. Knowing how to digitize sketches is a big part of expanding your skillset to the digital arena. 

Icon design is at the center of any digital design projects. Icons can be used on websites, mobile apps, applications and more. Using a handy provided template we will create an entire cohesive icon set. We will learn how to use grids to create a thematic set and even learn how to add color and how to export our icons in all the right sizes for use everywhere. 

After creating a simple, basic icon set we go even deeper to create a highly detailed Apple store App icon from scratch. We learn lots of tools, like how to use gradients to create a dimensional effect as well as the pattern tool and many more. We will learn how to export these files as well for use on the apple store as well as how to present our icon in a professional way.

It is hard to teach digital design for graphic designers without including a few sections that focus on web design. We will learn what our role is as graphic designers in this space as well as how to prepare and export files for web design projects.

We will learn from scratch Adobe Xd in a quick crash course. We will learn many aspects of strong web design and layout by creating a landing page together, step by step. We will even learn how to link our various pages to create a working prototype and learn some ways of how to export our files to the web developer. 

Finally, we will conquer a basic front page website design for a travel company using Wordpress. We will learn the very basic of Wordpress and learn the very popular page building plug-in for Wordpress called Elementor to build out our webpage using video backgrounds, parallax images, icons, columns animated text and more! We use only the free version of Elementor so not purchases are bestiary to work through this course 

Lastly, there are tons of downloadable resources in this class including pre-made templates for most of the projects. This includes Photoshop e-book, YouTube and social media templates and an icon set and app store icon template in Adobe Illustrator.

This course is not for those students who have never been in Adobe Photoshop and Illustrator before but this class is general enough for most beginner level graphic designers who are interested in adding to their skillset. For those who have never opened the Adobe software before I suggest taking the Graphic Design Masterclass to get a leg up on the basic tools.

This course assumes you have very basic working knowledge of Adobe Photoshop and illustrator and tools like Wordpress, Adobe Xd, Elementor page builder and more are taught from scratch so no prior experience is necessary.

So are you ready to up your design game and add a whole new skillset to your offerings? Are you ready to explore this essential side of design? See you in the first lesson! 

Meet Your Teacher

Teacher Profile Image

Lindsay Marsh

Over 300,000 Design Students & Counting!

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course Preview - NEW: the future of design is digital. This'll course was designed to get graphic designers up to speed on the latest and greatest digitally focus projects so they can expand their skill set and offer more services. This course is massive covering so many digital design projects from social media, I can design Web design and more. First of all, we cover digital design theory, learning the different aspects of designing for digital like creating powerful social media campaigns, website designs, layout for digital and even talking about accessibility in digital design. Next, we conquer several popular digital design projects, including creating several YouTube thumbnails that drive users to click through. We even create an entire social media campaign and talk about how to design for Facebook instagram. We even talk about creating display ads for websites so you can feel comfortable expanding your skill set to all types of digital ad creation. Have you always wanted to know how to create a compelling E book cover? Will do just that and learn how to design a book covers. We talk about sizing, exporting and how to create a design that grabs the viewers. Attention will go over how to take hand written typography and bring that into Photoshopped to use on our e book cover and also learn how to work with other sketching APS like Procreate to bring hand written assets toe life. We also create our own mock up to display our final design. Do you like to sketch or illustrate? I even created a step by step project where we take a pencil sketch and digitize it using Adobe Illustrator's pen tool. Knowing how to digitize sketches is a big part of expanding your skill. Set to the digital arena, Icahn design is at the center of any digital design project. Icons can be used on websites, mobile APS, applications and more. And we'll use a handy provided template as we create an entire cohesive high concept. Or learn how to use grids to create a thematic set and even learn how to add color and how to export all over icons and the right sizes for use everywhere. After creating a simple basic icon, set will go even deeper to create a highly detailed Apple store app icon from scratch. Wilder. Lots of tools like how to use radiance to create a dimensional effect as well as the pattern tools, and many more will learn how to export these files as well for use on the Apple store, as well as how to present our icon in a professional way. It's hard to teach digital design for graphic designers without including a few sections that focus on Web design will learn what our role Zara's graphic designers in the space, as well as how to prepare an export files for the Web design projects we will learn from scratch. Adobe X T and a quick crash course will learn many aspects of strong Web design and layout by creating a landing page together. Step by step. We'll even learn had a link or various pages together to create a working prototype and learn some ways of how to export our files for a Web developer. Finally, we will conquer a basic front page website designed for a travel company. Using WordPress will learn the very basics of WordPress and learn the very popular page building plug in for WordPress called Element, or to build out our Web page, music, video backgrounds, parallax images, icons, columns, animated text and more. Lastly, there are tons of downloadable resource is in this class, including pre made templates for most of the projects. This includes Photoshopped, e book, YouTube, social media templates and an icon set, an APP store icon, template and adobe illustrator. This course is not for students who have never been in Adobe Photo Shopper illustrator before, but this class is general enough and basic enough for most beginner level graphic designers who are interested in adding this to their skill set for those who have never opened Adobe software before, I suggest taking my other basic design class called the Graphic Design Master Class, to get a leg up on those very, very basic tools. This course assumes you have very basic working knowledge of Adobe Photo Shop and illustrator and tools like WordPress, Adobe X'd, the elemental page Builder and Mawr are taught from scratch, so no prior experience is necessary for those. So, are you ready? Toe up your design game and add a whole new skill set to your offerings. Are you ready to explore this? A central site of design. I will see you in the first lesson 2. The Course Guide IMPORTANT!!!!: welcome to the course. I'm so glad you decided to join me for this wonderful digital design journey with me. I wanted to go over a few essential things before we started the course. First of all, downloadable resource is you'll notice a ZIP file attached to this lesson. This contains a lot of the template files will use on projects, as well as several images, videos, local files and other assets that will be useful toe have when creating your own version of each project in the course. And speaking of student projects, there is a student project guide file that will give you more details on the projects who will be tasked with as he worked through the lessons. There's also a downloadable word document that contains all the links to various external resources like photos, helpful links and some of the programs they used throughout the course. And remember, this course does require some very basic working knowledge of photo shop, and illustrator will be helpful to start off this course with some basic tool knowledge. Already, I will not be teaching Adobe Photo Shop and Illustrator from total scratch, although the most of the tools I introduce. I will go over from scratch. I want you to be comfortable with the layering system, the basic layout of the programs and how to find the basic tools. An illustrator. I want you to have used the pin tool a few times before starting this course. No need to have any prior experience in WordPress, the elemental page builder or Adobe X'd, as those programs will be taught from the very beginning. If you do find yourself needing some additional photo shop and illustrator training from the very beginning and need that very basic instruction, I offer a beginner graphic design course called the Graphic Design Masterclass that will get you right up to speed. Taking that course is not required to take this one as long as you have some of that very basic knowledge of Adobe Photo Shop in Illustrator. I want you to take this course at your own pace and feel free to work alongside me, with each project recreating the project step by step, or, if you like watching the lessons and going and trying your own project. That's also welcome to each project has helpful files to get you started creating your own projects to use in a portfolio or to show off your skills. I have an exclusive student Facebook group for those wanting to post projects and engage with others in a friendly, helpful community setting. Simply type in learn design, Go Freelance and the Facebook search bar to locate the group and make sure to answer the questions asked. In addition to the student projects, I also hold monthly student design challenges as well. If you're not on Facebook, I also post these monthly design challenges on my YouTube channel at youtube dot com slash Lindsay Marsh. You can also post your work in the Q and a section of this course. I look forward to seeing what you guys create as you work through this course. This is the most intense of all my courses, simply because the wide variety of project types we work on these projects. Take them one at a time and think of this course as a marathon and not a sprint. This is a great introduction toe. All of these different digital design projects and more intermediate and advanced courses about the topics of love designed, for example, will be coming soon. But this course will at least get you the first step in the process to get you started. I love reviews. So when you get a chance as you work through the pores to leave a review, I read each and everyone I really value what you guys and I look forward to having you as a student. So let's go ahead and get started. I'll see you in the first project. 3. Introduction to Design for Digital: digital design refers to any design that has crafted for the digital space, including mobile devices, tablets, desktop computers, projector screens, large digital billboards and more. Graphic designers have mostly focused on print design projects like business cards, stationary zoo banners, T shirts, hats, package design in the past. But as time moves on, there will be only B'more and more demand for digital based projects. It's up to you as a designer to be well versed in all aspects of digital design, so you can feel comfortable designing for super small screens and super large projection screens, too. All digital design projects are sized using pixels, pixels or squares of light that can either be white, red, green, blue or black. All digital displays are created using a certain area of pixels. Your 10 80 p widescreen TV pictures Air created using a combination of 1920 pixels and with by 10 80 pixels and hype, giving that screen a total of 2,073,600 pixels. That's a lot of pixels that either knew just be switched on to create that high, crisp resolution image. Four case grains using even more unbelievable amount of pixels toe light up the screen with 2160 pixels in height and 38 40 pixels. And whip. I think the most challenging aspect of working with digital design projects as a designer is the wide array of screens we need to be ready to work with. Sometimes they could be smaller as an iPhone eight screen coming in and only 750 pixels wide by 1334 pixels in height. Even smaller still is a mobile display ad coming in at only 300 by 50 pixels. I think the key to being a great digital designer is to understand how to best use small sizes to your advantage. For example, a simple social media campaign. Let's say we have various sizes we need to work with, but we have to somehow communicate some basic information required by the client. As our sizes become smaller and smaller, certain concessions need to be made, and it's up to you to figure this out and communicate with the client. Those concessions, for example, in our social media campaign, we started off with large Facebook post, and then we need to create static display ads display ads or there's little ads you see on websites at the top and sides of a content block or blawg. Some of those display ads can be very small. Smaller still, are these mobile display ads. We have to somehow convince our main concept and theme into smaller areas, but still retain are consistent branding our message and our main concept of the campaign. And we do this by focusing on what is most important in this case. The called action is the most vital part of an ad, and without a reason to click through to the landing page, your website there is no value being created by the ad. It's just static, and this is just social media. There's so many categories and digital design that depend on a graphic designer to develop the graphics. For there is also designing for mobile. This could be mobile, APS or even mobile versions of websites. What colors to use, how to use contrast, what thoughts do I use? All these decisions play big roles in the effectiveness of a mobile app or website. There is also larger format. Digital graphics like the ones you see at your local stadium. Their power point slides for large conferences that need to be made that match the branding of the conference. There's even large format digital billboards, which are becoming more and more favored over the old style printed billboards. Because of the reduced costs of running a digital billboard, icons like the one you see for APP icons on your phone also need to be created. There's a special method for creating those using a special grid created by Apple to help find the most effective placement of elements. Certain icons can be seen better than others and a sea of different app icons. Sometimes the use of color like a red, can help one really stand out in that C or a simple shape or a letter. Also, there are icons that need to be created for APS, websites and applications. There's an art to creating icons that communicate complex actions. Using the most simplified shapes is possible. Icons may only be 50 by 50 pixels and size of any time, so being able to simplify a complex concept is something learned and practiced Icons that will be used as a set together need to have a consistent look and feel. For example, these have a similar stroke size throughout the set, and it doesn't stop there. There's also video based thumbnails that need to be created for YouTube and other platforms . These need to convert and be effective at drawing the user to click through to the video. How you use photos, colors and typography will all contribute to the effectiveness of the video and click through rates. For example, YouTube thumbnails that air simple in nature and have one main focal point tend to do better than those with tons of text and photos. Also, those thumbnails with people's faces tend to convert better with thumbnails with just text . This is because we, as humans tend to connect to human faces and human psychology, can play a big role in digital design. There's also e book covers, and they tend to drive sales based on the effectiveness of the cover design. Sometimes the cover of a book is the only thing of viewer sees when sorting through hundreds of possible book selections and being able to create a digital book cover that will convert and entice and sell. The book can make the difference between good sales and great sales. As you can see, designers have huge roles to play in additional world, and it's our job to make sure we're prepared to create highly effective images quickly that could drive sales for ourselves, our clients and the businesses we work for. 4. Design Theory for Social Media: what goes into designing an image for use on social media? What are things that are known to be effective and drawing those high balls to our content ? There's some basic rules and tips that can help you be more effective. Designer of social media content First of all, understand your target audience. Who are you trying to talk? Teoh? Try to understand the target audience by studying demographic information. Are getting that information for whoever you're working for? Will your poster ad be displayed? Two more women than men? Are you targeting those? And a younger demographic that might shape and mold how you approach the design? An older demographic might need a more conservative design approach, while a younger audience might connect more with something bolder and show stopping. Lastly, where they located geographically, those in the United States might connect more with a certain design than someone from South America or Asia, perhaps using photos that best represent the target audience. More might help in this connection with your ad be authentic and it seems obvious. But being authentic is easier said that done especially in working with clients doing paid advertising. Clients want to push products deals and services. But we need to find ways to create a design that will make thes seem less like your standard offers We see every single day, and they make a more compelling toe. Our target audience. For example, we can create a simple ad for a pet food company and place a bag of food right in the center of the social media ad with a simple coupon. It seems very traditional, but, well, what if we used an image of a pet owner enjoying their dog and then the photo of a product ? Better still, what if we connected with them using a clever headline as well? These are small little tweaks and changes toe ads, but they can have a big impact on how effective the ad is use. Contrast well, and we talk about contrast in almost every lesson of this class. Contrast is the simple difference between to design elements. The more dramatic the difference, the higher contrast it has. We can use contrast effectively as designers to draw the user's eyes into the most important part of the ad, usually the call to action, or that by now swipe up for more button or area. But we can also use contrast with our type by highlighting one word in our headline to bring out a more favorable word that helps to push people toward our main goal for the ad. For example, this ad that uses contrast to bring this word in the headline to draw the user into the overall concept of the ad contrast can be easily over used to many elements that differ dramatically can cause an ad toe look busy, outdated and very hard to look at contrast is best use sparingly and with a purpose. Use photos that connect with the viewer. This goes back to being authentic as well. The photos would choose could have huge impacts on drawing the viewers in. And this is true for traditional print ads as well. Take, for instance, this ad for a gym we can use the standard photo that is easily glanced over where we can use a higher impact image to draw those viewers in and stop even just for one second to take an extra look at the photo and the ad. Full color photos tend to draw users and more than black and white remember in social media . You have the least time available to draw people into your poster. Add the least amount of any other advertising platform. Think about how fast you scroll through your instagram feed. Not a lot of time, is it photos of the first thing people see and they start to read the text. Next, use this to your advantage. How you crop. Your image is huge as well. We can make things look ordinary or dramatic simply by cropping it in the most compelling ways in this example of the girl in an exotic location. Cropping it this way. It looks nice, but crop this way. It seems almost magical and inspiring. Feel free to edit your photos as well. To add pops of color, you can do this easily, be by adding new layers to the photos and photo shop or a photo editor and using blending modes to draw out color to make sunsets. And more dramatic, I've even seen people clone in different clouds to really set the scene. But please be careful with being authentic as well. Because famous social media influencers have gotten in trouble for adding and fake clouds or photo shopping, their bodies. There's a fine line, and it's up to you to decide where that line falls for you and your viewers. Whatever you do, just make sure you're telling a true, believable, authentic story. Use variety. Think of your social media post and campaigns as a tapestry of art. There needs to be some brand consistency throughout everything, but that does not mean you need to create cookie. Cutter adds that all have the same format. Some people enjoy seeing different photos being used headlines, arrangements and style. This is great for user testing to figure out what is the best layout and effectiveness for different types of ads. Social Media is a growing part of a designer skill set and knowing how the best designed for social media can make you more marketable as a designer. Overall, this takes a lot of practice and user testing 5. Design Theory for the Web: now what makes a great Web design all websites ethical? That could be to convert users over to a subscription service, purchase a product for just provide helpful information to the user. A great website is one that converts its viewers well. This could be through the use of consistent branding, authenticity and well written copy effective product photos and more. So what's your role is a graphic designer in the world of Web design? Well, if you can develop in code a website, you're a rare breed and you will be paid handsomely. But with website design becoming more and more complex and coding, becoming more specialized and might not be a bad thing to have our different specialties, I see Web design being the responsibility of three main contributors. First of all, there's the developer. He will take the final design and turn it into a coded, riel workable stuff. He requires knowledge of front end and back end coding languages, server side languages and mawr. Ah, highly specialized individual. He focuses in on the technical side of things. How does it work? And newly added to the group in the last 10 years is the UX designer or user experience designer. A lot of graphic designers start to learn this field of design, and it's growing in popularity. The UX designer will do a lot of the user testing and user research to find out the order of how the user needs to move through the website. This means they will map out a user journey so you know how many main menu options there needs to be for the user and how many steps in each process to get the user to their in goal. This requires a Thanh of research and something called wire framing. Wire framing is away for a UX designer to map out the flow of a website and block out areas where a button may need to go. Ah, photo or where options may lie for the user. This rarely includes final graphics and can sometimes just be great out boxes. So what about the cool visuals, the branding, the colors? This is where the graphic designer are you. I, user interface designer, could come in and really flesh out the visual details. Once you have the basic outline site map framework, it's your job to create icons style guides, some basic layout ideas so the developer can code this and make it a really polished reality. So now that we know our role, how do I create an effective website design or mobile app design? And there's some basic ideas to keep in mind using contrast. And here we are talking about contrast yet again. Contrast is a great way to lead the user on a journey toward their desired destination. This could be toward a shopping cart we can use red, which would be a higher contrast color here among the sea of white. To have the user easily find the shopping cart, making their experience easier. You size to your advantage. What do you think? Converts better in this e commerce store layout, a product feature that has a small photo or one that has a larger photo. The larger photo naturally converts better because it gives the viewer a better idea of the product that they're getting ready to click onto. What do you think works better? 12 items listed on one screen or a selected three curated items. The items have a larger feature, tend to do better. People get overwhelmed with too many options when you were fined those options for the viewer. It tends to reduce this emotional tension, making it easier to select an option. Overall, this is why people enjoy curated content like news. There's hundreds of news articles. We can read it any given time. But using size to highlight the most important ones does wonder for our soul in our minds and our conversion and click through rates clean and simple. It's the name of the game. Let's talk a little bit about clean design and Web and mobile design. What do you think works better, The layout on the left or the layout on the right? Simplifying the design can help the user feel less overwhelmed, just like it did when we gave them More. Selective options based on size have a sense of hierarchy. Do not feel you have to cram everything into one area. They'll be certain items that will beam or important than others. For example, certain products sell better and will be a top priority. Hierarchy can be applied to mobile and Web design in several ways. You have type hierarchy, which could be defined by establishing a font size and wait for your main largest headline type and then you slowly working your way down to smaller headlines. This usually is indicated by the term H one for the largest and going down to H two h three , h four and so on for smaller headline sizes. Then you have your main body copy or your paragraph size type, which is usually a simple font, a normal weight and a little bit smaller compared to the headline sizes. Your job is a designer is to establish and set this sense of hierarchy in the design. Take this example. The example on the right does not really use type are key items or similar sizes, and they have almost zero contrast. But the example on the left establishes a strong type hierarchy system, which uses varying styles for certain types of information, headlines and sub lines, giving the design and orderly feeling. We could do the same thing with print design, and it translates well to the Web. Font choices are everything not just important in Web design, but all design projects find choices are everything. Larger fought sizes can have huge impact on landing pages to drive sales are to drive an action or emotional response. Pontes that are too small in size can impact readability and effectiveness. The best practice for choosing fonts for your digital project is to keep it a simple and orderly as possible. You want to make sure your font choices check all of the boxes at all times. Number one. It's readable at the final size. A font used on a desktop website can look nice and big and readable. But when it shrinks down to the mobile version of the website, is it still readable and doesn't retain the same impact? Number two. You're not using too many different fonts. Try to avoid using more than three fonts on one Web page or digital graphic, unless there's a specific creative design reason. To do so. Avoid using similar font types, like using Helvetica close to Ariel. They're both very similar in a period appearance, and they're both sans serif typefaces, confusing the viewer of which one is which. Lastly, make sure it's easy to read by keeping the line length reasonable. Which column of information is easier for you to read The version on the left are the version on the right. The right is most likely easier to read because the total length our line length of the type is easier for eyes to read. The same applies to print projects. You want to be able to keep your line length no longer than 60 characters per line. You can use columns and photos to help make this more possible for you. Do not be afraid of being expressive with your typography and digital design. We use the default typefaces like Helvetica for Danna an aerial because they were Web safe and everyone's devices had these preinstalled. Nowadays we can store fonts on the cloud. For example, Google Fonts keeps all of their fonts on the cloud so you can load a bigger variety of fonts now. And people don't have to have them installed other computers to see them in their browsers . This has opened up a world of expressive creative typography on the Web. Now we no longer have to use pictures to show expressive typefaces or typography. We could make it live type, meaning people can select it, copy it, interact with it and sometimes you can even make it move. As designers, we could be Justus, creative as we are with print projects with digital projects. Make sure to experiment with interesting typography for your headlines. San Serif typefaces tend to rule the day of the past, but now you're seeing more and more detailed sehr of typefaces and even script typefaces live on digital interfaces. The only warning here is to make sure you do not overuse expressive and detailed typography too often