![]() Spend a few hours trying to formulate my thoughts about how the first step affects layout.Keep a clear cut use case in mind throughout the redesign. If not, checkout the Five W's of UX: Who, What, Where, When, and Why. Since this is your startup this probably won't involve much research as you are likely already the domain expert and ideal customer of your product. Get in the mindset of the target audience.My typical site redesign process usually goes like this: There is an app in the Mac App Store called Galleried which is the desktop app equivalent of browsing many CSS galleries and helps too. Not a day goes by that I don't archive something nice I see online. I have amassed over 700 screenshots so far. LittleSnapper stays out of sight and saves the screenshots. I would pay 100 for it.Įasy to use with their browser bookmarklet. ![]() I wish someone would make a better competing product. I have been doing this for at least a year with the help of LittleSnapper. Whenever I see a website I like, or even just a particular element of a site, I take a screenshot and archive it. This is not a new concept by any means, but it bears repeating: keep the right side of your brain engaged by regularly seeking great website designs, reading about design, sketching site layouts (or anything really) and more. Can you still see the main headline or call to action well? No? Make it bigger! Get Inspired and Stay Thirsty My Friends Organized Here's a nice test: take a screenshot of your website or layout and make it 3 times smaller. ![]() If you are going to increase the font size of a particular element, don't increase it by 1 or 2 points. Then what do I mean about "except when it's not"? Take for example visual hierarchy - where to draw someone's eyes first with color, contrast and proportion. This usually means no blur on text-shadow and just a 1px offset, or only dealing with gradients moving between a very narrow color range. Now my rule of thumb in most cases is applying just enough to make it perceivable, no more. You can imagine how horrible everything looked. Text-shadow? Awesome, let's put 5px 5px 5px #444. When I was a wee pixel pusher I would overuse whatever graphic effect I had just learned. I won't get into how to do the technical side of things, because let's face it that's just a Google search away and you'll probably find a great article on Smashing Magazine showing you Sass, writing mixins, learning to put CSS3 vendor prefixes ahead of real properties and so on. What I can do is share what has worked for me. This is not a definitive guide, just a friendly pointer for startup folks getting into design. But most importantly, I'm still learning too. Third, there's a whole world of typography, color theory, gestalt laws, fitts' law, hick's law, visual hierarchy, UI patterns, layout mastery and copywriting that needs to be explored first hand. Second, there's a sharp distinction between graphic design and user experience that deserves its own article. For one, design can be very subjective (or just plain wrong at times). Unfortunately I don't think I can distill everything about design into this or any number of posts. I have been brainstorming for the past few days about how to scope this article. I am aiming to somehow share some of these thoughts brewing in my head with this post today. But I've learned why my work nowadays is better than from years past. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |