WEB DESIGN - CHOOSE A CLASS TITLE BELOW
Sketch Essentials
Photoshop CC
Adobe Fireworks
UX Design
Portfolio Design
Personal Projects
Sketch Essentials
- Learn Sketch in 30 Minutes (27:47)
- Layers, Artboards and Pages (7:29)
- Exporting (3:05)
- Colors and Gradients (3:45)
- Masking (1:13)
- Customizing the Toolbar (3:06)
- How to Fade Images (4:36)
Photoshop CC Essentials (UI Design Series)
Photoshop CC Walk-thru and How-To's
- Photoshop CC Walk-Through - Overview (19:26)
- How to Work with the Move Tool (Pointer) (8:43)
- How to Work with Shapes (Rectangles & Circles) (9:50)
- How to Change Colors on Shapes (11:51)
- How to Add Gradients (10:31)
- How to Mask Images (i.e. place images into shapes) (6:23)
- How to Fade Out One Side of an Image or Object (Layer Mask) (10:31)
- How to Work with Text (15:27)
- How to Use the Pen Tool (12:00)
- How to Add Drop Shadows (5:30)
- How to Align Objects (4:03)
- How to Add Color and Gradient Overlays (3:58)
- How to Work with Layers (8:49)
- How to Set your Rulers & Guides (4:48)
- How to Use Adjustment Layers (6:26)
- How to Add Noise to an Object (5:21)
- How to Work with Artboards (8:44)
Adobe Fireworks: How Tos/Web Design Process
Adobe Fireworks - How-To's
- Adobe Fireworks Overview Walk-Through (33:28)
- How To Create a Vector Mask (4:41)
- How To Create Gradients on Shapes & Text (5:11)
- How To Export & Slice Images (JPG, GIF & PNG's) (12:29)
- How To Work with the Color Picker (9:51)
- How To Create Icons (10:06)
- How To Work with Vector Objects (14:21)
- How To Create an Image Map (7:50)
- How To Import an Image (2:03)
- How To Crop Images (6:48)
- How To Work with Pages & Layers (6:32)
- How To Align Objects (4:13)
- How To Create and Use Symbols (4:06)
- How To Create Animated GIFs (5:39)
- How To Create a Prototype (6:59)
- How To Create a Prototype PDF (3:01)
- How To Work with the Text Features (13:47)
How to Design a Website
- Work Files & HTML/CSS Templates (27.6 MB)
- Step 1: The Kick-Off Meeting (7:35)
- Step 2: Research (19:19)
- Step 3: Organize & Gather Content (9:58)
- Step 4: Wireframe the Home Page (24:55)
- Step 4: Wireframe the Features & Specs Page (24:29)
- Step 4: Wireframe the Photo Gallery Page (9:51)
- Step 4: Wireframe the Brochure Download Page (Web Form) (31:10)
- Step 4: Wireframe the "Get a Quote" Page (Web Form) (5:24)
- Step 4: Prototype Wireframes (7:10)
- Step 5: Design the Home Page Background & Header (33:53)
- Step 5: Design the Home Page Billboard (32:04)
- Step 5: Design the Home Page Content (3 Boxes) (27:02)
- Step 5: Design the Features & Specs Page (41:59)
- Step 5: Design the Photo Gallery Page (14:31)
- Step 5: Design the Brochure Download Page (Web Form) (26:59)
- Step 5: Design the "Get a Quote" Page (Web Form) (25:33)
- Step 6: Create an Interactive Prototype of Final Design (14:30)
How To Code a Website in HTML/CSS
- Coding the Background & Header (Setup Your HTML & CSS File) (42:34)
- Coding the Home Page Billboard Section (42:39)
- Coding the Home Page Content Section (3 boxes) (54:45)
- Coding the Features & Specs Page (Part 1) (57:26)
- Coding the Features & Specs Page (Part 2) (43:04)
- Coding the Photo Gallery Page (1:06:14)
- Coding the Brochure Download Page (54:48)
- Coding the Get a Quote Page (32:41)
- Web Form - How to Clear Text Field when Clicked (7:05)
- Web Form - Making your Web Form Function Using 3rd Party Provider (19:31)
- Test, Monitor & QA (10:50)
UX Design: Process & Methods
- The UI/UX Design Process (PDF Download) (12:20)
- Flowcharts (25:37)
- Sketching (22:23)
- UX Design - User Personas & Use Cases (16:23)
- Interaction Design: Using Web Standards (15:56)
- Understanding the UI/UX Design Process (11:24)
- UI/UX Design 101 (21:39)