TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

ASK HN:Good web design?

10 pointsby mx2323about 15 years ago
hi everyone.<p>does anyone have tips for a software engineer on how to do good UI web design?<p>It's not as simple as it appears, I know, and doing stuff like drop-shadows. matching colors. layouts. having a toolkit of UI tools like different brushes, gradients, etc.<p>basically, resources on ui design for the software engineer would be very helpful...<p>where do i about learning about professional front end web ui design?<p>it appears that having a nice accessible website... from the colors, to the round corners, to the general look &#38; feel... can make or break a web site.

4 comments

vitovitoabout 15 years ago
Practice.<p>If a designer asked you for good tips on how to program, you'd say it's not simple, recommend some books, and tell them to just start writing programs, and reading programs, and writing programs in other programs' style, etc.<p>So it is with design.<p>I favor traditional design (as in art) texts, because many people who consider themselves designers today don't have any training; they just know how to manipulate Photoshop. It's the design equivalent of cut-and-paste programmers.<p>Look at the reading list of a design class from your local community college. You'll find introductory texts new and old, like "Design Basics, 7th ed." and "The Art of Color and Design (1951)," but they'll all cover the same things: line, direction, shape, size, texture, value, color, repetition, alternation, harmony, gradation, contrast, dominance, unity, balance, proportion. Take the class and you'll do exercises that let you practice each one.<p>Learn layout and composition. There are community college classes for that, too. I have "Editing by Design," a newspaper layout guide, and other newspaper layout books on my Amazon Wishlist. Lay out text and design elements on paper. Cartography is also good: it's information design and layout and presentation and art all together.<p>Learn copywriting. Writing is design: the right word can explain a concept better than a big, shiny icon ever could.<p>Good web design is good design first, with accommodations made for low-resolution text, small viewports, backlighting, scrolling and pointers. Just as with programming, you can't learn it just by reading about it: you have to practice it.<p>If you're in Austin, TX, come out to a design workshop. I hold them every other week and we practice various elements of design (using the term broadly): <a href="http://vi.to/workshop/" rel="nofollow">http://vi.to/workshop/</a><p>If you're not, maybe there's something similar in your area.<p>Finally, I've recently come to believe that you're not a modern interaction or user experience designer unless you're testing your work. As a programmer, you might understand this better than traditional designers. UX designers aren't making art; it's not subjective. Once you get past color and composition and layout and into interaction, there are objective purposes in what we do, and we can create testable hypotheses around our craft and see the results and tweak it. A/B test your interactions. A/B test your colors. A/B test your layouts.
mdolonabout 15 years ago
The best advice I can give for someone wanting to learn good web design is get a feel for the aesthetics first - visit CSS and design galleries (cssremix.com, cssdrive.com, unmatchedstyle.com, drawar.com, etc.) and look through designs noting trends, styles and layouts. These designs are showcased because they are aesthetically pleasing, which in turn effects the presentation of your product.<p>Then start visiting tutorial and resource sites (smashingmagazine.com, tutsplus.com, etc.) and learn as much as you can on techniques and even more on current trends. After you do that it's a matter of imitating bits and pieces of proven designs and following trends. Steal until you are capable and skilled, then unleash your creativity for your final product.<p>Hope that makes sense.
评论 #1290396 未加载
评论 #1290287 未加载
bwh2about 15 years ago
Many software engineers make the mistake of treating UI design like configuration - the more configurations options, the better. Do not fall into this trap. The mark of good design is not when there's nothing left to add, but when there's nothing left to remove. Turn every configuration option into a sensible default value.<p>Some designers think good UI design is about polish. This is where Smashing Mag, PSD Tuts, CSS galleries, etc. come in. But often, that's putting lipstick on a pig. I bring this up because you mentioned drop shadows, rounded corners, gradients, etc.<p>I like to recommend Don't Make Me Think! and Jakob Nielsen's Alertbox articles (useit.com). Research things like the golden ratio, grid layouts, principal of least astonishment, etc. Those will really help understand the low level considerations that go into good UI design.<p>One thing I've learned to appreciate is that at a low level, good design isn't very brand or time specific. It's timeless. At a high level, it's very specific to the brand and current trends. The HN high level design (color, brushes, gradients, somewhat typography) wouldn't work for most companies, but the low level design would work. Too many people get caught up on the high level details (the "web 2.0" look), and fail to see much deeper and more important low level design flaws.
msencenbabout 15 years ago
Previous comments are correct in that interaction design/ design is a very deep field. There are some general ideas (Fitts's Law is a very basic one), however I would like to point out that really the user dictates good design.<p>Do A/B testing, as well as physical user tests. Two types of user tests I find most helpful are the following:<p>1) Let the user use your website/product but don't necessarily give advice unless he/she is really struggling. Afterwards you can interview them and ask questions such as trouble spots and/or anything confusing.<p>2) Have a user "think aloud". This is one of my favorite because it allows you to more easily see what is going on in a users head (although its a far from perfect technique). The general idea is to have the user say aloud everything that pops into their head. Anything from "How do I find that link?" to "I liked that feature".<p>While I don't suggest you do backflips for your users I am also of the opinion that good design can't be done totally behind a desk. You have to get out there and talk to your users!