# Web Designer and Developer Academy

The 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 the 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.

# Design

## Video Game Design
https://www.youtube.com/watch?v=S1W8BZPf-N8

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

https://www.youtube.com/watch?v=8RAF-55O2-k

# Web Design

## Vector vs. Raster graphics

[https://www.youtube.com/watch?v=p2thSkOa_Xg](https://www.youtube.com/watch?v=p2thSkOa_Xg)

## Image File Formats

[https://youtu.be/ww12lImOJ38?feature=shared](https://youtu.be/ww12lImOJ38?feature=shared)

For more details:

[https://www.youtube.com/watch?v=WblPwVq9KnU](https://www.youtube.com/watch?v=WblPwVq9KnU)

## Vector Graphics Editor: Figma or Sketch 
I recommend learning Sketch first.

[https://www.sketch.com/guides/#courses](https://www.sketch.com/guides/#courses])

It has a 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/](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=2hQA1ZsGAH8)

[https://www.youtube.com/watch?v=pN92rnO_n5U](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

Ninjamock is crazy fast if you use the templates.
It looks hand drawn and sorta crappy, which is exactly what you want in a wireframe.

[https://www.youtube.com/playlist?list=PLHOoBqQmJ0gwld_wvwE0SYrS-q96aL5d2](https://www.youtube.com/playlist?list=PLHOoBqQmJ0gwld_wvwE0SYrS-q96aL5d2)

[https://ninjamock.com/](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://www.youtube.com/watch?v=1ovWLjV16WI)

[https://favicon.io/favicon-converter/](https://favicon.io/favicon-converter/)


# Web Development

## HTML
[https://www.codecademy.com/learn/learn-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](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](https://www.youtube.com/watch?v=heXQnM99oAI)


## React
Writing 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](https://react.dev/learn)

## Using Templates
People 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/](https://cruip.com/)

Example template: [https://cruip.com/demos/cube/?nc=1](https://cruip.com/demos/cube/?nc=1)

Website I made based on that template: [https://www.starstreamlabs.com/](https://www.starstreamlabs.com/)

# Other Concepts
Kerning
Typeface