org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-7962116F-3FDB-4960-B1C9-6367451554FD.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="Designing simple pages"/><meta name="abstract" content="Some of the key elements of visual design are color, contrast, and typography. When you design for mobile devices, keep in mind that the features, restrictions, and challenges of small screens require a visually minimalist design. Efficient visual design for devices goes hand in hand with interaction design, using animations and transitions to guide the user through the interaction flows. In addition to enhancing usability, strong visual design enforces the brand and makes the overall design stand out from the competition."/><meta name="description" content="Some of the key elements of visual design are color, contrast, and typography. When you design for mobile devices, keep in mind that the features, restrictions, and challenges of small screens require a visually minimalist design. Efficient visual design for devices goes hand in hand with interaction design, using animations and transitions to guide the user through the interaction flows. In addition to enhancing usability, strong visual design enforces the brand and makes the overall design stand out from the competition."/><meta name="DC.Relation" scheme="URI" content="GUID-D82B43D9-37B4-482A-87C0-FFCF534C712C"/><meta name="DC.Relation" scheme="URI" content="GUID-B2976236-0DC6-4CBB-B2FA-B1A6E6639A1D"/><meta name="DC.Relation" scheme="URI" content="GUID-D54DEFE7-E878-4530-B707-A5388DFE1D9D"/><meta name="DC.Relation" scheme="URI" content="GUID-5949FE0C-207D-4B15-8C03-96AE48986973"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-7962116F-3FDB-4960-B1C9-6367451554FD"/><meta name="DC.Language" content="en"/><title>Designing simple pages </title><script type="text/javascript">
function initPage() {}
</script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-7962116F-3FDB-4960-B1C9-6367451554FD">Designing simple pages</h1><div><p>Some of the key elements of visual design are color, contrast, and typography. When you design for mobile devices, keep in mind that the features, restrictions, and challenges of small screens require a visually minimalist design. Efficient visual design for devices goes hand in hand with interaction design, using animations and transitions to guide the user through the interaction flows. In addition to enhancing usability, strong visual design enforces the brand and makes the overall design stand out from the competition. </p>
<div><h3>Learning about visual design principles</h3><div class="p">To make views look good on the small display of a mobile device, you need a good understanding of using the following elements and rendering pages on small platforms:<ul>
<li><p><a href="http://library.forum.nokia.com/topic/Design_and_User_Experience_Library/GUID-72441545-329B-4F4C-A2E6-8CDCE47AEDCA.html" target="_blank">Color</a></p></li>
<li><p><a href="http://library.forum.nokia.com/topic/Design_and_User_Experience_Library/GUID-F0B51FB7-E3FA-4C3C-875B-CA4DC3782CED.html" target="_blank">Contrast</a></p></li>
<li><p><a href="http://library.forum.nokia.com/topic/Design_and_User_Experience_Library/GUID-DB23FDD0-BAB8-4EDA-9C21-41B6BB546103.html" target="_blank">Fonts and text</a></p></li>
<li><p><a href="http://library.forum.nokia.com/topic/Design_and_User_Experience_Library/GUID-A356C72F-DC77-481F-AE0E-C3EBEDAF993C.html" target="_blank">Animation</a></p></li>
</ul></div><p>Keep the design simple and maintain visual clarity. For guidelines and examples, see <a href="http://library.forum.nokia.com/topic/Design_and_User_Experience_Library/GUID-CB5D4F7A-CA69-49E6-839D-2F7E30641498.html" target="_blank">Visual and graphic design</a>.</p></div>
<div><h3>Rendering pages</h3><p>You can use cascading style sheet (CSS) to render pages for mobile devices. A CSS contains specifications for standard elements that you can use in views, such as: headings, tables, lists, forms, radio buttons, and check boxes. For more information, see <a href="GUID-3DA126B3-12E2-44C8-A009-8D25E7B3F7E6.html#GUID-3DA126B3-12E2-44C8-A009-8D25E7B3F7E6">Customizing style sheets for S60 devices</a>.</p></div>
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>