English 中文(简体)
How do you normally make a program look beautiful? [closed]
原标题:
  • 时间:2009-11-10 21:28:33
  •  标签:
  • layout
  • wiki

How can I make an Application look nice and not like an amateur pulled it together?

I mean graphic-wise.

Is there some sort of book you can read regarding beautiful program layouts, etc?

I put this in Community Wiki so please feel free to leave your opinions that way we can all learn. :D

Edit: Oh my god. I completely forgot to mention what kind of program. I mean desktop applications. Not web applications. :D

最佳回答

Find a graphic designer.

I m not trying to be snarky, I m just sayin . I fancy myself a pretty good developer, but I am at stick-figure level when it comes to graphic design.

The skills (and the tools) for good graphic design are fundamentally different than the skills of a developer.

问题回答

Three things:

  1. Hire a designers that knows the business models and customers; unless you are good at it yourself

  2. To help you provide meaningful feedback to the designer, read a book like I like Don t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug

  3. Study many good Apps that have had success in the business of interest to you. Be inspired (aka copy) good ideas from them and mix in your own ideas. A prime example is how Google search "inspired" Microsoft s Bing

The following terms are really important when it comes to the look and feel of an application

User Interface Design This talks about how the application has uniform soft colors, similarly sized controls, smooth fonts, appropriate groupings of data elements, etc.

User Experience This is a much more difficult thing to attain. This is how intuitive the application is "Are you sure?" and "Are you Really sure?" message boxes, doing away with pop-up s and dialog boxes, auto-save, the flow from one stage to another, accuracy of data saves, and a host of other things that make the user experience truly amazing.

You cannot have good UX without good UI, but it is definitely possible to have a good UI without a good UX.

Just keep redoing it. Seriously, take all outside criticism. Ask them to be specific. If you re doing web work look at as many websites as you can. Sometimes, depending on the creator, you can email the website to ask why they did what they did and get a response. If you re doing desktop find a library you enjoy that can look good (not Swing, hate me if you want.) Then create, destroy, create, destroy, and so on until you re happy.

The biggest issue I think people have is learning to just throw away a component which isn t working for you.

I have found that going through the various desktop design guides can be pretty useful.

  1. Windows User Experience Interaction Guidelines
  2. Apple Human Interface Guidelines
  3. Gnome Human Interface Guides

I don t think any of them can be considered as being "correct", but they will give you a good baseline idea as to what is expected in general as far as basic theory such as alignment, spacing and widget layout goes.

I recommend reading the AskTog site:

Bruce Tognazzini... ...founded the Apple Human Interface Group and acted as Apple s Human Interface Evangelist.

There s been some great stuff in the past, like how making buttons bigger is directly proportionate to their likelihood of being clicked, how mouse movement impacted design, etc.

But if you re not into learning - by all means, find a professional designer.

For Looks: Follow you platform s Human Interface Guidelines. Use the Golden Mean to please the eye. Simplify, Simplify, Simplify.

For Behavior: Watch the users use your application. Don t help them, don t correct them. Stand behind a two-way mirror if you can. You ll quickly find lots of places where your UI could use a tune-up.

I do try very hard to convince my users of the beauty of a command line interface.

Besides that, I think there is nothing better than "hallway testing". You can always hire an expert for GUI design though.

I really like the book Designing Interfaces. It presents many UI design patterns and when they are appropriate to use. It won t teach you how to make things "pretty", but it can help greatly in making your application intuitive and easy for a user to grasp. It also presents the patterns in a platform agnostic way.

There s lots of books out there are graphic design, interface design, web application design, css design, etc.

General rules:

  • think in terms of grids
  • don t fear white space
  • keep it simple
  • understand hierarchy
  • understand basic color theory
  • hire a user interface designer

Keep your coding work out of the design work, and do your mockups in photoshop or something similar before trying to implement them. Good coding and good visual UI design can be directly opposed to each other very often - what looks good on the outside takes some backend work that that most coders think is monstrous, and good UIs often require custom behavior where using standardized libraries might seem to make more sense from an engineering perspective. Having a target for the functional UI will help you to push yourself beyond the "good enough" results you might get if you let what your libraries do by default determine what the site or application will look like.

First of all, usability should always be priority #1 and should drive your design:

