Skip to main content

Web Designer and Developer Academy

DesignerThe most important thing to understand about web design is that it is NOT about making things look "pretty" or "expressing yourself".

Design is not "art", design is about communication.

You (The Designer) are communicating to the user:

  • WHAT the website does
  • WHAT the buttons do
  • HOW should she user interact with the website
  • HOW can the user understand what is going on?
  • HOW can you prevent the user from doing stupid stuff?
  • HOW can you trick the user into doing what it is you really want them to do lol.

Web Design

Vector vs. Raster graphics

https://www.youtube.com/watch?v=p2thSkOa_Xg

Image File Formats

https://youtu.be/ww12lImOJ38?feature=shared

For more details:

https://www.youtube.com/watch?v=WblPwVq9KnU

dedicated desktop app and works fully offline.

Figma is very similar so you can also learn Figma later on.

You can download the free trial for Sketch:

https://www.sketch.com/signup/

Once you are familiar with it, I will give you my license key.

Wireframes

https://www.youtube.com/watch?v=2hQA1ZsGAH8

https://www.youtube.com/watch?v=pN92rnO_n5U

I think Ninjamock is the best wireframing tool, much better than sketching on iPad or using Sketch or Figma. Ninjamock is crazy fast

Ninjamock

https://www.youtube.com/playlist?list=PLHOoBqQmJ0gwld_wvwE0SYrS-q96aL5d2

https://ninjamock.com/

Logo Design

You already designed the Parakeet Logo, so you understand the basics of this part

Favicons

After you create a logo, you need to create a favicon version of it for the website.

https://www.youtube.com/watch?v=1ovWLjV16WI

https://favicon.io/favicon-converter/

Web Development

HTML

https://www.codecademy.com/learn/learn-html

VSCode

If you are going to write code, then you need a CODE editor.

https://www.youtube.com/watch?v=WPqXP_kLzpo

Download VS Code (or even better, VS Codium) and follow along.

And if you want a more in-depth guide, try this one:

https://www.youtube.com/watch?v=heXQnM99oAI

React

TBHWriting HTML code directly is BULLSHIT and everyone hates doing it. Nowdays, people use new tools (like React, for example) to write code that is then turned into HTML automatically later on :)

https://react.dev/learn

Using Templates

TBHPeople rarely make a website from scratch, so find a cool nice template, download the sketch/ figma files, make a mockup of what you want the website to look like, then edit the React template to make it look like how you want.

https://cruip.com/

Example template: https://cruip.com/demos/cube/?nc=1

Website I made based on that template: https://www.starstreamlabs.com/

Other Concepts

Kerning Typeface

Back to top