Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

Web Design in Affinity Designer for Beginners and Beyond

Dawid Tuminski, www.dawidtuminski.com

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
88 Videos (6h 45m)
    • Web Design in Affinity Designer Promo Video

      2:08
    • 1Introduction to the course

      1:49
    • 2.1What is Affinity Designer and how to set it up for web design

      3:11
    • 2.2Affinity Designer’s web design abilities

      8:43
    • 3.1Top 10 Principles of Good Web Design

      3:53
    • 3.2Top 10 Principles of Good Web Design - continued

      4:34
    • 4.1The most important factor to consider before choosing colors

      4:06
    • 4.2How to mix colors for the best possible User Experience

      4:36
    • 4.3How to choose the “psychologically right” colors

      4:37
    • 4.4-7 easy tools for choosing errorproof color schemes

      6:32
    • 5.1A super short history of web typography

      2:41
    • 5.2How to mix colors for the best possible User Experience

      5:18
    • 5.3How to choose the right fonts for headings

      3:37
    • 5.4How to mix fonts for headings and body text

      4:18
    • 5.5The perfect font for User Interface design

      2:35
    • 6.1Header, branding, navigation and Hero sections

      3:52
    • 6.2The center and bottom sections of your website design

      4:13
    • 6.3What are grids and how to use them

      3:08
    • 6.4How to design your very own grid

      4:09
    • 7.1-7 web design trends that rule the web design world

      8:58
    • 7.2Where to find the RIGHT inspiration for your next design

      2:28
    • 8.1Every website design needs scaffolding

      3:13
    • 8.2Building your own wireframe in Designer

      4:41
    • 8.3Let’s continue building the library

      10:08
    • 8.4How to use the assets to create a wireframe

      11:19
    • 8.5Wireframing online

      4:28
    • 8.6Let’s talk about images and icons

      5:53
    • 8.7How to create font styles in Affinity Designer

      4:00
    • 9.1The Design Part Overview

      6:01
    • 9.2Let's Create the Color Swatches

      4:05
    • 9.3Let's Create the Text Styles

      2:34
    • 9.4Let's Take a Look at the Images and Icons

      2:34
    • 9.5Let's Create the Logo First

      3:25
    • 9.6Let's Build the Menu Links

      4:04
    • 9.7Let's Add the Social Media Icons

      8:05
    • 10.1Let's start by adding the main image

      6:41
    • 10.1Let's start by adding the main image

      3:02
    • 10.2How to Quickly Resize the Image

      3:02
    • 10.3Let's Make the Image a Bit Darker

      3:14
    • 10.4Now Let's Add the Main Text

      5:04
    • 10.5Let's Add the Slider Navigation

      3:47
    • 11.1Let's Start Creating the First Featured Secion

      3:35
    • 11.2Let's Add the Featured Items

      10:07
    • 11.3Let's Add the Second Featured Item Section

      5:40
    • 12.1Let's Start Creatig the Blog Section

      8:13
    • 12.2Let's Replace the Images

      3:05
    • 13.1Let's Start Building the Image Gallery

      7:13
    • 13.2Let's Create the First Column of the Footer

      4:13
    • 13.3Let's Finish the Design and the Whole Footer

      3:56
    • 14.1Delivering the design to the client

      3:39
    • 14.2Delivering the file to the developer

      2:30
    • 14.3How To Use the Export Persona to Export the Assets in Bulk

      2:29
    • Thanks for watching the course

      0:52
    • 1Let's Discover the Wireframe for the Design

      6:08
    • 2Let's Discover the Blog Design

      5:30
    • 3Let's Take a Look at our Assets

      6:06
    • 4How To Create the Logo and Nav

      7:38
    • 5Let's Add the Social Media Icons

      6:18
    • 6Let's Add the First Images

      7:22
    • 7Let's Add the Shading to the Images

      7:57
    • 8Let's Add the Navifation Buttons

      5:24
    • 9Let's Create a Container for the Blog Post

      5:16
    • 10Let's Add the First Pieces of Text

      4:29
    • 11Let's Add the Remining Pieces of Text

      6:07
    • 12Let's Start Creating the Blog Post Grid

      5:57
    • 13Let's Create the First Blog Post Card

      5:19
    • 14Let's Add the Remaining Cards

      6:35
    • 15Let's Add the Older Posts Link

      4:17
    • 16Let's Explore the Sidebar Project

      2:37
    • 17Let's Create the Search Box

      3:54
    • 18let's Create the About Me Section

      6:37
    • 19Let's Create the Text Section of the Sidebar

      4:48
    • 20Let's Create the First Container for the Most Popular Posts

      4:06
    • 21Let's Create the List of the Most Popular blog Posts

      6:29
    • 22Let's Create the Ads Section

      2:50
    • 23Let's tart Creating the Footer

      4:07
    • 24Let's Explore Different Footer Concepts

      2:35
    • 25let's Finish the Project and explore the next one

      7:08
    • 26Let's Explore the Single Post Design

      3:13
    • 27Let's Create the Featured Image and the Post Container

      5:47
    • 28Let's Add the Blog Post Title

      6:21
    • 29Let's Add the Paragraphs and Images

      10:11
    • 30Let's Add the Social Media Icons

      7:18
    • 31Let's Add the pre Next Post Navigation

      8:26
    • 32Let's Add the Related Posts Section

      7:21
    • 33Let's Start Creating the Comments Section

      4:46
    • 34Let's Create the Texts for the Comments

      5:55
    • 35Let's Create the Post Comment Forms

      9:02

About This Class

This course is all about using Affinity Designer for web design. If you are not too familiar with the software, first you will quickly learn what it’s all about and how to set it up for web design.

Before we start designing anything in Affinity Designer, we’ll take a look at web design concepts and good practices. You will learn how to choose colors for your design and where to find color inspiration and ready-made color themes.

You will also learn basic web design typography, which is extremely important not just for good web design, but for good design in general. You will learn all about body text, headings and how to pair them for great user experience.

Then we’ll take a look at a typical website’s structure, design-wise of course. We’ll talk about logos, navigations, sidebars and all the other website’s building blocks.

After that we’ll talk about what’s in and what’s not in in the web design world right now. We’ll also search for some web design inspiration around the web.

With all that knowledge and skills, we’ll move on to the design part of the course. And please note that you have to have at least some basic skills to follow along effortlessly

This course is not about learning all there is to know about Designer's skills. If you need that, take  look at my Affinity Designer for Beginners course.

By the end of this course you should be able to independently design websites using Affinity Designer.

1 of 1 students recommendSee All

Fantastic class. It is not easy to find classes using Affinity Designer, but not only I have learned so many useful tricks about AD, I also learned so much about web design! Dawid is very knowledgeable and knows his craft very well. I highly recommend his class.

36

Students

--

Projects

Dawid Tuminski

www.dawidtuminski.com

Designer, coder and educational entrepreneur.
Let me help you create your own, profitable online courses.

Adobe Certified Expert in Illustrator whose courses were listed in the Udemy's TOP 10 best reviewed courses.

Creating online courses on design tools like Adobe Illustrator and Adobe Photoshop, logo design, web design, graphic design freelancing, online teaching and digital marketing .

Teaching +22.000 students in 160 countries worldwide.

Owner at fatredmouse...

See full profile