what's the best app to draw UI wireframes on the mac? (And why) [closed] - macos

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.

Related

Best way to create GOOD LOOKING, multi-platform, desktop Ruby apps? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I've got an idea for an idiotically simple application, one that converts HAML and SASS into HTML & CSS files for the user by watching directory changes (like Compass). Almost all the components are already available in the community, I just need to figure out what to use for the front-end.
The catch:
It must be:
a standalone app (i.e. users must NOT be required to install Ruby or HAML),
that looks good,
and is available in several platforms (linux, mac, windows).
So far I know very little about:
RubyScript2Exe: which packages ruby applications for you
Adobe AIR: desktop-style web-development...but is it easy to integrate with Ruby?
Adobe Flex: Is this only for web-based development?
Java /jRudy: (I get scared just thinking about it)
FXRuby: a ruby GUI toolkit which is unfortunately too old-fashioned (read 'ugly') to attract the audience I'm looking to target (designers and HTML developers....no, I'm not planning to charge for it, just want to make an attractive app)
Shoes: Another ruby-based GUI toolkit that may or may not suffice...is there a GUI
builder for this?
Of course, other options are more than welcome.
If you provide an answer, please be kind enough to also leave a link to a good starter tutorial that integrates Ruby and your technology of choice?
I recently had to decide on a Windowed front end for a simple app. I looked into FXRuby, TKRuby, Shoes and WXRuby.
Shoes was the only one that helped me make my app. The rest were (probably) more powerful but the cost in complexity (compared to Shoes) seemed vast. I had never had to sit down and work with a big ugly window API before and didn't want to learn one just to achieve my simple report generator. It wasn't clear how to take code for these API's and reliably generate an executable. Shoes' built in packager works nicely for me.
The one problem I had with Shoes was the trouble getting documentation. I eventually learned that running shoes -m launches a shoes app which acts as a very useful manual. The official tutorial is a worthwhile (and short) read. That's located here.
Shoes served me well and will be my first port of call on any simple utility i choose to make in the future.
have you had a look at titanium desktop? might be what your looking for
Oh, hotness flows from my pores about this question. I believe the future of the internet lies over thisaway Cappuccino. I know it sounds like a plug but I swear, I'm just impressed as hell by 280slides and Atlas. A web framework that's built using Cocoa's interface builder and can be compiled for both Cocoa natively as well as a kickass web page by a simple drop-down box? Hot hot hot. Boiling maybe?
Limelight is another alternative. It's JRuby based and available as a binary install for Windows and OSX, or as gem for any platform. There is a tutorial and screencast linked on the Limelight homepage.
I haven't used it, but thought it was worth a mention (I did download for Windows, but couldn't get it to launch - I suspect my work proxy is causing problems).
My vote would be for Shoes as well.

