Designing For A Lightbox
The 37 Signals Blog, Signal vs. Noise, has a post about a month ago with an interesting observation:
“Designing for the iPhone is like a hybrid of print and web design.”
Their point was with the iPhone, you know the exact size of the screen, you know the exact browser, you know how fonts will look in that browser, you know what the screen is like and all the capabilities. That is so very different from web design, which is rife with uncertainties. In fact, much of web design is coding your way around uncertainties and playing to lowest common denominators.
The big one is resolution, knowing the exact size of what you are designing for. When else do you know that juicy bit of information? When you are designing for a Lightbox. You know, one of those fancy little bits of CSS and Javascript that grey out your whole page except a smaller box that often displays a photo or login screen or other important information. Kind of like a non-pop-up pop-up. Many lightboxs, like this one, use a fixed width and height.
You can take those dimensions and use them to your full advantage. Such as:
- Design a cool grungy border (don’t have to worry about expandability!)
- Browse around stock.xchng and find a cool background image
- Design images for the corners and not worry about fancy coding to get them in the right place
- Open a new Adobe Photoshop document with those dimensions and start designing free of any thoughts of constraint
Loading ...