Create your graphics for a responsive website with Inkscape!

Use a free software to design a website layout for both mobile and desktop, create custom icons and fresh looks!
4.7 (34 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
2,844 students enrolled
Instructed by István Szép Design / Web Design
67% off
Take This Course
  • Lectures 14
  • Length 1.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2014 English

Course Description

This course will teach you how to make your own website layout. You will use web design principles, learn about colors and creating your own buttons and icons. All this with an amazing free design program called Inkscape!

If you take part in the course, you will also receive the source file of both of the templates and the fonts used, so you can experiment and modify it!*
During the course I am creating the website layout for a florist shop, but I encourage you to create a site design straight for your own business, or own hobby! Because what I show you is not about flowers! It is about creating, learning design principles and learning to use Inkscape!

This course is about designing a graphical layout for a website.
So the course is NOT about creating CSS and HTML templates!

The course starts with 13 videos and it takes about 90 minutes to complete! Of course, as with my other courses, I will be here to answer your questions and add more videos if you need it!

Go on, download Inkscape for free now, and start to create your own design!

*Sadly, I can not give you the photo, as I don't own the rights. Find a good photo that is matching your design idea instead!

What are the requirements?

  • Download Inkscape
  • Have an idea in mind for your website design project. Having a real problem at hand will make you more creative at finding a solution!

What am I going to get from this course?

  • Create a graphical website layout both for desktop and mobile, using a free graphic design program

Who is the target audience?

  • You don't need to have any knowledge of Inkscape to start this course! - but believe me, after finishing it, you will crave more, it is a very versatile tool ;)
  • Also, Inkscape is a FREE tool! If you are not sure to buy expensive graphic design software just yet, or you are a hobbyist, Inkscape is your best choice to learn and do graphic design!
  • This course if for people who are not satisfied to use boring templates, but want to create their unique designs themselves!
  • This course is about designing the graphics for a website layout.
  • This course is NOT about CSS and HTML

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Preparation

In this course you will learn how to create a website layout with Inkscape.


Welcome to Inkscape! Let's start with setting up our document for designing a website layout!

Section 2: Creating the layout - and learn Inkscape while doing it!

Let's get a bit more familiar with the tools of Inkscape!


Now we will create a very simple layout plan with the tools we already know!


Colors are an important part of webdesign. And with Inkscape you can deal with them with ease!


The web is all about text, so it is evident we should add that to our layout too. Also in this lesson You will create some simple buttons too!


The text tool is obviously not only good for short words but for longer texts as well. In this lesson we will create textboxes and learn about dummy text.


Inkscape is a vector program, but it doesn't mean you should forget about photos for your design! Here is how to import and scale photos in Inkscape!


As Inkscape is a vector design program, this is where it is the best: creating icons from scratch! In this tutorial I show you how to do 3 simple icons in Inkscape with different methods.


Vector layouts are so easy to modify! In this tutorial I will position the icons and change the layout accordingly. Never be afraid to make a mistake with Inkscape, it is very flexible!

Section 3: Modify and export the layout

We all know that the mobile web is important. Creating a mobile web layout with Inkscape is very easy. Focus on what is important, remove the arts that are secondary!


This lesson is about how to get color codes, photos and graphics out of Inkscape to build them into a website template.


Svg is very valuable in web design, so it is good to know how to export it properly.

Bonus lecture - check this out!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

I'm a graphic designer, illustrator and design teacher for more than 10 years. I create clever logos and cute illustrations, I like to inspire, share my knowledge and make people think and laugh!
I use Inkscape, an open source graphic design program in most of my design, and I was teaching this to my students too in a college in Budapest.
I am constantly sharing knowledge about design and life as a freelancer. I teach on Udemy since 2014 and work together with some of my friends now, to create better courses together by sharing my online teaching experience
Exploring new ways to create and sharing my knowledge is what I like the most - so don't be afraid to ask, I'm here to teach!.

Ready to start learning?
Take This Course