How do you rate this course?

1

2

3

4

5

Teacher Flux

Flux is the personal vlog of Ran Segall, a designer and entrepreneur. On the show I'm sharing my journey, struggles and lessons I learn as I build my career as a designer and a business owner.

Share

Course content

0h08m

FREE Web Design Course 2020: Introduction to Web Design | Episode 1

Learn how to design a website from scratch in 2020.

Watch every video of the Free Web Design course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI

In Flux we've decided to teach Web Design for free to those who are using quarantine to make a change in their lives, to those who can't afford a web design course right now or to those that simply want to learn a new skill.

We will be publishing videos every week to cover everything you need to know to get started as a web designer. If you are already one, you can use this course to recap those concepts you need to get stronger at.

Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
-
Gear

0h17m

BASIC WEB DESIGN SOFTWARE: Free Web Design Course 2020 | Episode 2

This is the best software for web design that I use and that I'd like to share with you in this Free Web Design Course so you can learn how to design websites.

You can get started with other software if that's what works for you. That being said, I'd like to encourage you to mater the best possible software in order to achieve the best possible results.

This is what I've been using for years. Trust me on this one: I've tried many different ways to do the same thing to keep what is easy, fast, and efficient to work with.

Timestamps:
· Intro 0:17
· Softwares you need 1:02
· Difference between Vector and Bitmap 2:10
· Illustrator 4:16
· Photoshop 7:34
· Putting all together with Adobe Xd 10:34

Alternatives to Photoshop
· Pixlr: http://pixlr.com
· Gimp: http://www.gimp.org

Alternatives to Illustrator
· Apache OpenOffice Draw: http://www.openoffice.org/product/draw.html
· Inkscape: http://inkscape.org

Alternatives to Adobe Xd
· InVision: http://invisionapp.com
· Figma: http://figma.com
· Sketch: http://sketch.com

An alternative to After Effects
· Principle: http://principleformac.com

Watch every video of the Free Web Design course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI


Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-

0h12m

BRIEF HISTORY OF WEB DESIGN: Free Web Design Course 2020 | Episode 3

Let's take a look at web design over the years to understand web design in 2020.

This is not the lesson you'd expect from a typical Youtube free design course, but this not a typical course!

You are now part of the next generation of web designers, so if you understand how things have evolved until now you will be more conscious about shaping the future.

Watch every video of the Free Web Design course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI

Timestamps:
Intro 0:18
1894 Art Noveau 1:28
1954 Swiss Design / International style 2:29
1990 David Carson - Grunge design 3:30
90's 4:41
00's 7:14
10's 8:17
Nowadays 9:51


Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
-
Gear

0h17m

INTRO TO TYPOGRAPHY: Free Web Design Course 2020 | Episode 4

If you really want to know how to design websites, you need to learn how to use typography.

In this episode, we help you take the first steps to master typography. In web design, typography is super important to make sure you use words in the most powerful way.

Timestamps:
· Intro 0:25
· The purpose of a font 1:08
· Major categories 2:15
· Font properties 4:16
· What fonts 12:29
· What size 14:26
· Exercise 15:42


Watch every video of the Free Web Design course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI


Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
-
Gear

0h12m

USING THE RIGHT IMAGE FOR YOUR WEB DESIGN: Free Web Design Course 2020 | Episode 5

You are wondering: what kind of image should I use for a website? The answer is: it depends.

When we need to decide what type of imagery are we going to use for our web design, we might consider one of 3 basic choices: Photography, illustration, or 3D.

In this episode, we teach you how to think when it comes to deciding what kind of images you should use for your website.

Timestamps:
· Intro 0:23
· 3 steps to find the right images 0:38
· Picking the right style 2:21
· Picking the right image within a style 4:26
· Putting images in context 8:45

Watch every video of the Free Web Design course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI


Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
-
Gear

0h15m

INTRO TO LAYOUT: Free Web Design Course 2020 | Episode 6

In order to understand the secrets of composition for graphic design you first need to understand how powerful layouts can be.

These are the first steps for you to master this greatly important fundamentals of graphic design. Just like a good architect, if you have a good understanding of the laws of physics, composition, and human perceptions you are going to be able to create more impactful and well-designed outcomes.

Timestamps:
· Intro 0:22
· Examples 0:44
· What makes a good layout? 1:34
· Trick Number 1 2:14
· Trick Number 2 7:42
· Exercises 13:47

Watch every video of the Free Web Design course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI


Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
-
Gear

0h11m

HOW TO USE COLORS IN WEB DESIGN: Free Web Design Course 2020 | Episode 7

This is my process to pick colors for website design.