Looking for some examples of GUI apps with great design [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I will start developing my next desktop application in about a month. In the past I have delivered functional software that hasn't wowed anyone, including myself, in the usability or aesthetics department.
Does anybody know of any resources or guides or even books that could showcase examples of good design in desktop software?
There seems to be a lot of resources for web apps, but such resources for desktop applications are rather slim.
I enjoyed these dot net rocks tv videos by Mark Miller on The Science of a Great User Experience really got me thinking about good ui:
http://www.dnrtv.com/default.aspx?showNum=112
http://www.dnrtv.com/default.aspx?showNum=123
Where you can really make a difference with GUI design is if you are addressing a difficult to understand concept in a GUI.
When you are doing that, creativity is critical. When dealing with complex hardware configurations (something I had to do a lot, but probably doesn't apply to you), I've had good luck going to tech manuals and tech support people and trying to completely understand the problem. Then I took the methods they used to show me (diagrams from the manuals, whiteboard drawings, etc) and tried to code them into a GUI.
Had a couple massive successes with this.
Iteration is also critical. Prototype something quickly then beg everyone you see to try it. Ask them to solve a problem, then watch where they go first and watch what they have problems with.
Address every problem and stumbling block.
Don't be afraid to throw it all away and start over, it was only prototype code.
Separate your GUI from your implementation so that you can swap out the GUI if you find a better approach.
If you want to concentrate on just one feature, have a look at ITunes' search box which filters as you type. Other software may have had this before, but this was I think the first place I encountered it.
The difference between this and classic search was an eye opener for me in terms of readability.
Auto-complete which you see in so many places is another one. I'd recommend IntelliJ IDEA for the way it took auto-completion which emacs, Visual studio etc had for ages and added autocompletion for variable names and method names in a manner which almost seemed psychic the first time you encountered it.
You can look at Thirteen23 Experiences
To make things usable, you need to make sure that you follow existing conventions for your target platform and application type.
For example, if you're developing a Windows App you'd better make sure that control-c copies, control-v pastes, control-s saves, etc. The File menu better be the leftmost item in the menu bar, and the Help menu better by the rightmost item.
If you don't follow existing conventions, users are going to get annoyed with your application very quickly.
Google for HIG. Human Interface Guidelines typically include lots of research into best-practice in user interfaces, and explain in great detail how to design each aspect of a program. Also, have a google for "user-interface hall of shame" or something like that.
In this question I mentioned GUI bloopers. Part of great design is knowing what makes bad design and why. It is actually a great book, although I don't know how much of it is available on the website.
You can check case studys on websites of GUI companys. I fund few at www.puzzlehead.com
Check there and also other sites.

Good Gantt-diagram software? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I have multiple projects on my own, each one with a deadline and a (personal) estimate of the time that I should invest to get the thing done.
At a particular time I can be involved in multiple projects.
What I need is a software that lets me plan and display a "timeline": a line for each project that extends when I've to push efforts into it.
Did you know something that does something similar? I remember that this is a technique used in Software Engineering, but I don't remember the name...
EDIT
Thanks to duffymo, I know that I want a Gantt diagram manager :)
Related:
Which Gantt chart/Project management tool would you recommend for linux?
Project Management — resource chart
Can you recommend a good php Gantt charting development?
Is there any LaTeX package for drawing Gantt diagrams?
On the Feeware java-based front, you have GanttProject.
You can launch it from this jnlp link.
If you don't have Microsoft Project, you can do this in Excel using a stacked bar chart.
http://office.microsoft.com/en-us/excel/HA010346051033.aspx
I think it's called a Gantt chart.
And Google can find a bunch of open source possibilities, including this one. I don't know if it's any good.
Microsoft project is a good one.
For Mac OS, you should take a look at OmniPlan.
Do you really need a Gannt chart?
You have a collection of work (a backlog) that includes items from several projects. You need to predict the end dates of projects based on the rate at which you're actually completing work (your velocity) and on the current mix of work items, and make decisions about shuffling the backlog to move the estimate completion dates of various projects. Right so far?
Given a velocity (units of work per fixed time period), you can plan ahead by dividing your backlog items into time boxes (iterations) that hold no more than a velocity's worth of items. The time box that the last work item for a project lands in is when that project is predicted to be done. Shuffle the mix accordingly.
This is called "reality based" scheduling in some quarters, since it's based on a demonstrated rate of progress and consistent estimation. Gannt is plan based; there's a tendency to want to make reality conform to the plan, which causes a lot of stress and pain.
There are a number of Agile/Scrum tools that will automate the management of your work backlog, and let you track work and calculate velocity. I'm a fan of Pivotal Tracker, which is web-based and free. (Full disclosure: I worked with Pivotal Labs.)
I would recommend you an online and free tool that will let you create what you want, it is called "Gantter"
For Linux and Windows: Planner
OpenProj is really capable, seems to be MSProject compatible, and works on Windows / Linux / Mac (it's Java based). It's also free.
About time management software, there are many kinds of it, one I have used is called EfficientCalendar, just an advise.

Where do I start learning about GUI programming? [closed]

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
I have a pretty good knowledge of programming languages like C/C++, Java, Python. But they were all mostly learnt in a college / high school class room setting where the best user interface was a numbered menu. You know, the standard data structures, implementation of various algorithms, file handling and the like.
What I want to do now is to get into GUI programming. I am not sure if I am asking the right way, but I am looking at using the WIMP paradigm (windows icons menus pointers). I want to place buttons and forms. Event driven programming, I believe is the right word, where my application waits till the user clicks something, types something etc.
Given my background, where would be a good place to start? I am looking at the following requirements -
1> Preferably cross platform.
2> Lots of documentations, tutorials, and if possible sample code that I can learn off of
3> A good GUI builder tool, where I can drag / drop stuff the way I want them to be displayed.
Any ideas or suggestions to get me started?
I'l try the book About face: Essential of User Interface Design, its centered on design practices for UI as well as designing taking into account the user goals, that is, what the user wants to acomplish trying to get you away for the "developer GUI design".
It also reviews some history about GUI design from Microsoft, Apple and other companys. Things like defaults for MacOsX (where the accept and cancel buttons are usually located, etc) as well and the whys beneath that.
I'll also look up the Office 2007 UI Design Guidelines for Microsoft as it's probably "gonna be a thing".
Shoes for Ruby is cross platform, very easy, and is a brief introduction to building a window and handling events that happen in it. fun too :)
You're looking for Qt. It's a cross-platform C++ GUI framework, and it includes everything you asked for and more.
It's free for open-source projects to use, provided you're using the GPL.
There is a great deal of language and UI framework specific resources available for people interested in building application UIs. However, before delving into specific technologies, there is much to be learned about Human-Computer Interaction and how it applies to user interface design. Some references to look at:
http://www.useit.com/
The Design of Everyday Things (book)
http://worrydream.com/MagicInk (takes awhile to load but very worthwhile)
After researching what makes a good UI, it is time to explore how:
Mozilla XULRunner
If you decide to use Java Swing, I strongly recommend the relative layout manager
Of course there are many options out there, including QT, Fltk and SWT
I was thinking exactly the same thing recently. Qt seems like a good cross platform GUI framework, and Python seems like a good language to work in.
So PyQt is my (uneducated) suggestion. It does include a drag and drop GUI design tool.
Take a look at Glade and Gtk. Both are really easy to use. Glade is the GUI builder, and Gtk the toolkit. It's both cross platform and cross language. You can load the Glade files in almost any language. Here is a Glade/Gtk tutorial
I would look into C# .NET development and its WinForms API. It's much easier to program GUI desktop apps for Windows with that than with the Win32 API. You can always ease into Win32 API stuff later, if it's still relevant.
For cross-platform solutions, look into Gtk+, perhaps PyGtk. Another good one is WxWidgets.
If you want to get really funky, check out Shoes for Ruby.
Many years ago, I made the quickest progress in this area using Visual Basic. I assume it's still dead easy to pick up and the code/run/debug cycle is insanely productive and you'll learn a lotta useful stuff fast. Tons of documentation, and all the other goodies you want...
Seeing as you already have knowledge of Java you should check out the Swing API here, it provides a pretty powerful set of packages that can be used to create complex GUI's. Moreover, its cross platform, there's tons of documentation and it can be used with the Netbeans IDE.
Java's Swing API is cross platform and relatively simple, and NetBeans is a good GUI builder.
Netbeans is cross platform, and while it is centered towards Java developers, you can easily install addons to work with C/C++, Ruby, etc. I use it for developing Swing GUI programs because it has a very simple interface for simple drag and drop GUI creation. There is a lot of good documentation on developing with Java Swing, and I'm sure there is plenty of documentation on using Netbeans also.

Prototyping a GUI with a customer [closed]

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 ...

Resources