If you are thinking about starting out as a web designer you have probably tried to harness Photoshop sometime in the past.
You probably spent countless hours trying to figure out that monstrous program.
I know the pain.
I remember spending days after days, weeks after weeks just to remember how tools and effects work.
Luckily we live in times when if you want to start a career as a web design freelancer, you can just put Photoshop aside.
Hi, my name is Dawid Tuminski and in this course you will learn how to use Affinity Designer to design websites from A-Z.
Read more
If you are thinking about starting out as a web designer you have probably tried to harness Photoshop sometime in the past.
You probably spent countless hours trying to figure out that monstrous program.
I know the pain.
I remember spending days after days, weeks after weeks just to remember how tools and effects work.
Luckily we live in times when if you want to start a career as a web design freelancer, you can just put Photoshop aside.
Hi, my name is Dawid Tuminski and in this course you will learn how to use Affinity Designer to design websites from A-Z.
If you are thinking about starting out as a web designer you have probably tried to harness Photoshop sometime in the past.
You probably spent countless hours trying to figure out that monstrous program.
I know the pain.
I remember spending days after days, weeks after weeks just to remember how tools and effects work.
Luckily we live in times when if you want to start a career as a web design freelancer, you can just put Photoshop aside.
Hi, my name is Dawid Tuminski and in this course you will learn how to use Affinity Designer to design websites from A-Z.
This course is packed with valuable info any web design rookie should know, such as:
How to choose the BEST colors and fonts for your websites
What makes a professionally designed website
What are the modern web design trends you should know about
How to build website’s visual guides, such as wireframes and grids
…and that’s just the introduction.
Because the real bread and butter of this course is inside its practical parts.
We will get our hands dirty and explore all the tools and techniques professional web designers use to design a website inside Affinity Designer.
That includes:
Building wireframes and grids – the building blocks of every website
Using assets to make the design process ultra-fast
Creating text styles that let you change fonts in a blink of an eye
And of course designing a website
You will learn how to design it form opening a file, through placing images, adding text and backgrounds right up to exporting the design you would ultimately hand out to a client.
There’s a lot of good stuff to cover and I truly believe that once you’ve completed the course and practiced on your own, you will start creating amazing website designs in Affinity Designer in no time.
And to make things easier, this course comes with a lot of downloadable resources:
Presentations you can open up on your tablet or smartphone to revise the lecture when you are commuting
The design files you can explore to get the real feel of a website design
And images and icons needed to make recreating the design effortless
This is a more than a 4 hour long web design and Affinity Designer bundle. Every step of the process is explained thoroughly, but without the yaaaaaawn parts.
Please notice one thing.
This course is not about learning all there is to know about Affiinity Designer.
It’s a course for those who already got the basics of the software and would love to learn how to use their skills to design websites.
We won’t be looking at each and every tool to find out what it does.
We will however go deep on those tools that we will be specifically using for web design purposes.
I mean, if you don’t know jack about the software, you can always take a look at my Affinity Designer for Beginners course here on Udemy.
But of course, if you have any questions along the way, I will be more than happy to answer them.
I am here to help, so you can rest assured that you won’t be left out on your own when something is not clear and needs a more personalized explanation.
Also, don’t forget that you are totally covered by a 30-day money back guarantee.No questions asked.
So if you don’t want to spend ages on learning overly complicated software and you don’t want to visit your bank to ask for loans just to get that software, give Affinity Designer a try.
Give this course a try.
And I’d love to see you inside.
What's inside
Learning objectives
- I will create beautiful and modern website designs in affinity designer
- I will improve my knowledge and understanding of web design principles
- I will easily work in affinity designer using all the major tools
- I will master quick yet powerful techniques and get great results instantly
- I will learn about web typography
- I will understand a typical website's structure
- I will create beautiful and modern website designs in affinity designer
- I will improve my knowledge and understanding of web design principles
- I will easily work in affinity designer using all the major tools
- I will master quick yet powerful techniques and get great results instantly
- I will learn about web typography
- I will understand a typical website's structure
Syllabus
Introduction
Before we jump into the course it let’s take a look at what you will learn.
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.
And before we start designing anything in Affinity Designer, we’ll take a look at web design concepts and good practices.
Read more
Syllabus
Before we jump into the course it let’s take a look at what you will learn.
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.
And before we start designing anything in Affinity Designer, we’ll take a look at web design concepts and good practices.
Affinity Designer is set up for great UI design experience right out of the box There’s really not much you have to do in order to take advantage of all of its web design abilities, which we will take a look at now.
Look at each of these principles as a kind of a guideline, but not an absolute rule that you can’t bend. However, following them, especially if you are just starting out, will allow you to avoid a lot of rookie mistakes.
Here are the five remaining principles of good web design
Choosing the right color scheme for your next website design is, along with typography, the most important to make. The colors you chose will be the first thing that will catch the visitors’ attention and, if chosen correctly, won’t make their eyes hurt and fingers rapidly look for the “close” button.
There’s a lot of designers who let their eyes judge if a certain color or a color palette will be good for a specific web design job.
But the problem with this approach is the fact that so many colors can look beautiful and so many color palettes may seem appropriate for that specific design.
So how to tell if your color choice is good?
Color psychology might sound overly scientific, but it simply describes the feelings and meanings people often associate with particular colors. By carefully selecting them, you can reinforce the overall message of a site.
Let’s take a look at some of the base colors you are most likely to use when designing your websites.
Choosing colors for your next design can be a long and even daunting process. For me it always takes way too long to find the right combination, but luckily the whole process can be sped up with some online color scheme generators.
Let’s take a look at 7 easy tools for choosing errorproof color schemes.
List of sites used in the section
When compared to the more than 25-year long existence of the internet, true web typography looks like a kindergartener. It is only a few years old.
Of course even the earliest websites contained text (in fact the first-ever website was nothing but text), but the font choice was limited, to say the least.
Properly chosen typography for the project means that it helps to send the message of the website. It’s also important to remember that typefaces, just like colors, can provoke certain kinds of emotions.
That’s why it’s important to choose your fonts carefully and with the reader in mind.
Good headings and subheadings are those elements of a website design that attract users and encourage further reading. That is why it is essential to learn how to create them correctly.
Lucky for us there are a ton of resources and online tools for easier font pairing. Let’s take a look at some of them now.
Let’s now sum things up and take a look at 3 major aspects of any font that will be great for your web designs.
When designing websites you must remember about certain blocks building it. Some of them will always be present in the design, but some of them are optional.
Let’s take a look at how a typical website is built. We are going to dissect a website starting from the top and moving downwards.
Now let’s move past the Header and the Hero sections and stop at the articles and sidebars. These sections will look different not only because of your design choice, but mainly because of the “nature” of the site.
They will look different for a blog, different for a corporate or personal site and you will see variations within those concepts.
So what’s a grid?
Think of it as a series of invisible lines that help you in structuring your website design and in making it symmetrical and easier to code.
Those lines are a great help when placing the elements of your design, not just the main containers. A lack of alignment is very noticeable and creates a sloppy impression.
A typical grid is constructed of units, gutters and columns. Let’s take a quick look at those using a 12-column grid as an example.
In this lecture you will learn how to use Affinity Designer to design your own grid
In the next couple of videos we’ll take a look at modern web design trends. This will help you in understanding the design patterns that designers are following these days.
In this video we will take a look at a few places around the web where you can find great inspiration for your next web design project.
From a typical eager designer’s point of view creating a wireframe for a website design is as boring as it is redundant. Well, that’s not true.
In fact a wireframe can help you in tremendously speeding up your workflow and can save you a lot of time. Many ideas that seem great in your head when you are picturing them tend to look poorly when put on a computer screen. Trust me, I know this from experience.
But what’s a wireframe and why I am making such a big deal about it?
When building your own wireframe system I think you should start with those elements that you are most likely to be using in a typical web design scenario.
I mean if you want you can create all the elements you can possibly imagine, but I think that if you create the essential elements first, you will have a great base for building and expanding wireframes.
But what are those essential elements?
I’ll start by creating a video wireframe element and for that I’ll clone the image element and get rid of the inside lines
Once all your assets are created they are ready and waiting for you to use them to build your wireframe. In this video we will take a look at how to practically use your assets to create a wireframe. The process is super easy and enjoyable.
There are a lot of tools and resources online that you can use to build your won wireframes and prototypes.
But the problem with them is that the majority of the ones you are most likely to find are paid. They have some limited free capabilities, but to uncover their tru potential you have to pay, in most cases a recurring fee.
It’s hard to imagine a website without images and other graphical elements. True, there are some designs that use only typography, but they are for very, very niche projects.
Chances are that in your career as a web designer you will be using images in your projects. And you will be using them a lot. It’s essential to know how to handle them in your designs, so let’s explore this subject now.
Text styles in Affinity Designer are a great way of speeding up a web design process. If you are a fan of changing font sets to quickly preview different variations of your design, you will love text styles.
In this lecture you will get yourself familiar with the design part of the course. You will discover the web page we'll be designing in Affinity Designer.
You can download the files needed for the design here ->
https://drive.google.com/open?id=0B4EhouZW-YgVc1JiRTJZOWo4MkE
In this video we will create our own custom color swatches that we'll be using in the design process.
in this video we are going to create a library of our custom text styles. We will create heading and body text styles to use i the design process.
In this lecture we'll take a look at the images and icons we'll be using in the design
We are going to start the design process with creating the logo. Affinity Designer allows you to add different kinds of fills to live text and this is what we will be using in to create the logo.
In this video we will start creating the navigation system of the website, starting with the menu links.
In this video we will add the social media icons. This will give the opportunity to learn how to handle embedded documents in Affinity Designer.
n this lecture we'll add the main image to the Hero section. We'll also discover how to use the Vector Crop tool in Affinity Designer.
The images you add might be really big and slow your computer down. That is why it is important to learn how to properly handle them in Affinity Designer to save some disk space and make the software run smoother.
In this lecture we are going to make the image a bit darker.
In this lecture we are going to add the main, bold typography to the hero background image.
In this lecture we will add the slider navigation to the hero section.
The first section will include section heading, subheading and a contrasting background.
Now it's time to add featured items to the section.
In this lecture you will learn yet another way of working with images inside Affinity Designer. We will create the second featured item section.
In this lecture we will learn yet another way of prepping the images for a website design. We won't need any special tools for it - just the most basic, but powerful techniques.
Replacing images in Affinity Designer is as easy as just selecting the Replace Image command in the Context panel.
Ceating the image gallery will allow us to learn how to use one way of using clipping masks inside Affinity Designer.
In this lecture we'll start creating the Footer section.
In this lecture we will finish the footer and the whole design part
When you are done with designing a webpage, it’s time to deliver it to the client. On various stages of communication with the client, you will be presenting different, slightly changed versions of the design, so it’s good to know how to quickly save and share your work using Affinity Designer.
If you are ready to send the design to a developer there are a few things you need to take care of.
The Export Persona is a whole different workspace and set of tools created just for exporting your assets.
Its main tool is called the Slice tool and it allows you to create small pieces of artwork called slices. Those slices can then be turned into separate files thanks to the Slices panel.
Let's sum up what we've learnt in the course
In this video we will start the creation by first exploring the wireframe for the front page of the blog.
If you want to follow along, you can download the assets from this link: https://drive.google.com/open?id=1nvsSSlWQ2R5mLjfnswiBqC6JVO-UFskK
In this lecture we will break down the main page of our modern blog design.
Let's take a look at the colors, images and typography used in this design.
the design part begins! In this video we will start creating the header: the logo and the navigation
In this lecture we will add the social media icons to the header.
In this lecture we will start creating the hero section. We'll add the main images first.
To make the blog posts' titles more visible, we'll add a subtle shading to the images.
We will finish the slider with adding the navigation arrows. For that we will use the Pen Tool.
In this lecture we will create the container for the featured blog post
In this lecture we will add the first pieces of text: date and post title
In this lecture we will add th remaining pieces of text: author's name, comments, icons, post excerpt, tags and read more.
In this video we will create the visual guides that will help us in creating the grid containers.
In this video we will create the first container for the grid element
In this video we will finish building the cards with blog post excerpts.
In this video we will add the Older Posts link and use the Arrow custom shape tool to create an arrow.
In this video we will take a look at the elements comprising the Sidebar
In this video we will create the Search Box
In this video we will create the first label and the About Me section of the Sidebar
In this video we will create the text section of the Sidebar.
In this video we will create the first container for the list of the most popular blog posts
In this video we will create a list of the most popular bog posts.
In this video we will create the Ads section of the Sidebar
In this video we will borrow the header section to turn it into the bottom part of the Footer
In this video we will take a quick look at how we can approach the footer colors in our design in 3 different ways
In this video we will finish creating the main page of the blog. We are also going to preview the next project : the Single Blog Post Page
In this video we will take a look at the single post design.
In this video we will create the featured image and the Post Container
In this video we will add the first pieces of text: the date, post title and links.
In this video we will the Paragraphs and Images
Traffic lights
Save this course
Save
Reviews summary
Practical web design with affinity designer
Includes essential web design fundamentals.
Clear explanations and easy-to-follow instruction.
Leveraging AD for web design is a key strength.
Hands-on design projects are a highlight.
Activities
Find a mentor who can provide guidance and support
Show steps
Connect with an experienced professional who can offer personalized guidance and support throughout your learning journey.
Browse courses on
Web Design
Show steps
-
Identify individuals in your network or online communities who have expertise in web design and Affinity Designer.
-
Reach out to potential mentors and express your interest in learning from them.
-
Set up regular meetings or communication channels to receive guidance and feedback.
Read book Affinity Designer for Beginners
Show steps
Set a strong foundation by learning the basics of Affinity Designer to apply to the concepts you will learn in this course.
Show steps
-
Purchase a copy of the book Affinity Designer for Beginners.
-
Read the first few chapters to get an overview of the software.
-
Complete the exercises provided in the book to practice using Affinity Designer.
Read Don't Make Me Think
Show steps
This book will help you to understand the basics of user experience and usability, which are essential for any web designer.
View
Don't Make Me Think, Revisited: A Common Sense...
on Amazon
Show steps
-
Read the book
-
Take notes on key concepts
-
Apply what you've learned to your own web designs
11 other activities
Expand to see all activities and additional details
Show all 14 activities
Watch Affinity Designer tutorials by Dawid Tuminski
Show steps
Supplement your learning with video tutorials led by an expert on the software to bridge any potential knowledge gaps.
Browse courses on
Affinity Designer
Show steps
-
Search for Affinity Designer tutorials by Dawid Tuminski on YouTube or Udemy.
-
Watch the tutorials to learn about the different tools and features of Affinity Designer.
-
Complete the practice exercises provided in the tutorials to reinforce your understanding.
Re-watch videos
Show steps
Going back through course materials will help you to refresh your understanding of some of the core design principles.
Browse courses on
Web Design
Show steps
-
Go back through the video lectures
-
Take notes on any key items or concepts
-
Review your notes regularly
Join a study group or online forum for web designers
Show steps
Engage with a community of learners and practitioners to share knowledge, ask questions, and receive support.
Browse courses on
Web Design
Show steps
-
Identify online forums or study groups dedicated to web design and Affinity Designer.
-
Join the community and actively participate in discussions.
-
Ask questions, share your experiences, and provide feedback to others.
Join a web design community or forum
Show steps
Joining a web design community or forum will give you the opportunity to connect with other designers and learn from their experiences
Browse courses on
Web Design
Show steps
-
Find a community or forum that is relevant to your interests
-
Introduce yourself and ask questions
-
Participate in discussions and share your work
Watch tutorials on CSS Grid
Show steps
CSS Grid is a powerful layout system that can help you to create complex and responsive layouts. Watching tutorials on CSS Grid will help you to learn how to use it effectively.
Browse courses on
Web Design
Show steps
-
Find tutorials on CSS Grid
-
Watch the tutorials and take notes
-
Practice using CSS Grid in your own projects
Create a series of simple website designs in Affinity Designer
Show steps
Practice the web design principles you learn in the course by applying them to your own projects.
Browse courses on
Web Design
Show steps
-
Choose a simple website design template or wireframe.
-
Recreate the design in Affinity Designer using the tools and techniques you have learned.
-
Experiment with different colors, fonts, and layouts.
-
Get feedback on your designs from other students or an instructor.
Design a portfolio landing page
Show steps
Creating a portfolio landing page will give you an opportunity to apply the skills you have learned through this course
Browse courses on
Web Design
Show steps
-
Choose a template or start from scratch
-
Design the layout and typography
-
Add your work and contact information
Write a blog post about your experience learning web design in Affinity Designer
Show steps
Reflect on what you've learned and share your knowledge with others to reinforce your understanding and potentially help others.
Browse courses on
Web Design
Show steps
-
Choose a topic related to web design in Affinity Designer that you are passionate about.
-
Write a blog post that shares your knowledge and experience on the topic.
-
Publish your blog post on a platform like Medium or your own website.
-
Share your blog post with others and get feedback.
Compile your work
Show steps
Compiling your work into a portfolio for potential clients to see will help you to solidify your learning in this course
Browse courses on
Web Design
Show steps
Create a personal portfolio
Show steps
Completing your personal portfolio will allow you to showcase your web design skills and make you more well-rounded as a web designer.
Browse courses on
Web Design
Show steps
-
Start by creating a mood board to gather inspiration
-
Choose a theme and color scheme
-
Design the layout and typography
-
Add your portfolio content
-
Publish your portfolio online
Design a website from scratch
Show steps
Designing a website from scratch will give you the opportunity to apply all of the skills you have learned in this course
Browse courses on
Web Design
Show steps
-
Choose a topic and target audience
-
Create a sitemap and wireframe
-
Design the layout and typography
-
Add content and images
-
Test and publish your website
Find a mentor who can provide guidance and support
Show steps
Connect with an experienced professional who can offer personalized guidance and support throughout your learning journey.
Browse courses on
Web Design
Show steps
- Identify individuals in your network or online communities who have expertise in web design and Affinity Designer.
- Reach out to potential mentors and express your interest in learning from them.
- Set up regular meetings or communication channels to receive guidance and feedback.
Read book Affinity Designer for Beginners
Show steps
Set a strong foundation by learning the basics of Affinity Designer to apply to the concepts you will learn in this course.
Show steps
- Purchase a copy of the book Affinity Designer for Beginners.
- Read the first few chapters to get an overview of the software.
- Complete the exercises provided in the book to practice using Affinity Designer.
Read Don't Make Me Think
Show steps
This book will help you to understand the basics of user experience and usability, which are essential for any web designer.
View
Don't Make Me Think, Revisited: A Common Sense...
on Amazon
Show steps
- Read the book
- Take notes on key concepts
- Apply what you've learned to your own web designs
Watch Affinity Designer tutorials by Dawid Tuminski
Show steps
Supplement your learning with video tutorials led by an expert on the software to bridge any potential knowledge gaps.
Browse courses on
Affinity Designer
Show steps
- Search for Affinity Designer tutorials by Dawid Tuminski on YouTube or Udemy.
- Watch the tutorials to learn about the different tools and features of Affinity Designer.
- Complete the practice exercises provided in the tutorials to reinforce your understanding.
Re-watch videos
Show steps
Going back through course materials will help you to refresh your understanding of some of the core design principles.
Browse courses on
Web Design
Show steps
- Go back through the video lectures
- Take notes on any key items or concepts
- Review your notes regularly
Join a study group or online forum for web designers
Show steps
Engage with a community of learners and practitioners to share knowledge, ask questions, and receive support.
Browse courses on
Web Design
Show steps
- Identify online forums or study groups dedicated to web design and Affinity Designer.
- Join the community and actively participate in discussions.
- Ask questions, share your experiences, and provide feedback to others.
Join a web design community or forum
Show steps
Joining a web design community or forum will give you the opportunity to connect with other designers and learn from their experiences
Browse courses on
Web Design
Show steps
- Find a community or forum that is relevant to your interests
- Introduce yourself and ask questions
- Participate in discussions and share your work
Watch tutorials on CSS Grid
Show steps
CSS Grid is a powerful layout system that can help you to create complex and responsive layouts. Watching tutorials on CSS Grid will help you to learn how to use it effectively.
Browse courses on
Web Design
Show steps
- Find tutorials on CSS Grid
- Watch the tutorials and take notes
- Practice using CSS Grid in your own projects
Create a series of simple website designs in Affinity Designer
Show steps
Practice the web design principles you learn in the course by applying them to your own projects.
Browse courses on
Web Design
Show steps
- Choose a simple website design template or wireframe.
- Recreate the design in Affinity Designer using the tools and techniques you have learned.
- Experiment with different colors, fonts, and layouts.
- Get feedback on your designs from other students or an instructor.
Design a portfolio landing page
Show steps
Creating a portfolio landing page will give you an opportunity to apply the skills you have learned through this course
Browse courses on
Web Design
Show steps
- Choose a template or start from scratch
- Design the layout and typography
- Add your work and contact information
Write a blog post about your experience learning web design in Affinity Designer
Show steps
Reflect on what you've learned and share your knowledge with others to reinforce your understanding and potentially help others.
Browse courses on
Web Design
Show steps
- Choose a topic related to web design in Affinity Designer that you are passionate about.
- Write a blog post that shares your knowledge and experience on the topic.
- Publish your blog post on a platform like Medium or your own website.
- Share your blog post with others and get feedback.
Compile your work
Show steps
Compiling your work into a portfolio for potential clients to see will help you to solidify your learning in this course
Browse courses on
Web Design
Show steps
Create a personal portfolio
Show steps
Completing your personal portfolio will allow you to showcase your web design skills and make you more well-rounded as a web designer.
Browse courses on
Web Design
Show steps
- Start by creating a mood board to gather inspiration
- Choose a theme and color scheme
- Design the layout and typography
- Add your portfolio content
- Publish your portfolio online
Design a website from scratch
Show steps
Designing a website from scratch will give you the opportunity to apply all of the skills you have learned in this course
Browse courses on
Web Design
Show steps
- Choose a topic and target audience
- Create a sitemap and wireframe
- Design the layout and typography
- Add content and images
- Test and publish your website
Career center
Web Designer
Front-End Developer
UX Designer
Art Director
Graphic Designer
Web Developer
UI Designer
Technical Writer
Instructional Designer
Animator
Video Editor
Photographer
E-Learning Developer
User Experience Researcher
Information Architect
Reading list
Save
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