Colors don't just look good or bad. They have a vital function in communication, so we can't get carried away by our favorite colors or personal preferences. You have great power as a designer when choosing colors, so make sure you understand your power to make the most of it.

In this lesson, I'll teach you the steps for you to dominate colors and not letting them dominate you.

Links mentioned:
https://www.empower-yourself-with-color-psychology.com/meaning-of-colors.html
https://color.adobe.com/

Timestamps:
· Intro 0:24
· The meaning of colors 0:42
· Psychology of color resource 2:48
· Color combinations 4:10
· Examples 6:21
· Exercises 10:56

Watch every video of the Free Web Design course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI


Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
-
Gear

0h12m

WHY HIERARCHY IS SO IMPORTANT IN WEB DESIGN: Free Web Design Course 2020 | Episode 8

How to make things pop in web design. Yeah, for real.

You can "make it pop" if you know what you are doing. Understanding "hierarchy" gives you the power to control how the user is going to go through the content you have on your website.

If you want the user to see the number 1 first, you need to know how they'll read 1, 2, 3; not 3, 1, 2, or they'll be confused.

Timestamps:
· Intro 0:19
· Examples 2:17
· Demo 5:38
· Summary 10:50

Watch every video of the Free Web Design course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI


Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
-
Gear

0h07m

USING WIREFRAMES IN WEB DESIGN: Free Web Design Course 2020 | Episode 9

If you are not using wireframes, you are making your process unnecessarily longer.

Wireframes make your life easier. Maybe you have been using them all this time, but in a different way, or maybe you just called them sketches.

Whatever the case may be, this episode is going to help you to make sure you have a clear understanding of wireframes fundamentals.

UI kits:
Platforma: http://platforma.ws
10k Website students: remember that you have a 30% discount.
Invision Form: https://www.invisionapp.com/inside-design/design-resources/free-wireframe-kit-form/

Timestamps:
· Intro 0:19
· Sketches 2:04
· On the computer 2:42
· UI Kits 5:06

Watch every video of the Free Web Design course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI


Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
-
Gear

0h16m

CREATING A GOOD HERO FOR YOUR WEBSITE: Free Web Design Course 2020 | Episode 10

How to design a good hero section.

In this video, I teach you what a hero section is and how it can make your website's audience intrigued or not interested.

What do you think it is that makes us want to stay on a website for longer? Let me know in the comments????

Timestamps:
· Intro 0:29
· Answer these 3 questions 0:56
· Demo 3:04
· Choosing an image 3:42
· Trick to make an image bigger 4:47
· Bringing in the logo 6:20
· Adding text and buttons 7:39

Watch every video of the Free Web Design course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI


Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
-
Gear

0h08m

WEBSITE CONTENT STRUCTURE: Free Web Design Course 2020 | Episode 11

How to structure website content.

Many of you have asked me how do I structure my website or how many pages should a website have.

In this new episode of the Free Web Design Course 2020, let's see the optimal structure of a website and how to present the content ON a website.

Timestamps:
· Intro 0:19
· Step 1: Understand the website's goals 0:46
· Step 2: List all the content to achieve the goals 2:10
· Step 3: Organise content for it to make sense 3:41

Watch every video of the Free Web Design course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI


Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
-
Gear

0h13m

UX/UI BEST PRACTICES FOR WEB DESIGN: Free Web Design Course 2020 | Episode 12

This is what you need to know about UX UI design to quickly improve as a beginner.
The best tip I can give you is to not make people think. Don't be original, be obvious. Don't be witty, be crystal clear.

Additional Resources
Book: Don't make me think https://www.amazon.com/dp/0321965515/ref=cm_sw_em_r_mt_dp_U_.zq1EbD0MFEYY

Timestamps:
· Intro 0:34
· Copywriting 4:00
· Buttons 6:02
· Images 11:16

Watch every video of the Free Web Design course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI


Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
-
Gear

0h18m

PHOTO EDITING 101 FOR WEB DESIGNERS: Free Web Design Course 2020 | Episode 13

Learn how to photoshop your picture for websites.

As a designer, you don't always have a lot of time to invest in making a picture look beautiful. And that's the thing: you don't need a lot of skill or time to make something look good.

Make your websites look much better with these simple tricks on your photos.

Timestamps:
· Intro 0:31
· Selection 0:56
· Background 6:39
· Shadows 7:13
· Clean-ups 11:18
· Editing colors 13:29

Watch every video of the Free Web Design course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI


Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
-
Gear

0h21m

DESIGN A HOMEPAGE WITH ADOBE XD: Free Web Design Course 2020 | Episode 14

In this episode of the free web design course we'll take you step by step on how to use Adobe XD to build a homepage for your website

Watch the full course here: https://www.youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI

Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
-
Gear

0h08m

