Philosophy
-
Purpose of Site
-
Design Strategy
Structure
-
User Centered Structure
-
Flow Diagram
Text
-
Headings
-
Links
-
Fonts
-
Style
Visual layout and elements
Philosophy
Purpose of the site
This site is designed to
provide information about my design projects. The site is broken into sub groups
based on themes or segements of time dealing with different topics.
Audience
Industry is the audience for this website, getting
grants etcÖ
The audience for this site varies
from the casual browser to friends and also to fellow designers. If you like
what you see then you are my audience.
Website for getting into grad school and getting a job,
build for industry
Design strategies
My strategy aims at making information
easy to find and easy to maintain.
Structure
Develop a user-centered structure for your site
Notes Card sorting technique
Indexing ñ card sorting
Labeling,
Create a flow diagram
flow diagram
List
the elements and links for each page of the diagram
Design hierarchies of
breadth rather than depth
users begin to lose their bearings within a hierarchical
structure once they go beyond the third level
Design the website with
simple navigation, home and sub sections on all pages also search feature on all
pages
Text
Create effective headings and place important
information first
Keep links separate from narrative text blocks
Design for default browser fonts
Make paragraph text flush left
1.
Header Text
Hex: FFFFFF
RGB: 255 255 255
Class: "HeaderText"
2. Headline Text
Hex: 965136
RGB: 150 081 054
Class: "HeadlineText"
3. Body Text
Hex: 000000
RGB: 000 000 000
Class: "text"
4. Comments
Text
Hex:
RGB:
Class: "comments"
5. Postits Text
Hex:
RGB:
Class: "Postits"
6. Link
Hex: 0063A4
RGB: 000 099 164
Class:
7. Subhead Text
Hex: 965136
RGB: 150 081 054
Class: "to be defined"
Visual
Layout and Elements
Establish design conventions
Maintain consistent visual identity
Present your message efficiently and avoid
clutter
Draw attention to new or greatly changed content
Use the top and left areas of the page for
navigation and identity
Media notes:
Use animations to attract attention
Create animations that enhance explanation
Use repetitive loops sparingly
Notes Graphics
Properties like jpgs, or bmps, size, colors
Animation loops
Stills
Movies
Table Template
Contain graphics, text or controls, Have properties like colors, line width,
1. Border
Hex: 4F556A
RGB: 079 085 106
2. Table Header
Hex:: 678088
RGB: 103 128 184
3. Information Window
Hex: D6D6C3
RGB: 214 214 195
4. Text Area Background
Hex: EEEEE0
RGB: 238 238 224*
Text display issues
Hyperlink issues
Grid layout templates including graphics colors
and text. Philosophy for each elements use.
Controls
Pull down menus etc
Can contain text, colors etc a kind of
container
HTML - Web Palette
(fixed color palette for web applications)
Colors
|
Color |
HEX |
RGB |
Usage |
|
|
#FDFDF3 |
253
253
243 |
Fill
color for editable fields, highlight line between tree level 1 & 2
|
|
|
#F5F4E7 |
245
244
231 |
Color
for the field label underlines, fill color for non-editable fields, first
fill color for non editable-fields in alternating color table display, tree
level 1, highlight line between tree level 2 & 3
|
|
|
#EEEEE0 |
238
238
224 |
Fill
color for text display content area |
|
|
#EBEAD8 |
235
234
216 |
Color
for Lists "COL_BACKGROUND" intensified off & intensified, fill color tree
level 2, second fill color for non editable fields in alternating color
table display, highlight line between tree level 3 & 4
|
|
|
#E2E1D0 |
226
225
208 |
Fill
color for tree level 3 |
|
|
#DEDEC8 |
222
222
200 |
Fill
color for tree level 4, fill color for primary tabs, fill color for the
application toolbar, fill color for the group box, fill color for trays |
|
|
#CDCDBE |
205
205
190 |
Fill
color for table column row and bottom navigation row of table, shadow line
between tree level 1 & 2, fill color for the status bar |
|
|
#C6C6B7 |
198
198
183 |
Fill
color for shadow line between tree level 2 & 3, Fill color for secondary tab |
|
|
#BEBEAB |
190
190
171 |
Fill
color for shadow line between tree level 3 & 4 |
|
|
#A0A092 |
160
160
146 |
Color
for icon shadows |
|
|
#999989 |
153
153
137 |
Color
for disabled text color |
|
|
#8D8D80 |
141
141
128 |
Color
for trays, and ALV outlines |
|
|
#55554B |
85
85
75 |
Color
for group box header text, table header text, ALV header text, non-editable
text, Lists "COL_BACKGROUND" inverse (text color) |
|
|
#658190 |
101
129
144 |
Color
for first shadow line on GUI background
|
|
|
#849CAB |
130
156
171 |
Color
for second shadow line on GUI background
|
|
|
#8FAABA |
143
170
186 |
Color
for third shadow line on GUI background |
|
|
#95B2C3 |
149
178
195 |
Color
for GUI Background |
|
|
#FF0000 |
255
0
0 |
Color
for Error Frames around fields |
|
|
#0000FF |
0
0
255 |
Color
for line to indicate clickable fields, color for Active HTML Links |
|
|
#FFCC33 |
255
204
51 |
Color
for selected rows & columns in tables and ALV's (only editable fields) |
|
|
#FF9900 |
255
153
0 |
Color
for spaces left in a field |
|
|
#C39E4B |
195
158
75 |
Color
for selected rows & columns in tables and ALV's (only non-editable fields) |
|
|
#003D84 |
0
61
132 |
Color
for the masking of field triangle |
|
|
#6780B8 |
103
128
184 |
Color
for the tray headers, groubox headers and table headers |
|
|
#4F556A |
79
85
106 |
Color
for the groubox and table border outlines |
|
|
#0063A4 |
0
99
164 |
Color
for HTML Links |
|
|
#455900 |
69
89
0 |
Color
for Visited HTML Links |
|
|
#0000FF |
0
0
255 |
Color
for activated HTML Links |
|
|
#97A1c9 |
|
Color
for non activated menu bar items |
|
|
#FFFFFF |
255
255
255 |
Color
for rollover on menu bar items and activated menu bar items |
|