分類彙整: Design

Agile Programming

Adopt from

[1] http://www.codeproject.com/KB/architecture/agileprogramming.aspx 


Agile Programming is proposed to make your code in your project easy/simple to develop.

Refer to the post from code project[1], There are 6 core rules

  • Simple Design: use the simplest design that solves your immediate needs
  • Design as you go: Always scrub and exercise the code you work on while the project develops, to make sure it remains well structured, designed and written. (Techniques for this are called Refactoring)
  • Incremental steps: When changing or adding code, take the smallest step you can, then compile and test again.
  • Independent steps: Don't mix up the things you do - when you fix a bug, fix the bug, when you add a feature, add the feature.
  • Know and use your tools with purpose: Especially for tasks beyond writing code - like design and documentation, know the available tools, use those that help you (not just a single one), and always understand why you do what you do.
  • The Meta Rule: Use only the principles and techniques that actually work for you.

Expression Blend: 3 types of graphical changes

Learn from

.toolbox.school.scenarios

photos | level 1
Author: Archetype | Trainer: Jeremy Osborn, Avlade

Discover how to use SketchFlow to create interactive prototypes. Learn how to apply behaviors and animation

http://www.microsoft.com/design/toolbox/school/modules.aspx?lid=1&mid=1


NB: Most of things can be found using right click.

Create animations in the states panel

From Lesson 4

Go to States tab and create your own states

Use ActivateState feature to add interactivity

 

Use behaviors (on a component)

From Lesson 5

In Assets tab, find Behaviors –> ChangePropertyAction

Drag to your object, (the trigger)

Set in Properties tab

Change the PropertyName then Value of the Target element

 

Use SketchFlow Animation

From Lesson 5

Use the SketchFlow Animation tab above

Click the + signs and see what’s happen

After creating the animation, right click the Trigger element and select the animation.

Under Trigger element in Objects and Timeline tab, you wil find the event that trigger the animation.

Web Design: Color Schemes

Adopt from

The Principles of Beautiful Web Design, written by Jason Beaird, published by Sitepoint

http://designhomeinterior101.com/step3.html


Monochromatic Color Scheme

Consists of a single base color and any number of tints or shades of the color

From: http://www.rcs.k12.va.us/art/lessons/richards01a.jpg

Analogous Color Scheme

Consists of colors that are adjacent to one another on the color wheel.

From: http://designhomeinterior101.com/assets/Analogous-Color-Wheel.gif

Complementary Color Scheme

Consists of colors that are located opposite each other on the color wheel.

From: http://z.about.com/d/budgetdecorating/1/5/t/-/-/-/complimentary-2.jpg

Split Complementary Color Scheme

Use the two colors adjacent to your base color’s complement

From: http://0.tqn.com/d/budgetdecorating/1/5/s/-/-/-/splitcomplimentary.jpg

Triadic Color Scheme

Push our split-complements out one more notch on each side, so that all the colors are equally spaced.

From: http://www.beadworks.com/tools/images_pf/triad_red_orange.jpg

Tetradic Color Scheme

Combined with another complementary color scheme.

From: http://www.archiq.net/images/stories/Image/design/color/04.N03.H01%20-%20tetradic.jpg

Web Design: Layout and Composition – Part 2

Adopt from

The Principles of Beautiful Web Design, written by Jason Beaird, published by Sitepoint


Emphasis

Making a particular element draw the viewer’s attention.

One method of achieving such emphasis is by making that element into focal point.

Placement

Direct center of a composition is the point at which users look first.

Continuance

When out eyes start moving in one direction, they tend to continue along that path until a more dominant feature comes along. Using an arrow is using the idea of continuance.

Isolation

An item that stands out from its surroundings will tend to demand attention.

Contrast

Defined as the juxtaposition of dissimilar graphic elements, and is the most common method used to create emphasis in a layout. For example, difference created between graphic element and its surrounding.

Proportion

A principle of design that has to do with differences in the scale of objects.

Bread-and-butter Layouts

  • Left-column Navigation
  • Right-column Navigation
  • Three-colun Navigation

Web Design : Layout and Composition - Part 1

Adopt from

The Principles of Beautiful Web Design, written by Jason Beaird, published by Sitepoint


Defining Good Design

Usability Standpoint– effective presentation of information, and efficiency

Aesthetic Perspective – Presentation, hot animations and graphics.

Kind in mind that design is about communication.

Web Page Anatomy

  • Containing block
  • Logo
  • Navigation
  • Content
  • Whitespace

The Rule of Thirds

Image from http://www.flickr.com/photos/davegray/2370922423/

Balance

Equal weight on either side of a layout.

Symmetrical Balance occurs when the elements of a composition are the same on either side of an axis line. (bilaterally or radially)

Asymmetrical Balance involves objects of differing size, shape, tone, or placement. These objects are arranged so that they equalize the weight of the page. This kind of balance is versatile.

Unity

The way in which the different elements of a composition interact with one another.

Proximity - Placing objects close together within a layout creates a focal point toward which the eye will gravitate.

Repetition - Repetition of colors, shpaes, textures, or similar objects helps to tie a web pae design together so that it feels like a cohesive unit.