Introducing Browser UI Components // Dec 27, 04:15 PM
In a recently published Django book, Adrian Holovaty and Jacob Kaplan-Moss describe how Django web framework came about
- Write a Web application from scratch.
- Write another Web application from scratch.
- Realize the application from step 1 shares much in common with the application from step 2.
- Refactor the code so that application 1 shares code with application 2.
- Repeat steps 2-4 several times.
- Realize you’ve invented a framework.
This pattern must resonate with any web developer and probably a many web designers as well. This was my particular case:
- Design a website mockup.
- Design another website mockup.
- Realize that I always need buttons, dropdowns, checkboxes, radio buttons, input boxes, and text areas regardless of the type of the site.
- Compile those standard UI components and make them easily accessible from a single Photoshop file rather than take a screen shot every time I need one (and spend time cleaning up transparent edges).
The file features 3 sets of components, respectively from browsers on Mac OS 10.4, Windows Vista, and Windows XP:
- Standard button (as rendered by
<input type="submit" />). Text in the button is a type layer in Photoshop which lets you easily edit it - Standard dropdown (as rendered by
<select><option>Value</option></select>). Text is also an editable type layer - Checked and plain radio buttons, and checked and plain checkboxes
- Standard text input field (as rendered by
<input type="text" />) - Horizontal and vertical scroll bars rendered by a box overflowing with content
- Text area
It’s worth pointing out that transparent pixels around the edges of elements are preserved. They will look sharp on any background they’re dropped on.
Download:
Components-1.0.psd.zip [98.22KB]
Notes: Mac button and dropdown use Lucida Grande, the UI font on Mac OS. Vista button and dropdown use Vista’s UI font, Segoe. XP controls use Tahoma. If you need to edit text in all three sets, you will need to have all three of those installed.
The file is licensed under Creative Commons Attribution Share-Alike license.
Comment
Commenting is closed for this article.
John Maeda, the next president of RISD Communist Monuments of Former Yugoslavia