GETTING YOUR WEBSITE READY FOR DEVELOPMENT: Free Web Design Course 2020 | Episode 15

Website mentioned: https://tinypng.com/
-
Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/
-
Gear

0h17m

5 Website Types

An easy-to-digest breakdown of how to design all website types (Timestamps below).

Today, I come to you with a video you can refer to whenever you're starting a different type of project.

Suddenly working on a blog / media outlet website if you've exclusively worked on e-commerce websites for the past 8 months can be daunting.

Different website types require different focuses as the purposes change from ecommerce websites to marketing to portfolios. This video gives you a memorable overview of what to focus on for each type of website ( website types examples) so that you're more confident taking on different kinds of projects.

Website types list:
E-commerce [00:59]
Marketing / Business [4:38]
Blog / Media outlet [8:39]
Educational [11:41]
Portfolio [14:23]

For more Web design tips, check out the FREE Web Design Course Playlist: https://www.youtube.com/watch?v=C72Wk...
-
Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segal...
-
Gear

0h07m

How To Find Web Design Inspiration To Stand Out | Free Web Design Course 2020 | Episode 17

The key to having your websites stand out is looking for web design inspiration outside of the web design space. Watch the video to see what I mean.

I believe that the best way of of creating something truly unique is drawing inspiration in places that are completely unrelated to the world of web design.

If the only way you are drawing inspiration is by looking at your competitors or looking at other websites then not only do you risk creating something generic but you also run the risk of ripping off someone's work accidentally.

Which is why, today, I'm showing you how to think outside the box (for lack of a better expression) and seek out web design inspiration that will entirely differentiate the work that you produce.

Do you have any unique ways of drawing awesome inspiration for your web design in 2020? Let me know in the comments.

Note: It doesn't hurt to start off a search by checking out the best web design inspiration sites out there. Here are some sources:
https://www.awwwards.com/
https://www.lapa.ninja/
http://blog.gaetanpautler.com/

Timestamps:
00:00 Intro
00:59 The steps to finding web design inspiration
1:25 Looking at other websites for inspiration
2:09 Websites I use for web design inspiration
4:03 Where I save all of my web design inspiration
4:29 Finding inspiration outside of web design
7:03 Recap

I use Invision boards to visually collect inspiration: https://bit.ly/2DaqMDe


-
Learn how to build custom websites with Webflow FAST:
https://bit.ly/W

0h10m

3 Psychology Principles Every Web Designer Must know | Free Web Design Course 2020 Episode 18

Design is very much about influencing people (positively). Knowing basic human psychological principles allows us to do just that.

I'm a firm believer in having a solid grasp on human behavior/psychology as this allows you to better understand those whom you are designing for.

Many designers often overlook website design psychology, since, at first-thought it seems like a completely unrelated field offering very little use to designers, when in fact, it is the complete opposite.

Knowing the three fundamental psychological principles I cover in this video will allow you to create an intuitive user experience within your websites, and, in turn have your websites fulfill their purpose (whether that is to sell, inform etc).

Does design psychology interest you? Let me know your thoughts on these concepts in the comments section.

Timestamps:
00:00 Intro
0:25 Understand human psychology
1:55 Mirroring
3:35 Social validation
6:06 Color psychology
8:25 The cognitive bias codex
10:12 Conclusion

Color Phycology:
https://bit.ly/2EMuAva

Learn more about cognitive biases:
https://bit.ly/3fqVg1d

Book Recommendation:
Thinking Fast and Slow

-
Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segal...
-
Gear

0h11m

Tools To Develop Your Website in 2020 (Webflow, Wix

So you've designed your website from top to bottom and now you want to develop it for the world to see. In this video, I cover your options.

Often times designers aren't fully certain when it comes to choosing a development option to turn their web designs into reality. It's understandable given the multitude of options out there: From easy but limited to harder but full freedom of customization.

It's only once you can decide on what kind of experience you want out of development that you can decide on a specific tool. This video should help you with that narrowing down process.

What's your favourite website development tool? Let me know in the comments!

Timestamps:
00:00 Intro
00:40 Website development options
1:00 You can code the website
1:17 Easy but rigid website builders
3:15 Visual coding options
6:48 Content management systems

Web development tools mentioned in the video:
webflow.com
wordpress.com
wix.com
elementor.com
editorx.com

-
Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segal...
-
Gear

0h06m

3 Tips to Improve Your Typography

If you can nail type, then you're already well on your way to creating fantastic layouts.

Here are 3 essential typography tips (with examples) to help get you on your way to mastering type.

Anything you'd like us to cover? Let us know in the comments!

Timestamps:
00:00 Intro
00:38 Tip #1
2:40 Tip #2
4:59 Tip #3


-
Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segal...
-
Gear