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

      Vector Graphics Editor: Figma vs.or Sketch

      I recommend learning Sketch first.

      https://en.wikipedia.org/wiki/Comparison_of_vector_graphics_editors

      www.sketch.com/guides/#courses Wireframe:

      It Ninjahas Mock

      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/

      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