- Duplicate the layer
- Crop as a circle
- Add Bevel with height 18
Posted by Dan on March 10, 2016
Posted by Dan on August 25, 2015
Alt, H, G, K Send to Back – Send the selected object behind all other objects. – Home > Drawing > Arrange > Send to Back
Alt, H, G, R Bring to Front
Alt, H, G, F Bring Forward
Alt, H, H Distribute Horizontal
Posted by Dan on May 13, 2014
Overlays are an aggressive disruptive method of getting users attention. If abused or not implemented properly, visitors may leave the site. Especially on mobile, due to the limited screen size, there are better solutions. As usual it depends on the context and content. Highly recommend that you evaluate the need for a (mobile) overlay on a per-project/per-application basis.
Some applications that could be using overlay (but could be handled with an alternative):
Some principles (if overlay is the only option):
Examples and best practice
A reasonable example is the cookie lightbox of www.Hertz.com on mobile:
– Manage expectations. It seems to appear 1-2 seconds after the homepage is loaded, so the user still knows he’s on the right website and can still act on the cookie request. (dispite that lightbox may not be the best solution for cookie permission)
– Closing. There is a clear, branded “< back” button placed on the top of the overlay, making it quick and easy to close or ignore the message.
– Flexible. It takes up the full real-estate of the screen and if there’s a lot of content this is not a problem, it can be quite tall.
Because of the limited mobile screen size and the uasbility requirements listed here, content needs to be limited and overlays are often not ideal on mobile. Overlays that are limited in content and user-triggered may be an exception. In any case overlays must behave properly, as outlined in the principles above. I recommend to make a list of on what pages overlays are needed and approve the need for a (mobile) overlay on a per-project/per-application basis. If you have little control over this, offer guidelines (in the CMS or another form) to help the client realise the negative consequences of mobile overlays and offer suitable alternatives. Consider limiting the use of mobile overlays for the sake of conversion and the client’s own sake. Provide a overlay solution that can handle any type of (large) content and test it well.
Posted by Dan on March 23, 2014
Car park in Belgium: Elevator or toilets?
Car park in Belgium: Where am I parked?
More – Psychology of things book
See also: Web bloopers book
Posted by Dan on March 23, 2014
When designing you generally have these layout options. Using any of these patterns often will have pros/cons and consequences on the flow and rest of the page design. Possible factors/pro-con considerations influencing your decision are:
CON: Everything is shown expanded resulting in information overload and clutter.
PRO: No sub-navigation is needed
Accordions – popular with mobile (risks)
‘More details’ link (half-way accordion)
Row of links
Row of buttons
Rollover tooltip / toast message
Navigate to a different page
Progressive menu (or expandable tree) – popular with mobile
Filters (or row of toggles)
Swap content (flip div)
A combination – e.g.
, expand an accordion, slider/carrousel, … (for lightbox overlays that appear after a user clicks something)
Posted by Dan on January 30, 2014
In this article I briefly discuss the possibilities of annotating your designs, with the option of quickly removing annotations when you don’t want to show them in your deliverable.
Let’s face it: Axure doesn’t have an quick and clean way to annotate your wireframes. This can be a pain when you are using your designs for different purposes:
1) you want an annotated version of your designs for functional documentation,
2) but you also want a clean non-annotated version.
Annotation is typically done with call-outs or “numbers in bubbles”.
In Axure the standard way to annotate your wireframes is using footnotes. Unfortunately these footnotes are very small and can’t easily be customised.
Unfortunately there is no quick and easy way to publish an Axure without your call-outs.
The best I can suggest is to temporarily delete or move the call-outs off the screen before publishing. Repeat this for every page you want to publish without call-outs.
There isn’t the ease like layers in Photoshop. Axure does have dynamic panels. These work a bit like layers as you can quickly show/hide/move them, even in your clickable demo. But to edit a layer’s content you have to click around a lot (see demo http://screencast.com/t/mItXg1bqsg) switching back and forth between the annotation layer and the wireframe layer until the annotation is at the correct position.
If you go for the delete option, then you may also want to use the group feature of Axure. This way you can quickly select all call-outs at once (and then undo the change. Before you start, make sure to save your file as a different version, so that you don’t lose your original call-outs locations.
I would go for either of these options, depending on the project. I usually just use custom annotations (option A) but then keep the call-outs in my click-demos. That’s because deleting them all just takes too much time. It might not be acceptable for all client presentation though.
Other options like the built-in yellow Axure footnotes/annotations like this: are advanced but unfortunately not easy to maintain. They are also hard to read.
Hope they improve this in the next Axure release!
Posted by Dan on November 26, 2013
Posted by Dan on August 9, 2013
See also Prioritizing Usability book/pie chart by Nielsen
Posted by Dan on January 7, 2013
Sketchboards are popularised by Adaptive Path. Wireframes as a first step are too slow and detailed. The collaborative use of the sketchboard opens up the design process to everyone involved (all stakeholders including clients, visibility for management). Designers need a quick way to explore many different possibilities of the bigger picture, solo or in collaboration.
User flow –
Sketchboard – your starting point? “inspirational material such as personas or requirements are used as a starting point to drive the conceptualization process”
Experience map – typically showing the full concept, official deliverable and usually not sketched
Wireflow – mix between wireframes and user flow
Speech bubbles – used as a starting point per user, or showing the thought processes step-by-step for one particular user, these are annotation elements
1. Gather the inputs:
On the left side of the sheet (label it “Input” and optionally draw a dashed vertical line to separate it from the wireflows that sit on the right-side)
– scope items
– add criteria (requirements/user stories) (
– users (personas, facts)
– success metrics
2. Sketch, sketch, sketch
Start sketching on separate papers
Then sketch full pages using this single-page template (1-up) to “zoom in” on a particular thumbnail idea with slightly more detail
3. Start your sketchboard
– “Once you’re happy with the position and grouping of your sketches, replace the Post-It headings with inked ones – a big chisel tip Sharpie works well (just make sure the ink doesn’t bleed through the brown paper and onto the wall!) ”
4. Share and iterate
– take it to your team in a tube
– take (seperate) notes for feedback (not on the board)
– go back and add summarized changes as annotations to your board
“During the evaluation sessions, annotate your sketches, use Post-It notes, and amend or create new sketches as required to capture feedback, suggestions and corrections”
5. Start wireframing
– THEN make the wireframes and/or prototype on the computer
– Drafting dots (sticky)
– Mobile whiteboards (lightweight, useful if you lack wall space) or large piece of cardboard
Types of deliverables WP post
http://konigi.com/book/sketch-book/work-fast TIP videos
More videos @ http://lanyrd.com/search/?q=sketchboard
Ideas, tools, alternatives
A.K.A. : Mindmap, wireflows, wiremaps, user flows, customer flow, user journey, concept maps, ux flow, ux flowchart, and sitemaps.
Prezi is a less linear, more free-form and animated way of telling a story. Alternatively, zoom in manually in powerpoint, or another way to easily navigate in a large canvas.
Collaborative design workshops
“For complex products, it’s helpful to understand the system at a high level, before anything gets fully designed, prototyped, or built. I like to call this method of flowcharting “wireflowing”. It’s a hybrid of traditional sitemaps, flowcharts, and wireframes. The benefit is that you can start to make UI-level decisions & establish consistent patterns quickly, while maintaining a relational understanding of how everything fits together.
More tips in dashboard design and information design (info visualisation), design for simplicity, etc.
The main focus should be a self-explanatory journey that can be easily shared.