HTML and CSS Reference
In-Depth Information
ChaPter 6
Designing the App
Because this is a book about development and not about design, this chapter will be short. It discusses a few design
considerations that are unique to web apps. In addition, we'll talk a bit about how to make sure that a design made in
Photoshop will translate well to the web.
■
This chapter assumes that you have access to Adobe Photoshop, are reasonably familiar with its interface,
and—perhaps most importantly—that you care about design. You will be able to create the same artwork in an
alternative program (such as GIMP), but the following steps won't match up properly.
Note
■
If you're a hard-core developer and are thinking about skipping this chapter, consider that besides walking
you through the app's design, it also offers some tips on tweaking Photoshop settings to make sure that the coded
design looks like what was laid out in Photoshop. If you work in a team and do any front-end work, it might save you
some headaches when your creative team wants to know why a font looks slightly different or other minor layout
inconsistencies.
Caution
Setting Goals for the Design
It's important for any design project to start with clearly defined goals. This helps to prevent the design from
wandering off-course or conflicting with the intentions of the app.
Because this design is for an app that needs to work both on standard web browsers and on handheld devices,
the goals for this design are the following:
•
To require as few images as absolutely necessary
•
To keep the design minimal and focused only on the required content
•
To use large user interface (UI) elements that make the app easy to use on touch screens
If the design adheres to just these three goals, it will be easy to transition from the desktop to mobile, simple to
use, and very easy to navigate.
Search WWH ::
Custom Search