Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
When prototyping initial GUI functionality with a customer is it better to use a pen/paper drawing or to mock something up using a tool and show them that ?
The argument against a tool generated design being that the customer can sometimes focus on the low-level specifics of the mock-up rather than taking a higher level functional view of the GUI overall.
Always start with paper or paper-like mock-ups first. You do not want to fall into a trap of giving the impression of completeness when the back-end is completely hollow.
A polished prototype or pixel-perfect example puts too much emphasis on the design. With an obvious sketch, you have a better shot of discussing desired functionality and content rather than colors, photos, and other stylistic matters. There will be time for that discussion later in the project.
Jeff discusses paper prototyping in his Coding Horror article UI-First Software Development
Click the "Watch a video!" link at twitter.com to see an interesting take on the idea from Common Craft.
The "Napkin Look & Feel" for Java is really cool for prototyping. An actual, functioning, clickable app that looks like it was drawn on a napkin. Check out this screenshot:
Seriously, how cool is that?
I would suggest you sit down with your client and use a tool like Mockupscreens and develop the UI interactively. A benefit it has over Napkin LAF is that it does not require coding, or indeed development tools of any kind
Check out Balsamiq
It does the "THIS IS NOT A FUNCTIONAL APP" napkin view very well and is easy to use.
Has a full featured demo you can try out online and as an added bonus you can email your XML to your client and they can tweak it and play with it and email it back to you without having to have a license.
There is a book called Paper Prototyping which details pen and paper drawing and what you can gain from it. I think it has a lot of benefits, particularly that you can, very early on (and easily), modify what the end result will be without much effort, and then start off on the right foot.
A basic paper version is the way to go for an initial mock-up. It's been my experience that if you do a "real" mock-up, even if you explain to the customer that it's a non-functional mock-up, they are confused when things don't work.
Bottom line: keep it as simple as possible. If it's on paper, there is no way the customer will confuse it with a working product.
For the first draft, I prefer to use graph paper (the stuff with a grid printed on it) and a pencil. The graph paper is great for helping to maintain proportions. Once the client and I have come to a conclusion I'll usually fill in the drawing with pen since pencil is prone to fading.
When I actually get around to building the digital prototype, I'll scan in the hand-drawn one and use it as a background template. Seems to work pretty well for me.
I think it is best to start with Paper/Whiteboards/White walls.
Once you have the basic structure, you can move it to Visio with the wireframe stencils
(Download a Stencil Kit)
(Visio Stencils for Information Architects).
Or you could use Denim (An Informal Tool For Early Stage Web Site and UI Design) with a tablet PC or Wacom tablets to design the GUI and run it as HTML website.
WireframeSketcher is a tool that helps quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It comes both as a standalone version and as a plug-in for Eclipse IDEs. It has some distinctive features like storyboards, components, linking and vector PDF export. Among supported IDEs are are Aptana, Flash Builder, Zend Studio and Rational Application Developer.
(source: wireframesketcher.com)
I've recenly used a windows App to prototype an application to a customer (the final interface has to be integrated into a website).
At first people thought that it would be the last version and they started to make very heavy criticism from the way controls were displayed to the words I had used (terminology and stuff) and the meeting time ended before we could even discuss the functionality itself.
That discussion dragged on for days and days until I told them that, being a mock (and not a final application) all input is welcome but we had to focus on the functionalities first and then we could move on to look and feel as well as terminology issues.
From thay meeting on I am always terrified of prototypes and mock-ups... Perhaps I should just have given them something made in visio instead.
You can try out ForeUI, it allow prototyping with different styles, what's more, it can make interactive prototype and run it in browser.
For a non-installation browser based tool you can try draft-it
It's free - and if you have a gmail account - no registration is needed.
Makes interactive/Step by Step Or Slide Show- prototypes. You can share your protoype with anyone you choose by just sending a link.
Works for us ...
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
We are currently starting a bigger project. What're your suggestions for best practices of workflow?
We are planning to rebuild from scratch (the existing product is outdated by years, regarding visual and internal design and programming). While the product functions (a Rails based web project) are already set, the question is: What is your workflow from here on? The most interesting part is: How and when do you do your screen design?
We are planning to do it in the following order:
"Pencil and paper" screen design: Just layout what the screens should look like and visualize the functions and visitor pathes
Hand out the layouts from point 1 to the designers, have a talk to them, and let them work in parallel to programming on the designs
First implementation, simple color-less HTML layout based on point 1 (automated tests, functionality, BDD, TDD)
Integrate the designs with the product prototype
Work out the rough edges together with the designer team to finalize the product
Release a beta product for the customer to test
Do you have similar workflows? Are there suggestions for improvements? But the most important for me: How exactly do you do point 1?
While this is not exactly programming-related I still think this should belong on StackOverflow as this is important for anyone doing bigger projects. From the past we know that good screen design is always a critical and hard point if trying to do that while programming, and even harder to deploy it after the prototype application has been created.
Update: I found Balsamiq Mockups to be a very helpful tool to do the mockups. Still there's an open question how one would best visualize visitor pathes.
Update: We had been successful using Balsamiq Mockups to create a design pleasant to the customer and we managed to successfully integrate this into the existing web content. The customer is so comfortable with the new ideas that he is planning to redesign the complete web site.
I like your workflow. It should lead to a decent result.
A few ideas here:
Let the designers know and understand your presentation model. What pages there are, what information and control elements will they have, what is the role of each of them, what is the purpose of the page and what message should it communicate to the user. If you let the designers work alone then they will design something to reflect their vision of the project and not your design. You'll end up redoing everything or trying to adapt one part to the other.
Users will only see and understand design. They know nothing of implementation. If they see a button they will think the feature is there. if you plan to go agile while cooperating with the users during development, hide out elements that are not implemented yet. Feed them results one step at a time.
If you can have users nearby do screen design together with them in iterations. There is not much work for designers yet, when you are basically deciding on the layout. All those colourful effects and polished buttons should be done after the layout is stable. Otherwise it will be a waste of the designers work.
I really like the model of extreme programming. When dealing with new products user requirements can quickly change over time and this is a proven method which keeps the design "up to date".
Have the users write up functions that they want for the application. And have the designers agree upon a general layout.
Write up a general wire-frame that both you and the user agree upon, I like to do this in smart draw or some sort of rapid gui development platform. (no functionality at this point).
Write the code for the GUI based upon the wire-frame and write sequence diagrams and class diagrams.
Based upon these design start to fill in the functionality behind the GUI
Release betas throughout the process of adding functionality to select users who can help guide future development
The benefit of this design is that at any point in time you can re-work the GUI and incorporate new functionality. The idea is to have a general plan at the beginning that can be adapted as user requirements change.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
What comes first? After the design has been outlined and approved, should a designer create pages in HTML and then hand them to a developer to add code? Or should a developer build simple pages that work and hand them over to the designer?
I've always done the latter, but recently worked with a designer who built an entire site in HTML and handed it to me to make it work. I found it saves a lot of time for 3 reasons:
The developer doesn't have to create all the form fields and rudimentary layout.
The designer doesn't have to rework all the "ugly" pages into something attractive, instead starting with a clean site which is faster.
The code isn't accidentally broken by the designer. I've found designers are more likely to break the code doing their work than developers breaking the design adding the backend functionality.
In short, if the designer does his work first, there's very little rework. I just make what already looks great actually work.
So which is best practice? See other plusses and minuses?
EDIT: Assume both designers and developers are already in agreement on the proposed design.
Wireframe mockups and visual aides are a great way to elicit requirements from end users. Giving the user something to look at and see helps to drive the design to where it needs to go instead of developers just doing the guesswork.
Also, UI design does affect your code. I think the biggest myth that we buy into as programmers is that we can just build a business layer and then spread the UI on like peanut butter. It never happens this way, so I am a big fan of having designers work with users early on and often. Having a visual design to work against is like TDD for the UI, and it helps to drive the process downwards.
Best practice is to try it both ways, see which way works best for your organization, then do it that way.
Occasionally try it the other way to see if anything has changed.
That way you get a solution tailored to your situation without worrying about ephemeral transitory things like "best practice".
As you can probably tell, I'm not a big fan of rules being handed down from on-high. Don't get me wrong, if something proves to be an advantage, I'll use it (agile, for instance, since it focuses you on immediate deliverables). But it has to be proven in the environment you work in, otherwise it's just something that worked for someone else.
I think it depends highly on how your views and code behind are set up. Some people will put a lot of logic into their views and others will have little to none. It will eventually just come down to your specific case.
In most cases, I agree, it will be easier to create the HTML first and include the back end programming later. It is essentially making a specifications document for you.
Once you've got your storyboards all worked out and approved, it's probably more natural to do more detailed "sketching" at the HTML level first. But I guess I'd also try to decouple the design and code as much as possible, so that the developer and designer can work somewhat in parallel. Two ways of decoupling are XHTML/CSS and "unobtrusive Javascript".
The developer and designer can work out the skeletal XHTML page structures they'll need from the set of storyboards. The designer then can use static mock pages to develop the CSS style sheets and explore the artwork. Meanwhile the developer can focus on generating the XHTML structures without style information. The big advantage (and goal) of CSS was to separate page structure from page appearance.
Another avenue to explore are "unobtrusive Javascript" frameworks like jQuery, whose goal is to separate the page's behavior from its structure, again making it easier for the developer and designer to work in parallel. By parallelizing these activities, it would be possible to incrementally deliver versions of the final product, both in form and in substance.
I would definitely go with designer first. If the coder does the pages first, he's forcing a design on the designer -- particular for a multi-page form.
Depends on the type of place you work at and the skill set of your teams!!
I worked for a Design Agency for many years where designers ruled as they brought in the biggest revenue stream and the web work was an add on to the services.
We worked very closely with the designers to make sure the designs met requirements and we not to off spec. The designs were a lot of the time used as sign off (don't get me started!!) and not much could changed once agreed by the client. The designers were also not that good at HTML,JScript,CSS etc so this was left to the developers to implement.
So in this case design was always done first which worked well, even if it was for the wrong reasons.
Well, assuming that the designer produces high-quality HTML and CSS (which is far from obvious, btw), the question boils down to: do you have 100% control of your HTML or not?
If you use a CMS, or a framework that likes to produce lots of its own HTML (like ASP.NET), then you have no choice. Trying to make the output match the designer's HTML is a pointless headache. You'll be better off with your original method.
However, if you produce all of the HTML by yourself (using PHP or, say, a lightweight framework like Django), it's better for the designer to produce the HTML first, for the reasons you mentioned.
Small nitpick: I disagree with reason #2. CSS-based design is all about taking "ugly" (that is, bare and functional) pages and making them attractive, without even touching the HTML. If the developer writes decent, semantic markup, it should be pretty easy for the designer to add his design on top (well... with some HTML hacks added, like for round corners and the like), since this is what he should be doing in the first place.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I think it would be interesting to get a programmers viewpoint on UI design.
What is your favorite User Interface that you have come across in a web application?
If possible, say a little bit about why you like it.
http://www.google.com is my favorite. Can be considered a "lack of UI" ;)
At the risk of sounding too much of a fan ... I think StackOverflow has a great UI. It is clean, without clutter (except the creeping ads!), the navigation is straight forward and yet manages to compress a fair amount of functionality.
Fairly simple features, like the coloured vote buttons to show what you have voted for, and the live preview really add to the interactive feel.
(And I don't mind the ads as long as they stay away from the flashing punch-the-monkey kind!)
Web application: Wordpress. It's so powerful, yet clean and easy to use.
Desktop application: Excel (or equivelent). Seriously, a spreadsheet is the most innovative and clever user interface ever devised. It's used for everything. I don't know what the question is, but the answer is Excel.
GMail interface is so smooth and fast that I question me why nobody had done that before.
I think Remember The Milk has a brilliantly clean and intuitive interface
Mint.com, if you trust someone else with your bank account information. It keeps track of all your transactions, lets you fill out a budget, notifies you of unusual spending trends or transactions, and lets you drill down through your spending trends to see exactly where all of your hard earned cash is going. Best of all, it's free.
(source: mint.com)
http://bbc.co.uk homepage
http://mail.google.com/
http://stackoverlow.com (that is I liked it before the introduction of ads :)
FreshBooks accounting has a very nice interface.
(Although I upvoted the answer in favor of StackOverflow)
I think stackoverflow has done a great job in many areas in terms of usability, including colour pallete, use of whitespace, anticipating user's need for information and providing or hiding appropriately, non-intrusive JS/AJAX.
Minus points for these increasingly obtrusive ads, though. :P
Gmail is also good. Honourable mention to github.com.
Update: I recently got introduced to FriendFeed. I think they have also done a fabulous job with their web UI, in terms of clean yet attractive design, plus appropriate and helpful use of Javascript and AJAX to provide for a smooth, positive user experience. Check it out.
The new Yahoo Mail UI blew me away when I first saw it. The keyboard shortcuts, drag 'n' drop, tabs, etc. really make it look and feel like a desktop app. Admittedly this quality of UI has become a lot more common on the web in the last few years, but for me at least, Yahoo Mail was the first web app in my experience to bring this kind of usability to the web.
http://fastladder.com has great UI for feedholic. I can't live without fldr's keyboard shortcuts (and some greasemonkey to change them to fit for me.)
http://www.instapaper.com is also simple and great. This is temporary storage for web resource marked as read later, and don't need password for make account because of that purpose.
For the CLI lovers out there...
http://cb.vu/
cat about.txt
Not really useful but it's quite interesting.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I want to draw user interfaces for web and desktop applications.
I need something less print-oriented than omnigraffle. think pixels!
Also, need good building blocks (aka stencils). Form elements, tableviews, etc.
I've been playing around with Balsamiq Mockups and it's OK for basic wireframes. I still prefer pen and paper sketches that are later refined in Photoshop when working on my own, but Balsamiq is useful when working in a team.
WireframeSketcher wireframing tool comes with fast and native UI on Mac. It works well with retina display too. There is a large built-in library of controls and extra stencils are available.
I very much like Omnigraffle, with stencils for UI design. More UI stencils are also available.
You might also check some other stackoverflow questions on this topic.
I'll be honest - I find Interface Builder just as fast as using Omnigraffle with (the aforementioned) stencils for prototyping desktop application UIs.
Plus the bonus is you get all of the available controls to look at.
Speaking of Illustrator, InDesign is actually better because you can do multipage layouts and use master pages for constants like headers/nav etc...
Axure just released Axure RP 5.6 for mac in Alpha. Great for websites and apps. http://axure.com/CS/blogs/axure/archive/2009/12/22/6104.aspx
You can also pair OmniGraffle with the free Web UX Template from Konigi.com
All these answers, and nobody has mentioned the grandaddy of them all?
Use Adobe Illustrator!
Create your own stencils / reusable components in layers and share those between documents.
Sharpie and paper first.
Then MAYBE illustrator to show detail close-ups if necessary.
With anything except Interface Builder you're going to have to get the standard UI control templates from somewhere else or make them yourself.
I've been using Lineform, which turns out to be pretty good at specifying dimensions in Pixels (just select "Points / Pixels" as the Measurement Unit in Lineform Preferences). That was something I had trouble doing in older versions of OmniGraffle (haven't used it lately though).
Try Skitch. It seems to be one of the best kept secrets for simple drawing and image manipulation on the Mac. I heard about it recently on TMO Geek Gab podcast.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I probably spend far too much time trying to make my visual interfaces look good, and while I'm pretty adept at finding the right match between usability and style one area I am hopeless at is making nice looking icons.
How do you people overcome this (I'm sure common) problem? I'm thinking of things like images on buttons and perhaps most important of all, the actual application icon.
Do you rely on third party designers, in or out of house? Or do you know of some hidden website that offers lots of icons for us to use? I've tried Google but I seem to find either expensive packages that are very specific, millions of Star Trek icons or icons that look abysmal at 16x16 which is my preferred size on in-application buttons.
Any help/advice appreciated.
Good icons are hard to design. I have tried to design my own, and have used in-house graphics designers as well. However, building a good icon set takes a lot of work, even for the graphic designer.
I believe your best solution is to buy/find a set of icons for use in your projects.
The silk icon set is a good, free set and can be found at FamFamFam. There are over 1000 icons in this set, and it is very popular.
If you are looking for something "different", you can purchase icon sets for a couple hundred bucks. Considering the cost of having a designer create them for you, or doing them yourself, the cost of these sets is cheap!
Here's a few icon designers I've come across of the web:
Icon Factory
Icon Experience
Icon Buffet
Don't forget either that unless you have lots of toolbar buttons or other such objects to fill, its possible to get by with very few icons beyond your own unique application icon and system icons. (Remember to call them from existing libraries on the user's machine, not repackage them, keep the lawyers happy.)
Having too many icons can be just as bad as having some ugly ones. Many guidelines state that if you can't have professional looking icons have some whitespace instead. It can help to keep the interface light and feel uncluttered.
If you have money, definitely go with a professional designer. At first if you don't have too many projects requiring a designer, just hire one on a contract basis. If you start feeling the need for a full-time designer then it's going to be beneficial to hire one.
Good looking free icon sets are available, but you should shop around for a decent icon set which you can reuse for most of your projects.
Finally, if you don't have access to a designer, just keep the look very clean and simple, because chances are that you can't do a good looking design (since you're not an artist).
You don't have to be a great designer to come out with a decent UI and a great user experience for your application.
I think there are certain principles you can follow that can dramatically improve your application.
At a high level this includes:
Identifying your top 3 use cases
Measuring and reducing the number of clicks it takes to get through the top use cases
Sketch, Prototype, Throw it away, and challenge yourself to do it with less
I've written a blog entry that attempts to write out some principles related to GUI design. Check it out and let me know what you think.
How to improve the User Experience of your GUI application with some simple principles.
These are the icon links I found some time ago, I think they were not posted yet:
Eyecandy for your KDE-Desktop
+3700 Free icons for your website or blog
Icons for people who need icons
Tango Icon Library
this also sounds interesting: OpenClipArt but their web does not seem to offer quick previews (thumbnails)
We have an in-house designer that does ours, although we also use freelance designers, too.
You could try starting a design competition on 99 Designs?
There are also some free icon sets available, like these.
If you google around, you'll also find quite a few commercially available icon sets that you can use (although obviously neither of the icon set options will get you an icon specific to your app!).
Hope that helps!
I have a couple that I really like:
GlyFx and Liquidicity Vector Icons.
Those from Liquidicity are specially useful for WPF or Silverlight, you can make an interface that even zoomed looks great.
I came across IconBuffet when registering my copy of Visual Studio Express. They have some awesome icons that you could use in your applications.
For application development I have also started playing with WPF interfaces in .Net, soon to be available on Mono as well. With the ability to use web images and pictures in Windows Applications even not creatives can develop some awesome interfaces.
For website layouts I use sites like OSWD for designs and layouts that are free.
I recommend IconFactory, too. Or to be exact: http://stockicons.com/ There are a lot of icon sets for an affordable price and I think buying a professional set is the best choice you have if you're not a graphics designer yourself.
If you only need a single icon, it's probably worth to hire a graphics designer.
But why on earth do you think you need to make icons to make your interfaces look good? Icon driven interfaces are the bane of UI these days. Look at a screenshot of Komodo IDE or Eclipse for example. These are horrendously badly designed interfaces. It's impossible to tell what the buttons do until you hover over them and get the tooltip. I suggest you use text unless there is an icon that better represents the concept, not feel you need to represent every idea visually.
I guess it depends what context you're developing UI for - have you a lot of users who don't speak English as their first language? Is it for occasional use or for power users to use every day? Is it a web site? Is it a desktop application?
But when you really need icons, there are some good libraries out there. I think consistency is really important; Tango for instance "exists to help create a consistent graphical user interface experience for free and Open Source software." and the rather attractive icons are licensed under Creative Commons
I thought it may be interesting to mention that Axialis has just released a version of the their Icon Studio for Visual Studio 2008 for free. It will only install if VS 2008 Pro or TFS is installed and plugs directly into the VS toolbar.
I have always liked the icon selections at VirtualLNK. They have a good number of icon packages that have a modern look at a reasonable price.
Try this site www.iconsreview.com, they offer reviews for a variety of icon packages, both free and for purchase.
www.iconshock.com has over 400,000 icons and you can buy the entire collection for around $400.
Alternatively there are a number of sites offering free icons, just be sure to check the licence.
I ended up getting $20 credits (min amount) from vectorstock - they have a lot of vector images, icons and stuff like that to choose from, selling for 1 credit (1$).
You can always go on Elance and hire someone to make any icons/logos for you. I've done it several times and it's pretty cheap for what you're getting. There is so much competition on that site that someone will eventually come in at your price point. I've always believed theres no point in spinning your wheels with something you don't really specialize in.
Oh yeah and like this site, keeping it simple is always best!
I try to keep my applications very simple. Simplicity and usability can be a good design in-and-of itself if done intelligently.
Take all of the buttons for Stackoverflow for example. It shouldn't be very difficult to implement something similar in your own application. They are simple and they get the job done.
Try aiming for clean and simple first, and then worry about aesthetic elements.
Cheat and use photo's!
I've struggle with this, What I tend to do now, is find photos of objects BUT on a plain white background. The background can be made transparent. I then use this Conversion tool to convert a PNG file into an .ico. When exporting include all resolutions up to 512 pixel size for good results.