Designing simple pages
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.
Learning about visual design principles
Keep the design simple and maintain visual clarity. For guidelines and examples, see Visual and graphic design.
Performing one task in a view
One of the common mistakes when designing for a small screen is trying to fit too many components or too much information in one view. The key to success is prioritization: focus on the essential. However, base your decisions on information, not guesswork. For more information about how to study your users and their tasks, see Designing for a specific audience.
To keep pages simple, plan to perform one task in a view. For example, a main view could contain a screen title, a graphic, and buttons for performing the main functions of the widget. If possible, display the content on the main screen.
Figure: Example of a view
Note: Reserve space for softkeys at the bottom of the screen.
The widget package can only contain one HTML file. Use the div tag within the HTML file to create widget views. For more information, see Creating the widget HTML file.
For more information about page design, see Ensure visual balance and clear focus indication.
Rendering pages
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 Customizing style sheets for S60 devices.