This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
UPDATE: Course updated and is ready for 2016
Get the course now while the price is still low … just CHECK OUT THE REVIEWS below!
Over 1400 students have joined this course … a HUGE thank you to each and everyone. Do not miss out – enroll NOW and join them!
Create Inspirational Websites with Mood Boards and Style Tiles to Mobile First Design!
The digital age is upon us – and this means we have to learn its language … become web-whisperers!
Introducing inspirational web design to companies of all sizes – companies that are lost in the ocean of loud noise and customers with ADHD – has never been in more demand.
If you are a web designer and need to communicate creative and inspiring ideas and proposals to customers – this course is for you.
If you are a building a start-up company or are a project manager and you need to understand the flow of things in the world wide web – then this course is for you.
If you want to design your own website and you find that Photoshop is too expensive and too inflexible … this course is for you.
Have your customer feast her eyes on the bright and rich style tiles you create with Inkscape and allow them to taste the sweet and colorful nuggets of Bootstrap 3 goodies!
Present a beautiful and scenic responsive web design ready for the most demanding project.
ENLIST NOW to inspire your boss and draw in new customers with your stunning skills.
I will walk you through the design process of a real life case study web design project using the flexible vector drawing tool Inkscape and the popular mobile first Bootstrap 3 HTML and CSS framework!
Inkscape is a wonderful FREE professional vector graphics drawing tool that you can use on Windows, Mac OS X and Linux. It’s free and open source.
Responsive design is fast growing – exploding really – and same can be said about Bootstrap … as the major framework for creating websites that look great on all internet browsers … from mobile and tablets to desktops.
Designing custom websites using these two solid and trending platforms will get your projects noticed and enable you to MAKE MORE!
In this course I lead you … step by step – focusing on the most important and demanding tasks you need to complete!
You will be surprised by how much you can do.
My promise to you is this:
You will create a complete web design that you can show your boss or customer – based on Style Tiles and a stunning Bootstrap 3 prototype.
Everything based on standard and most up to date server vector graphics and HTML.
Take the supplied design and customize as you like. Use for your own job advancement or sell to local clients for hundreds or even thousands of dollars!
This How-to course is fast-paced … so hold on as we speed ahead. If you feel I am going too fast – just rewind the video and watch it again 🙂
By following the lectures carefully, you can get a job as a web designer or even sell complete designs to highpaying customers.
Does this sound exciting?
You must promise me … and yourself … to study the entire … course (don’t skip through it and don’t just download the design … make changes and create your own beautiful designs.
Use the shortcuts I give you here and just do as the course shows you.
Take notes as you go along.
I try to answer all messages the same day.
Now … Let’s get started
I can’t wait to see those amazing web design projects that you’ll create using Inkscape and Bootstrap 3!
Get ready to have your own design up and running today, right after going through this course … and be earning big – soon after that!
Grab Your Copy Now.
Get up and running with this inspiring course on web design success.
- Full, free lifetime access
- All future extra lectures and upgrades are always included for free
- Unconditional Udemy 30 day money-back guarantee … that’s my personal promise of your success!
- … and much, much more!
ONE FINAL POINT
Now you can have your own web design inspiration as you go through this course … and start earning those big round numbers!
Click the [take this course] button, top right, now … every hour you delay is costing you money…
Inkscape: Get up and running!
-
1Why Responsive Web Design and why choose Inkscape and Bootstrap 3?
Get a better understanding of what you are getting out of the course.
Introducing inspirational web design to companies of all sizes - companies that are lost in the ocean of loud noise and customers with ADHD - has never been in more demand.
If you are a web designer and need to communicate creative and inspiring ideas and proposals to customers - this course is for you.
If you are a building a start-up company or are a project manager and you need to understand the flow of things in the world wide web - then this course is for you.
If you want to design your own website and you find that Photoshop is too expensive and too inflexible - this course is for you.
-
2Inkscape - Creating vector graphics for responsive web design!
A powerful, free design tool
Whether you are an illustrator, designer, web designer or just someone who needs to create some vector imagery, Inkscape is for you!
- flexible drawing tools
- broad file format compatibility
- powerful text tool
- Bezier and spiro curves
-
3Bootstrap - Mobile first web design to take you further
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web!
This video answers the question WHY we want to use Bootstrap 3 with some convincing statistics.
-
4Case Study - CarZ.is: The Cheerful Car Rental!
Having a real-life case-study to follow along should give you a deeper understanding about what is needed for the design and what the end result could be.
-
5Introduction to the course and the Udemy environment
Introducing all the sections and what they cover
How to start a Discussion
How to create a course Review
Go into a course
How courses are marked watched
Important to take all lectures
How to play the videos
Inkscape: Easy Logo Design using Inkscape
-
6Inkscape: Download and setup!
Finding Inkscape.org on the web and downloading on your machine is a snap!
-
7High level overview and simple tools to use!
Here is a quick overview of Inkscape and the simple graphics tools you have access to. Cricles, Boxes, Lines, Curves and Coloring...
-
8Physical Deliverable - Inkscape Cheat Sheet Download!
Inkscape: Cooler Web Design Method!
Bootstrap: Get up and run some more!
-
13Surprising way to gather customer needs!
Taking down the customer ideas about the web site design from something like a mood board and using Inkscape to come up with a usable design method using style tiles.
-
14Web Design Layout using a "secret" method!
Finding the template for the style tiles at GitHub and downloading the SVG file to open with Inkscape.
PLEASE NOTE: Since there are some problems opening the the GitHub version of the SVG template with Inkscape 0.92.3 - you can use the file attached with this lecture.
-
15Begin with the most important Logo!
Start adding the logo to the style tile.
-
16Cooler color selection!
Cool ways to find great color combinations.
color.adobe.com - kuler
-
17Textures and Patterns set the stage!
Adding textures and patterns from the mood board to our style tile.
-
18A great source of fonts: ready for the web!
Google has got us covered with fonts:
google.com/fonts
-
19Designing with fonts!
Adding the Google fonts into our Inkscape design
-
20Final touches and cooler styling!
Giving our design some nice coloring adding background - all in Inkscape.
Concluding our design.
-
21Physical Deliverable - Cheerful Car Rental - Logo and Mood Board
-
22Inkscape
Bootstrap: Coolest CSS and HTML Web Design Framework!
-
23Overview of the Bootstrap 3 goodies!
There are SO MANY nice components that Bootstrap 3 has to offer. From Buttons, Labels, Menu structures to advanced Javascript stuff like the Carousel.
-
24Action Step - Set up Bootstrap 3 on your own machine!
Download the code from getbootstrap.com and get it running!
-
25BONUS: Bootstrap 3 Grid System!
Bad example - www.sphere.bc.ca/test/sruniverse.html
Simple example - google.com
Newspaper - www.nytimes.com
-5 columns-non responsiveNewsweek - www.newsweek.com
-responsive-bootstrap 3Facebook
Class-container - around all-row - contains the columns-col-md-xx - for the content
-
26Physical Deliverable - Download Bootstrap 3 Cheat Sheet!
-
27Where do I find Bootstrap 3?
Bootstrap: Booking Engine Web Elements!
-
28Color - Start moving the design from Inkscape to Bootstrap 3
Moving the design from Inkscape to Bootstrap 3 is not that hard once you have the clear goal in mind.
-
29Adding Google Fonts to our website
Its great to be able to use the free web fonts from Google - and it makes sure the site looks good whereever we are.
-
30Branding the header with our logo and making the navbar work as it should
Bootstrap 3 has some nice features to control the navigation of the web site we are designing.
Conclusion
-
31A time and a place - getting picked up and returned safely..
The first step in our car rental case study is to get pickup and return location and dates.
-
32A list apart - the obvious choices...
The second step is for displaying a list of available cars for hire. With pricing and other information. Also carrying the Booking information forward.
-
33Extras! Extras! - Read all about it!
No - this is more about displaying the list of extras for the selected car :)
-
34Getting personal - do we really need all that info?
Gathering information about the driver.
Everything nice and setup to go for the payment gateway.
-
35Physical Deliverable - carz.is Booking Engine
BONUS - Inkscape 101
-
36Congratulations and a BONUS!
CONGRATULATIONS on finishing the course :)
If you want to promote your newly created Bootstrap 3 and Inkscape Web Design Project eMail me with the URL of your site and why you found this course of great value in your project.
thrandur@thrandur.net
I will then create a post on my PR3 website with an image of your design and a HIGH VALUE link.
Please send me ideas for things that need clearing up.
I try to answer all questions the same day – and may even create a new lecture...THANKS FOR WATCHING!
If you found GREAT VALUE in the course please consider leaving a 5 star review :)
-
37New lectures coming soon!