However, that doesn t mean your application has to be ugly. And I disagree with those who say "you either have it or you don t." I think almost anyone can develop basic design skills if they put their mind to it. The very fact that you re asking about it proves that you re interested, which is a big step towards learning. And indeed even as a developer it helps to at least have a good sense for what looks good and how to make an engaging user interface. And if it s important you can always hire a professional designer later to take it to the next level.

There are a few fundamental details to design work that have helped me:

1.) Use colors wisely. Dull colors are not bad but they can make the design look boring and uninspired by themselves. If you add exciting, more saturated colors sparingly you can emphasize the more important elements. This will not only improve the look, but it can even be used to improve the usability by bringing attention to elements that you don t want your users to miss. Again, if you overdo this it s kind of like highlighting everything in your physics book. If you do it everywhere, it loses its meaning. I wrote more about colors and contrast in my answer here.

2.) Use white space wisely. This is huge. It doesn t matter if you re talking about a website or a Windows app -- a cluttered application is an ugly one. There is a good article about this relating to web design, but the same basic rules would apply to a desktop app.

3.) Fear not the big fonts. Another means for providing emphasis -- the big font. When combined with proper whitespace, a call-to-action written in great big words can be a powerful thing visually.

Come to think of it, all of these suggestions relate to creating emphasis.

There are a lot of sites that offer tips on Graphical User Interface (GUI) design. Google for "GUI design guidelines" and you ll find some. While these tips might not make your application look beautiful they can make it look professionally designed. If you want beautiful graphics you might need to get some help from a graphic artist.

Check here for a good list of books on GUI design.

I really like this book, from Joel Spolsky: [http://www.amazon.com/o/ASIN/B001O9LB86/ref=nosim/betteraddons-20]

General guidelines we use:

  1. Make getting around easy: use a toolbar or side menu to access different parts of the application.
  2. Make viewing information as easy as possible, and in different formats.
  3. Make changing information as consistent as possible. I.e., put New, Edit, and Save buttons in the same place.
  4. Make the most common action the easiest.

Specific guidelines we use:

  1. Use the same or similar font across the application. Vary by size or bold to catch attention.
  2. Use color backgrounds to group and separate types of information.
  3. Put the most relevant information together and make the most commonly used button larger than the rest.
  4. Don t use a drop-down control where there are only only a few options. Use a list control big enough that one doesn t have to scroll or use a radio-button.
  5. Adding some white space can actually make it easier to read the screen or report.

Has anyone got any tips for the programmer who has no budget, or is working on a project at home for fun? We can t hire a designer, but we d like to make a bit of an effort to get our applications looking less home-built.

I suggest showing a screenshot of your creation to family and friends. You ll hate their suggestions because they will differ from yours, of course. But it can help.

Research apps that are similar, AND some that are not, then pinch one small idea from each one!

Hire an expert. Design is something you either have or you don t. It sounds like you (just like me) are in the "don t" category :)

It ll give you an idea of where my head is at that my answer to "How do you normally make a program look beautiful?" starts with:

  • Short methods
  • Appropriate whitespace
  • Consistent naming conventions
  • Consistent formatting conventions

It s probably not a good idea to ask me what I think makes for a good UI.





相关问题
Very basic WPF layout question

How do I get this listbox to be maxiumum size, i.e. fill the group box its in. I ve tried width="auto" Height="auto", width="stretch" Height="stretch" annoyingly at the moment, it dynamicly sizes to ...

How to align the text to top of TextView?

How to align the text to top of a TextView? Equivalent Android API for Swings setInsets()? that is top of text should start be in (0,0) of TextView <?xml version="1.0" encoding="utf-8"?> <...

Centring a flow in Shoes

Can I center the contents of a flow in Shoes? I know that a paragraph can be centred like: para Centred paragrpah , :align=> center However, this does not work with flows: flow(:align=> ...

Overlaying with CSS

I want to load a website in an iframe, and overlay the website with some hints about the website that is shown. However, i got stuck at the point that the website has a variable passive white space at ...

How do you normally make a program look beautiful? [closed]

How can I make an Application look nice and not like an amateur pulled it together? I mean graphic-wise. Is there some sort of book you can read regarding beautiful program layouts, etc? I put this ...

热门标签