1 / 19

Essential Web Design Principles for Usability and Aesthetic Appeal

Discover the key elements of effective web design focusing on usability. Learn about the importance of page layout, typography, color selection, and image quality to enhance user experience. Usability evaluates ease of learning, efficiency, and subjective satisfaction. Structured page elements like headers, navigation, and footers improve content accessibility. Utilize CSS for typography and explore color theory with RGB codes for impactful visuals. Optimize images for faster load times to create a seamless browsing experience.

brynn-franklin
Télécharger la présentation

Essential Web Design Principles for Usability and Aesthetic Appeal

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design M. Jacie YangAssistant Professor School of Journalism & Mass Comm Texas State University- San Marcos

  2. The Goal of Web Design is Usability!

  3. Usability • Usability is the measure of the quality of a user's experience when interacting with a product or system. • You want your website to be: • Ease of learning • Efficiency of use • Memorability • Error Frequency • Subjective satisfaction Source: usability.gov

  4. Four Elements for Web Design • Page Layout & Structure • Fonts & Typography • Color • Images & Graphics

  5. 1. Page Layout & Structure

  6. Page Layout & Structure Source: http://pixelactic.com/

  7. Page Layout & Structure • Homepage dimension: • Your main content should show in the browser when people load the page. • That means: • Should be smaller than (most) users’ computer screen. • Should not scroll horizontally. • Not too long. • Example: 800px wide.

  8. Page Layout & Structure • What is on your page? • Header • Navigation system • Main content • Footer • You can use HTML5 tags to structure these elements: • <header></header> • <nav></nav> • <section></section> • <footer></footer>

  9. Page Layout & Structure

  10. 2. Fonts & Typography

  11. Fonts & Typography • We use fonts and typography on the Web to... • Make the content easy to read? • Make the Web pages look pretty? • We can tell the Web browser what specific font to use and what font family to use. • Example of CSS body {font-family: Arial, Helvetica, sans-serif;}

  12. Fonts & Typography • Font size • Measured in pixel or em • Font family • Serif • i.e. Times New Roman • Sans-Serif • i.e. Ariel

  13. 3. Colors

  14. Too Many Colors = No Color Repeat after me, please!

  15. Web Colors • RGB • R=Red • G=Green • B=Blue • We use a six-digit color code to specify RGB color. • White: #FFFFFF • Black: #000000 • The first two digits stand for RED; 3rd&4th digits stand for GREEN; 5th&6th digits stand for BLUE. • Each digit ranges from 0-F (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). • Thus, there are 256 possibilities for RED (16x16); 256 possible colors for GREEN; 256 possible colors for BLUE.

  16. Colors • Tints: adding white • Shades: adding black • Tones: adding gray Source: http://www.tigercolor.com

  17. Colors • Places that can help you pick colors that go well together: • http://kuler.adobe.com/ • http://www.colorblender.com/ • Check color contrast: • You want to check if there is enough contrast between two colors, especially when you have a color for your text and then a background color. • http://snook.ca/technical/colour_contrast/colour.html

  18. 4. Images & Graphics

  19. Images & Graphics • File size should be small • Usually no bigger than 100 kb. • If it is a graphic with limited color or a small logo, file size is usually around 20 kb. • Use appropriate file format • For photos (true colors), use jpeg or jpg. • For graphics, use gif or png. • Optimize your images in Photoshop BEFORE putting it into Dreamweaver!!

More Related