2016
Digital Tutors / Pluralsight
Kerri Augenstein
4:01
English
Viewers can expect to learn how to apply the basic principles of HTML and CSS (as ideas, not actual code), accessibility, responsive design, and usability, to their typography, use of color, layout, and design aesthetic. The creative exercise built into the format of the course (we will use the same content to create two visually different interior pages, both desktop and mobile) will help demonstrate the power of visual design in crafting distinctive user interfaces tailored to different brand design and esthetics. Though the literal “deliverable” of the course will be two fairly simple interior website pages, the real purpose of this course is to bring together the abstract, gestalt principles of graphic design into the working, machine parts of frontend code and interface design. Lessons will cover what skills, knowledge, and tools designers or developers might need to know in order to make their user interfaces well designed, build-ready for proper semantics, and intuitive for users.
1
Introduction and project overview
01:24
2
Setting up the file structure
05:39
3
Creating our base files
08:24
4
Grids
09:42
5
Placing the logo and creating the primary navigation
10:53
6
Making the typographic selection for your primary navigation
12:03
7
Accessibility basics and dropping text in the main content well
10:57
8
Typography of paragraph and header styles
11:20
9
Continuing typography on the intro copy and unordered list
12:21
10
Continuing typogrphy on the image caption and pull quote
10:56
11
Thinking through padding and margin with variable content
10:31
12
Designing interactions
06:52
13
Continuing interactions with link styles
08:33
14
Color - considerations when using brand color palettes on the web
05:52
15
Designing white space for the context of the web
09:36
16
Beginning design of the right sidebar elements with the related block
09:58
17
Finishing our right sidebar design elements
11:00
18
Designing the footer and adding in a final design element to the mockup
10:39
19
Responsive design principles
05:04
20
Beginning to implement responsive design on our first mockup
07:29
21
Continuing mobile implementation for our first mockup
11:37
22
Adjusting the right sidebar and footer elements for the mobile design
10:34
23
Visual design - the supporting character?
05:36
24
Getting into our second mockup
01:39
25
Why use a conventional layout for your page (and website)?
04:13
26
Distinct esthetic choices that separate our second mockup from our first
07:41
27
Color palettes and the web
05:14
28
Navigation interaction in responsive design – is there a best practice?
08:19
29
Creating design specs
07:32
digitaltutors.com/tutorial/2465-Visual-Design-for-the-Web
Download File Size:1.42 GB
|
