Crash Course: Design for Startups. I recently stumbled across screenshots of old websites of mine and was hurled into a state of reminiscent shock. I knew they were bad, but wow they were outstandingly horrible (redeemed only by their microformats support! I kid, I kid). Several years and a few Georgia Tech design and HCI courses have passed since those atrocities graced the web but I archived them in a sort of reverse portfolio as a personal reminder of how much my design sensibilities have matured. Only in the last year have I begun feeling slightly more confident about my design quality and process.
I have yet to consider myself a real designer and there are quite a few things I would do differently with my most recent work on Notifo and Pic A Fight. But I've learned why my work nowadays is better than from years past. I have been brainstorming for the past few days about how to scope this article. What I can do is share what has worked for me. Subtle is key! You can imagine how horrible everything looked. Process. Design for Hackers: Why Monet Never Used Black, & Why You Shouldn’t Either. Monet’s paintings evoke a sense of energy and life, they leap off the canvas with color and contrast, but Monet somehow managed to avoid using the color black for nearly his entire painting career.
By avoiding black in your own designs, you can replicate some of this dynamism. Monet and Other Impressionists Explored Their Medium Even when creating dramatic shadows, Monet avoided black, and instead manipulated the powerful relationships between colors Monet, and other impressionists, experimented obsessively with their medium: paint, some brushes, and a canvas. So just as pixels prohibit the use of Garamond on the web, the characteristics of the impressionists tools shaped their work. In the course of this experimentation, impressionists had to experiment with color to create the desired effects. The Impressionists Became Masters of Color Because he experimented with the juxtaposing colors, the pointillism of Georges Seurat is similar to a dithered GIF image Tints Pop, Shades Recede. The UI Guide | Part 1: Buttons » Galpin Industries - Pixels Straight From Canada.
I should begin by explaining why I’m doing this guide in the first place. I believe that every designer has a right to know what many of us have learned via trial-and-error and word-of-mouth teachings. I’m quite aware that this is not the first UI guide that has ever been published, nor do I expect it to be the last. I do believe it might be one of the first to really attempt to explain the why in parallel with the how. Probably the most crucial thing to understand is that simply knowing how to make and style these elements does not make one a designer. I’ll be covering several different types of elements, and each post will be continually updated as I receive more suggestions for content and as I get more time to develop the article. General Photoshop Tips Global Light: Make sure your Global Light is set to 90 degrees, rather than the default 120 degrees.
Button Styles Glossy Ah yes, the old standby. Glossy with glow Textured If used correctly, this style can look really sharp. Simple Mr. Table of Contents. Articles about the App Store, design and Bjango. Method & Craft. Shadow performance. Update: I've added some comments about the -[CALayer shadowPath] approach that I missed before. I've just pushed a new sample to the OmniGroup? Source on github which shows several drop shadow approaches, with an eye towards performance, particularly while the shadow casting object's frame is being animated. One of these is a pair of functions vended by OmniUI, OUIViewAddShadowEdges?
() and OUIViewLayoutShadowEdges? (), which originate from writing our document picker. Opening up OmniGroup/Frameworks/OmniUI/iPad/Examples/DropShadowOptions? Animation Type Resize: The size of the object changes, possibly leading to it being redrawn. Animation Driver One-time change: Some one-time programatic change is being made to the object that has a starting and ending state. Shadow Options CoreGraphics, resampled: This renders the shadow into the view's content area with normal CoreGraphics calls. Performance I'll call out the one "Slowish" result; this timed at ~45fps on my iPad.
Conclusions.