Weekly Outline

0:  Weekly Industry Updates

1:  The Process & The Tools
2: Separation of Content vs. Presentation
3: CSS Pt. 1: Web Typography Foundations
4: CSS Pt. 2: Design Foundations 
5: Responsive Web Design
6: Layout: Past. Present. Future. 
7: Advanced Selectors
8: Transitions & 2D Transforms
9: Keyframe Animation & 3D Transforms
10: Advanced Techniques
 

desn 368 : WEb design 1

 

        Final Website Project

industry updates

Process

2. Separation of content

& presentation

User styles

  1. Install Stylish plugin
  2. Write styling to override
  3. Optionally: Edit/Add existing from UserStyles.org

User Agent Styles

Presentation Attributes

External Styles

Document Styles

Inline Styles

Animation

Override Styles

Computed Styles

7. Advanced selectors

concepts

Resources

 

CSS Selectors: TreeHouse 

Complex Selectors : Learn to Code Advanced HTML & CSS

 

Complex Selectors

 

D.R.Y. coding patterns

Reduce needs for: ids, classes, extra markup

Target HTML  attributes and/or values

Target User Interaction States

Create temporary elements

Combine basic & advanced Selectors

practice

Pseudo Elements

::first-line

::first-letter

::before

::after

::selection

 

Pseudo Classes

:first-child

:last-child

 

Nth Child

:nth-child

:nth-of-type

 

Misc

:root

:target

Child & Sibling

child

sibling


Attribute

attribute

contains

starts with

ends with

applications

Zebra Striping

 

Alternating highlight rows         of data. 

 

Drop Cap

 

Best solution to a drop cap styling w/o additional markup.

 

Collapsing Floats

 

Best solution (so far) to fix collapsing float elements. See TreeHouse's G-Grid system. 

 

Styling Navigation

 

LVFHA or LoVHA

 

Article Styling

 

Style article: lead-ins, excerpts, &  beacons. 

 

Flourishes

 

Visual adornment w/o HTML dependencies.

CSS Ribbons

 

 

| Ribbon Generator

 

Draw CSS Shapes

 

Browser generated shapes. 

| refer-to

 

Resources

 

Pseudo Element Roundup : CSS Tricks

8. Transitions &

2d transforms

concepts

Transitions

 

 

2D Transforms

 

 

Resources

 

Transitions

TreeHouse: CSS Transforms

Shay Howe: CSS Transforms

CSS Tricks: Transitions

 

2D Transforms

TreeHouse: Transforms

Shay Howe: Transforms

 

transition
transition-property
transition-timing-function
transition-duration
transition-delay
transform: rotate() 
           scale() 
           skew() 
           translate()

Practice

Transitions

 

Basic (shorthand)

Multiple

Delay

Easing Functions

 

Resources

Custom Bezier generator

2D Transforms

 

rotate() 
scale() 
skew() 
translate()

steps 

 

Resources

Create CSS3 Generator

Application

Navigation

Use transitions or transforms to provide user feedback.

 

Background Image

Using background-position,  with image sprites.

Call Attention To

User, look here!

 

Easing Effects

 

Animated Menus

via CoDrops

Image Gallery Effects

Improve UI with transitions & transforms.

 

Multiple Hover Effects

Transition multiple elements on :hover.

 

9. Keyframe animation

concepts

Keyframe Animation

 

  • No JavaScript
  • Faster. Natively by browser.
  • Simply syntax.
  • More control. In-between start & end frames.

 

 

Resources

 

CSS Tricks: Keyframe

Shay Howe: Animations

TreeHouse: Animations

 

 

 

Syntax

 

 

 

.element {
  animation: name duration;
}

@keyframes name {
  0% {
    /* Animations */
  }
  100% {
    /* Animations */     
  }

}

Practice

Animation Properties





via Shay Howe

Application

Navigation

Small visual changes

to draw attention.

 

Advertisements

Accessible, cross platform,

& RWD ready ads. 

 

 

 

 

UI Callouts

Reuse and/or modify hard work

of recreating common UI.

 

Animated Menus

 

On Hover Animations

Check-INs

Collage

* PSD

* No Background showing

* Have Fun

Style Tile

Style Tile Template

Final website

Past Student Sites

Celeste Crosby

Wyatt Feaster

Ashley Jhavari

Jeremy Meltingtallow

Michelle Frantilla 

Submission

Borrow. Make Your Own.   Don't Steal.

 

Bio and Resume : You, your experience, & goals.   

Portfolio : Your body of work. Written, visual, or other media. 

Contact Form : Use FormSpree or TypeForm

 

 

content

 

Aesthetic & Design Foundations : Demonstrates principles of visual design. 

Web Typography : Application of  typography principles.  

Responsive Web Design : Designed for multiple screen sizes. Optionally use G-Grid System

design

 

HTML : Semantic use of HTML elements. 

CSS : Separation of content from presentation.

* Absolutely No JavaScript

GitHub : Version controlled & hosted at User.GitHub.io

code

final submission form

Web Typograpy

[ARCHIVE] DESN 368 : Web Design 1

By Manikoth

[ARCHIVE] DESN 368 : Web Design 1

Slides & Course Site for Web Design 1

  • 2,730

More from Manikoth