Design Practice: OUGD504: Studio Brief 3- Webpage Workshop

UI- User Interface

UX- User Experience, target audience, make the design relevant and usable for the appropriate audience

Limitations in web design-

Designing for the lowest common denominator, the worst quality screen

Web safe colours- 216 colours

(RGB mode capable of reproducing 16 million different colours instead of HEX's 216)

Wider range capable of production with CSS using percentages similar to photoshop and illustrator.

Web safe fonts- for consistently in display it must be a standard font. (fallback options- if a font family is chosen and a browser or system does not support the first font it tries the next one listed)- if the font is just one word it does not require speech mark e.g. Georgia, if it contains more than one word it requires speech marks e.g. "Palatino Linotype"

CSS font face- font face allows you to install fonts to a website meaning the font choice remains consistent regardless of the browser or system. (It can breach copyright and licensing of certain fonts- a free licence font must be used for font-face kits including font squirrel)

Size, dimension, pixel resolution- typical sizes, 640x480, 800x600, 1024x768, 1920x1080, 2880x1800 (220ppi). Current common denominator- 1024x768.

File formats- PNG, GIF, PDF, JPEG- average quality should be 72ppi, higher resolutions=more bandwidth. Lossy format- lossless, save the detail of previous image, compresses the file.

(Produce a scamp- quick sketch of a website/design- consider limitations in design and skills, consider target audience and what is needed from design. Measurements must be key and precise, fonts chosen and colours sorted- this will make the production process much easier)

Dreamweaver- WYSIWYG, what you see is what you get

Building the site:

New Document- HTML

Go to: Site

New site (site setup window)

Select local folder and name site

Split into three sections, design, code and split (shows both code and design)

Create new HTML and save

Save home page as: INDEX

Code Meaning

Line 1: Document type

Line 2: HTML webpage language- from this point on everything ail be in HTML (line 10 HTML stops, open and a close)

Line 3: Open of head- everything that affects the functionality of the webpage- but isn't visible in design of webpage.

Line 4: Blank

Line 5: Title of webpage, as seen on the tab- used for SEO (search engine optimisation)

Line 6: Close of head

Line 7: Blank
Line 8: Open body- anything visible on a webpage
Line 9: Close body
Line 10: Close HTML

Changing title name- asterix means not been saved.
Little world icon, preview webpage live.

Typing between body creates visible content.

Using CSS to create a style sheet- any style choices can be applied across all pages.

Using /* */ creates notes that can be left for future reference, will not be seen on final website only in code.