Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I have been told, and have found for myself, that lots of developers are not good at UI design (I don't know how true is this) but it is true about me at least.

In web development good code development skills are not enough without great skills in UI design to go with them.

So for me, and many developers like me, that only have half of the thing (good development skills) how should we complete our other half other than paying for a designer?

Is using Open Source web templates with little modifications the best solution for this, or are there other options?

share|improve this question

put on hold as too broad by gnat, MichaelT, Bart van Ingen Schenau, GlenH7, Dan Pichelman Dec 23 at 17:32

There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs.If this question can be reworded to fit the rules in the help center, please edit the question.

12  
"As a UX person with poor development skills, how should I develop a site, without paying a developer?" –  Steve Evers Sep 26 '11 at 12:07
    
You should see what I'm working on now- UI disaster. I don't think anyone working on the project has ever looked at UI design guides. Same goes for my previous project, only on that one I did force the issue and get at graphic designer involved, but there were some parts of the code that was out of my control that were truly awful. –  Skizz Sep 26 '11 at 14:02
7  
Hire a designer. It's the only way to be sure. –  SF. Sep 26 '11 at 14:12
1  
This question is problematic. You might just as well talk about overcoming the general lack of programming skill in designers. –  Alex Feinman Sep 26 '11 at 20:13

14 Answers 14

up vote 11 down vote accepted

I am a developer who is also not so great at design. I try to my hardest, when working on a project where I must do designing, to keep things as simple as possible. I take a very logical approach and design only for user experience. I cant make it look truly beautiful, but I can make it user friendly and relatively pleasing to the eye.

I have read several of these books: http://www.uxbydesign.org/2009/06/24/20-user-experience-books-you-should-own/ and they have really helped me out.

edit my favourite on that list is Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug

share|improve this answer
    
I don't know why developers feel like they must be everything for everybody all the time. I am already a developer, designer, architect, business analyst, production support and QA. Its still not enough and I have to be a DBA now too. –  maple_shaft Sep 26 '11 at 11:12
3  
Well as a freelancer you either need to have all the skills yourself, or be forced to outsource parts of a project. If you are entirely unable to do something, then too bad you need to find someone else. But if you can learn the skills then why not, and make yourself able to earn more and become a more attractive developer from a potential clients perspective. –  Sydenam Sep 26 '11 at 12:21
2  
I know and agree with you, I am just getting disgusted with what the industry is becoming. I am surrounded by people who hate their job and are overworked, and have a stupid idea that they hope will be the next Angry Birds and they ask me if they can pay one Indian $6/per hour to do ALL OF THE WORK and just open source for everything without contributing because open source after all is FREE. Then they hope to make millions and quit their job. These holders of bad ideas expect more and more and then more still for almost no money. It just makes me sick. –  maple_shaft Sep 26 '11 at 12:47

Design (of anything) is a negotiation between the needs of the various stakeholders (customer, developer, users). None of the stakeholders are usually in a good position to create the best design because they tend to understand their own needs best and put them above the needs of the other stakeholders. A good designer can identify the needs of the various stakeholders -- often needs that the stakeholder himself doesn't realize he has -- and come up with a solution that works for everybody.

You've probably seen this yourself many times. Users think about how they have to interact with a system, usually in terms of some other system that they're already familiar with. Developers think mostly in terms of how the system works. Customers usually want something that will solve all their problems, or else they want to solve some very specific problem for the least cost.

To become a good designer, you have to learn to stop thinking ahead to how you'll implement something. Instead, you must focus on what the other stakeholders are telling you about what they need and want, and you have to be able to read between the lines. Like developers, customers and users often have some preconceived solution in mind, and they tend to describe that solution instead of the underlying requirements. (That said, it's important to realize that sometimes a customer means what they say when they tell you exactly what they want; if you're not sure, ask.)

More superficially, the aesthetic design of a UI is also something that some developers have trouble with. I think that's partly because software developers often don't have much training in aesthetics -- CS students may not have much time for art classes. It's also partly again because we're more interested in how something works than we are in what it looks like; we just don't care if a button's corners have a 9-pixel radius or a 10-pixel radius. These two factors are surely related. Sometimes you can overcome this by relying on canned solutions in the form of UI frameworks, and using pre-designed components has the advantage of unifying your own work visually with other applications on the same system. You can improve your aesthetic skills by reading, looking at other people's work, and paying close attention to the visual details that you might have ignored in the past. You should also try to understand the logic behind visual differences: Do square-cornered buttons mean something different from rounded buttons? How is color used? etc.

share|improve this answer
1  
thanks for the gr8 answer is there any resources , books , sites talk about this topic : " logic behind visual differences: Do square-cornered buttons mean something different from rounded buttons? How is color used? etc." –  Ali Sep 26 '11 at 10:48
    
On a side note and purely out of curiosity, do square-cornered buttons mean something different from rounded buttons? Has this been addressed on the UX SE I wonder? –  Sean Hanley Sep 26 '11 at 14:26
    
Color and rounded buttons are a graphics concern and really have nothing to do with UX. A better question for UX would be "what does our user think of our site with x color scheme vs y color scheme" and the placement of said buttons. –  Nic Sep 26 '11 at 14:52
    
@Yadyn, that depends on context. Button geometry can give the user a clue to function and behavior: square cornered buttons form attractive groups and often work well for selecting options or modes. Rounded buttons don't stack so well and often indicate distinct operations. But these kinds of visual cues only carry meaning if they're used consistently within an application or (better) across an entire GUI. –  Caleb Sep 26 '11 at 15:28
    
@melee, I'm coming at this from an application development standpoint. There tends to be a lot more variety in interfaces on the web, and I agree that it's harder to make this case in that context. But if you took a typical desktop application on the Mac and said "Blue buttons look great -- let's make all the buttons blue!" you'd create a lot of confusion for users because users attach meaning to the color and form of a button. Examples here (Apple HIG): tinyurl.com/6agv54v –  Caleb Sep 26 '11 at 15:32

Here are some things that I find help me:

  • Take note of what you like/don't like in other software. We're programmers, we spend a large portion of our lives at the computer. Try and take note of what you love/hate when using software. Doesn't matter if it's computer software, video games, mobile devices, etc just try and keep your eye out for what is convenient and easy to use, and what is not.

  • Find an easy-to-use sketching tool for sketching out the UI for you and your users. I love using Balsamiq since it is fast, simple, and the web version is free to use.

  • Remember that you don't need to find someone that specializes in software design to help you design something - any user will do. I often run my sketches by some people who are totally unrelated to the project just because I know they're around software all day and can tell me if something looks OK or is user-friendly. Just keep in mind that they will often give you crazy ideas about what to do, and you have to know what would be simply "cool" to do, and what would actually improve productivity.

  • Feel free to ask on http://ux.stackexchange.com/ for detailed questions

share|improve this answer
1  
Good advice, good tool –  Emmad Kareem Sep 26 '11 at 18:03

To be honest, UI designing is all together a different thing. A developer always thinks of a subtle design and isn't too creative when it comes to designing. The definite approach i feel is to keep a different developer for UI design. Though it adds to the cost but will definitely help you reach better results.

For someone who does both things himself, never really gives the best result. So, IMHO these two different aspects should be assigned to two different developers. A little knowledge of HTML and CSS for skinning and theme development is recommended in case of different CMS, but when you need to develop an entirely new design, consult a UI designer.

share|improve this answer

enter image description here

I can definitely recommend Joel Spolsky's book User Interface Design for Programmers. In this book he pretty much takes the approach that you are looking for: Explaining why UI design matters to programmers. For some online-related material:

Designing for People Who Have Better Things To Do With Their Lives

share|improve this answer

UI design is not something that comes natural to many people. However, I have recently become much better at it by following a few easy principles.

  1. Don't freak out, it isn't as hard as you think.

  2. Model the data structure and your engine first. Create clear and real-world-corresponding models. Obviously this assumes that you have taken the time to understand what the customer needs.

  3. Now, with a sheet of paper and a pencil, sit down and start drawing the logical layout of screens. This normally simply presents your data model to the user in an organized fashion. Your goal should be simply:

    a. Mimic the environment of where the app will be deployed. For example, if it is a windows app, it needs to behave like a windows app, if it is a web app, it needs to behave like similar web applications that are more popular than yours.

    b. Your goal is to guide the user through your data model in a way that THEY would predict. A user interface is well designed when a user does something in your application and it does exactly what they expected it to do.

    c. This takes time and it is a learning curve, but anyone can do it.

  4. Don't worry about the graphics, i.e. the buttons, the backgrounds, etc... your only goal at this point is the logical layout of the page.

  5. You do need to master the gui lib that you're using whether it is html, gtk, cocoa, android, Windows.Forms and so on to the extent that you understand the event handling mechanisms, the layout engine, and retrieving input and displaying data. Any developer should be able to do at least this.

  6. There is no shame in getting a graphic designer to take over from here. But you should at least be able to get past step 5. This is 95% of the workload for the entire app.

Here is a helpful article that turned me from a poor gui designer to a much better gui designer.

http://www.joelonsoftware.com/uibook/fog0000000249.html

share|improve this answer
    
Good advice, but I don't agree with point 2. I also would involve the user in the above steps more. –  Emmad Kareem Sep 26 '11 at 18:05
1  
@Emmad If you think of your application as a series of operations being performed on data, the only purpose of the UI is to provide an organized way of receiving input to the data model and displaying the data model. The reason I put 2 in there is because I find that after modeling the data, the UI sort of just falls into place. I do extensive interviews with the end user with regards to what sort of data do they want to do what with? That is the application. I then put the stuff on the page and then ask, now how do you want this to look? It has never done me wrong. –  Jonathan Henson Sep 26 '11 at 18:23
1  
Furthermore, when I allow the graphic designers to draw the gui, it always ends in disaster. They don't know the way the data should be organized and they almost never know what is and what isn't possible. –  Jonathan Henson Sep 26 '11 at 18:27
    
Thank you for explaining, I agree with you that graphic designers are not to be tasked with the information management. –  Emmad Kareem Sep 26 '11 at 23:54

You can also look for succesful examples of "similar" sites to get ideas for layouts, graphics and designs. With a bit of tweaking in your favorite paint program you can borrow a lot of ideas and make them your own. Don't copy outright - it's not only bad manners, it's probably also illegal in most cases.

Once you've borrowed a few times you'll start to get a better feel for the designs of succesful sites, and you'll get to know the tools to make those designs as well (with your small tweaks).

share|improve this answer

With the introduction of HTML, creating a simple non-ugly looking site became a challenge. While you may have the concept, it takes several tricks, tools, ready made graphics and CSS knowledge to get it right. Also, usability techniques and other human factors influencing the design process are required to produce the sharp looking pages.

Developers spend most of thier time batteling learning complex languages, OOP, ORM, SQL, T-SQL, etc. Also they rarely invest in tools for creating web sites (most are expensive).

As a result, many developers suffer from their inability to produce stunning web pages. I believe that if you learn the tools required, you will be able to create good pages too.

It is also important to know what your roll is in the application development process. You may find that web design is a nice to have skill rather being a mandatory skill. In large projects, it should not be a programmer task for the above mentioned reasons at least.

I found that this tool is a great tool, it may help you:

Artisteer

Take a look at it and try the demo, it is really good.

share|improve this answer

still in web development good development skills is not enough without great skills in designing

I don't know if this statement is true, I think it depends on where you work.

For example a smaller company will probably require you to be more flexible with your skillset, whereas a large company might not have the same expectation and you could actually spend all your time developing while a design team works on the designing.

Microsoft have actually updated their toolset to highlight the clear separation between developers and designers. They have introduced Expression Blend with WPF which now means that the developer can work on the functionality of a piece of software and someone else can do the design for it. They both use different tools, they can both work on the project at the same time but one does functionality and one does the design.

The developer specifies the data points and the designer displays them.

share|improve this answer
    
thanks, i was thinking about it while doing it with no team while doing it as alone freelancer ! –  Ali Sep 26 '11 at 9:25
    
Definitely not true with a big company. It has separate design and development teams, and both need only a minimal knowledge from each other (know what is possible, know what is broken). –  SF. Sep 26 '11 at 14:16

Remember that design can be tested too, not only code. Start simple, try out your design on a small group of people, record their feedback and go from there. This can help you identify problems with your design and give you ideas about what could/should be done different. Then revise the design and iterate.

share|improve this answer

You're just going to have to fake it and copy other designs. Avoid anything fancy except for one or two features that will be a major benefit to users. Follow some basic practices of limiting fonts, colors and clutter.

Don't be afraid to post questions on UI.stackexchange.com

share|improve this answer
    
+1- good point on the limiting of colors, etc. The mark of a programmer's UI is usually a neon teal background with a blink tag around all buttons and a marquee tag around everything else. Good looking websites use the defaults (white background, regular fonts, etc.) for 90%, with a couple cool deviations. –  Morgan Herlocker Sep 26 '11 at 15:11

Even though it's not your area of expertise, I think it's always interesting to study how to create UIs. Nowadays most webpages are very dynamic and knowing some UI skills would certainly help when creating components and set their interactions with your page's elements. I've come from a backend-only development background and I was surprised at how much is involved when creating interfaces.

There's a particularly good book I've read about web design and that is aimed towards developers:

Web Design for Developers: http://pragprog.com/book/bhgwad/web-design-for-developers

It's an easy to read book that touches all the phases when creating interfaces: from plain sketching and prototyping UIs to creating designs with HTML + CSS.

To further improve your UI skills, I also recommend PeepCode's latest screencast with Ryan Singer: http://peepcode.com/products/ryan-singer-ux

share|improve this answer

I think that picking up some basics of UX/UI/graphics/typography is certainly a valuable endeavor. You can't always have a "well-rounded" team of specialists, of course. Many times folks have to wear multiple hats. A good developer will see value in spending time learning about things outside his/her domain and should be able to at least recognize good work in design.

However, there is something to be said for what designers do. A developer can only do so much in the area of design (admittedly some more than others). In particular, large public-facing projects which reach out beyond a narrow niche benefit greatly by employing actual design professionals. And I don't simply mean folks who can swing around css and html color codes. I mean people that have spent YEARS studying things like typography, who have read and understood Josef Alber's book on color, who can make beautiful sketches with crumbling charcoal on newsprint. These are valuable skills and the projects that recognize that and that can put these skills to focused use have a decided edge over the competition.

That said, there are some areas where designers and developers can overlap their skills. Especially UX and its subdomain, UI. I recommend ...

share|improve this answer

Hire a pro.

Seriously, UIs from developers have a terrible reputation. This is not because developers are below average at design, but rather because developers are below average at asking help.

A developer has the tendency to take on every digital challenge that come their way.

(I was a professional developer for 10 years and my wife is a user interface designer for 20 years)

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.