Get Started in Design

Graphic, Web, UX/UI & Motion

Noble Desktop

Navigate: Right/Left Arrows (or Swipe Left/Right)
Zoom Out: Press Esc (or Pinch)

These slides are for the seminar: Get Started in Design

We’re Going To Discuss

  • Different types of digital design:
    (Graphic Design, UX Design, UI & Web Design, Motion Design)
  • What do designers do? (including examples of design work)
  • What apps do designers use?
  • What type of computer do you need?
  • Portfolio websites.

How to Get Started

  • Figure out what type of design you’re most interested in.
  • Learn the apps you’ll be designing with.
  • Learn design concepts (typography, color, composition, user interaction, etc.).
  • Practice, practice, practice.
  • Build a portfolio.

Graphic Design

What is Graphic Design?

  • Visual communication through artwork or combined images and text.
  • Designing logos, ads, social media graphics, magazines, books, websites, apps, and more.
  • Different mediums: print, web, presentations, and more.
  • Some people associate graphic design with older types of design (such as print) because new types of designs have specific names (web design, UI design, etc.).
Example: Logo Design
Nutriversity Logo
Logo Design by Ignacio Macri

Example: Book Design

Book design by Order

Example: Social Media

Example of Social Media Graphic
Awareness graphic from Dare 2 Know

Example: PowerPoint

SORAA presentation design by BrightCarbon

Apps for Graphic Design

Learn Graphic Design

Check out our Graphic Design Certificate

UX Design

What is UX Design?

  • Designing the customer experience, which should be easy, intuitive, and anticipates the customer’s needs.
  • User centric design which includes user research, product development, user testing, and more.
  • Noble Desktop Blog Article: What is UX Design?

Examples: UX Design

Apps for UX Design

Learn UX Design

Check out our UX Design Classes and UX & UI Design Certificate

UI & Web Design

What is UI & Web Design?

  • UI (User Interface) Design is designing the visuals of digital products such as apps and websites.
  • You design the layout, type, color, composition, and visuals.
  • UI Design is sometimes called Visual Design.
  • Unlike static mediums like print, UI and web design can also include user interaction and animation.

Examples: Web Design

Examples: App Design

Apps for UI & Web Design

Should I Learn Code?

  • We think web coding skills are very helpful to designers.
  • Code is how the web works. Understanding code allows you to better understand the web.
  • Helps you to better communicate with developers.
  • Helps you know what’s possible, so a developer won’t make you change your design.
  • Helps you know how easy/hard a design will be to implement (some designs will take more time and cost more).

Web Animation

Various technologies are used to animate on the web:

Example: Animated GIF

West Elm Email Animation
GIFs can be simple frame by frame style animations created with Photoshop.
Launch Live Email Animation
GIFs can be complex. This was created with Adobe After Effects.

Examples: GreenSock Animation

Learn Web Design

Check out our:

Motion Design

What is Motion Design?

  • Motion design is like graphic design for video and animation.
  • Uses graphic design concepts such as typography, color, composition, etc. and adds in movement, time, sound, etc.
  • Can be for video (TV, movies), web, apps, etc.

Apps for Motion Design

We previously covered web animation, so now we’ll focus on video motion design.

Example: After Effects

Learn to create this in our After Effects Level 1 Class

Example: After Effects

Learn to create this in our After Effects Level 2 Class

Example: Video Editing

Learn to create this in our Premiere Pro Classes

Get Started with Video Editing

Learn Motion Design

Check out our Motion Graphics Certificate and Video Editing Classes

Computer Advice

For the most part, any decent Mac or PC will work.

Computers for Designers

  • Most designers use Macs, and some apps (like Sketch and Final Cut Pro) only work on a Mac.
  • PCs can run most design apps, and are better for some apps (like PowerPoint and AutoCAD).
  • Getting a new computer? Get an SSD (or at least a Fusion drive on a Mac) instead of a regular Hard Drive.
  • Get a hi-res display (Apple calls Retina) such as a 4K monitor.
  • Video apps like After Effects and Premiere Pro are more demanding. Speed, RAM, and good graphics card help.

Portfolios

Final Thoughts

Design as much as you can. Practice makes perfect.

Have fun!

Learn More

Get started in Noble Desktop’s Certificate Programs & Classes:

Graphic Design
Web Design
UX Design
UI Design
Motion Design & Video Editing