Icon app UI design 2
I posted previously asking for feedback on a mockup of the UI for an app I’m working on, and thanks to those who offered comments and discussion. Based on your thoughts and my own continuing design work on the app, I’ve created a new UI mockup for you to take a peek at.
First, you might want to refresh your memory of the previous mockup. I’ve changed the UI design quite a bit, and you should bear in mind the following points when looking at the new version:
- This is a mockup, and as such it’s not pixel-perfect. I spent a reasonable amount of time putting the image together, but there will likely be rough edges, spacing inconsistencies and so on which will be ironed out in the actual implementation.
- The toolbar icons are illustrative only. Those functions will be in the app, though maybe not with toolbar icons nicked from Apple applications.
Without further ado, then, here’s the new interface design. A few notes on what you’re seeing:
- In the Library pane, the page-up/down arrows on the right will obviously only be visible if there are more items to show. These items are dragged from the Library onto the Preview pane below.
- The text in the lower-left of the Library pane (”Document Page” in the screenshot) shows the name of whatever Library item your mouse is over.
- The popup in the lower-left of the Preview pane chooses what size of icon you’re creating. You can change between sizes at any time; the icon Elements are not resolution-dependent. Other possible sizes would include “High Resolution Application Icon - 256 x 256 pixels”, “Promotional Icon - 512 x 512 pixels”, and so on.
- The Attributes pane shows settings for whatever Element of the icon is currently selected; you can change the selection by either clicking on the relevant part of the icon in the Preview pane, or by choosing from the popup menu in the Element pane.
- Clicking the disclosure triangle in the Element pane causes that pane to resize, showing a full list (in depth-order, topmost first) of all Elements in the icon.
I may have an invisible vertical splitter between the left two panes and the right two, which can be dragged by clicking in the space between. If the Element pane is expanded, I’ll probably also offer a horizontal splitter between it and the Attributes pane below.
Obviously, zooming into the Preview pane will cause it to grow scrollbars as necessary, and the Attributes pane will naturally also scroll if necessary. Both these panes will resize vertically with the window, and all four panes will grow horizontally with the window.
As before, any feedback would be much appreciated. In the meantime, I’m off to look into actually implementing that cool gradient-backed rounded box.
4 Comments