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 Lessons (6h 45m)
    • 1. Web Design in Affinity Designer Promo Video

      2:08
    • 2. 1Introduction to the course

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      2:28
    • 22. 8.1Every website design needs scaffolding

      3:13
    • 23. 8.2Building your own wireframe in Designer

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

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

      11:19
    • 26. 8.5Wireframing online

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

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

      4:00
    • 29. 9.1The Design Part Overview

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

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

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

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

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

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

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

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

      3:02
    • 38. 10.2How to Quickly Resize the Image

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

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

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

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

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

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

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

      8:13
    • 46. 12.2Let's Replace the Images

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

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

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

      3:56
    • 50. 14.1Delivering the design to the client

      3:39
    • 51. 14.2Delivering the file to the developer

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

      2:29
    • 53. Thanks for watching the course

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      9:02
How students rated this class
Leave Review

Watch more to review

We ask our students to watch a few lessons before reviewing to make sure we get quality feedback!

Best Suited for
 --  Beginner Intermediate Advanced Beginner/Intermediate Intermediate/Advanced All Levels

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.

Be the first!

No ratings just yet—watch a few lessons to be the first to share whether this class met your expectations.

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Be the first to leave a review in our updated system!
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. You are welcome to edit your old review into the new system!

5 of 5 students recommend this class
Great course! The instructor goes over the structure of a website. He provides several examples of how a good structure website. Also, providing how fonts and colors should be.
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.