Step up your design game with these 6 tips to make your prototyping tool more powerful, efficient and personal. The first of a two-part special
The quality of a user’s experience is the main contributor to great web design. Design teams are constantly working towards making each and every user interaction as efficient as possible. Well we think the design process should be just as efficient – after all, happy designers make better products. So make the most of your Justinmind prototyping tool and design better with these handy design tips for web and mobile.
1 – Use a grid to create structure
A grid helps you to create a basic structure – or skeleton – that supports the overall composition of a screen. They will help you find proportion and balance in the layout of the screen and make sense of the chaos of UI elements, particularly in the initial stage of the design.
Half the battle is starting off on the right foot in web and mobile design – and there’s no singularly correct approach. All designers have their own rule of thumb when it comes to filling up a blank canvas. Pre-defined grid layouts are common in many design tools – for example, the 1200 pixel grid is commonly used by web designers. But being able to customize the layout of your grid in your design tool gives you the freedom to design your way from the very beginning.
With Justinmind, you can choose to work with or without the grid structure and can change the size of the grid open creating a new prototype. Choose from predefined layouts or customize the grid width and height as needed.
2 – Create container UI widgets to better organize your design space
Create containers for your UI elements, such as headers, navigation bars, buttons, etc. Containers help maintain the hierarchical structure of the UI elements, and creates a parent-child relationship between container and element – making it easier to organize your assets on-screen.
Justinmind has an entire collection of container widget that hold components such as eDocs, links to websites or flash files. Justinmind’s container widgets include:
The table widget, in the form of a grid or table, which holds text and images.
The HTML widget allows you to embed a webpage or website in your prototype. No code knowledge required, simply copy and paste the code into the HTML field, and voilà!
3 – Include readymade UI assets to avoid rework
Pre-built UI assets, such as buttons, forms, input elements, navigation bars and screens are designed to facilitate easy working and avoid rework. Why repeat what’s already been made for you?
With Justinmind, choose from over 2000 pre-built widgets, icons, and UI components and elements in line with Google, iOS, Android, Windows and Bootstrap frameworks, and many more. According to the prototype template that you choose to start working on, your Justinmind editor will be pre-loaded with the corresponding icons within a UI library. You can download the entire collection of UI libraries here.
4 – Use templates and masters to reuse content and spread global changes
Consider using templates and masters to make it easier to maintain brand consistency and save time in your design process. Templates centralize content and interactions distributed by several screens, and masters replicate and distribute content across all of a prototype’s screens, in all instances, in order to save time and distribute global changes.
Templates are handy for when you want to use the same or similar content across multiple pages in a prototype. They set default styles, such as borders, text font or colors. Use them to avoid repeating your work by reusing content (a text box for example), styles (the font family, size and color of your text box) and interaction and animation (in the form of events).
In Justinmind, you start off with a default template and can create your own as you go along. When you have all the elements you wish to duplicate, create a template and place them there. Then, create your additional pages, selecting your chosen template each time. The UI elements, styles and the events that you include in a template are distributed among all the screens that you apply that template to.
Masters are essentially groups of components that can be used anywhere in your prototype. They are for applying global changes to your designs, as any change to the master spreads over all its instances in the prototype.
For instance, say you make a change to a menu option in one screen and you want to apply that change to all your screens’ menu options. Simply create a master with this element and make your change – it will be made to all instances throughout the prototype. You can edit the content within a master directly in the canvas, dragging widgets and events as needed. When your master is ready, simple drag and drop it from the Master list to the canvas. If you need to make additional changes, just click on the relevant master from the list to open the dialog. And remember, you can break them down into individual components and modify them piece by piece.
5 – Use dynamic panels to avoid clutter
The dynamic panel is another type of container widget, with so many benefits that it deserves its own section!
Use the dynamic panel as a container for smaller elements. Place other widgets inside a its to group them together and move them easily around the canvas or different screens.
Additionally, use the dynamic panel to simulate navigation effects without the need for additional screens. By separating content into separate panels, you can consolidate information on-screen and add styles and events to different elements without having to separate them into individual screens. Here’s an example of how we used dynamic panels instead of multiple screens.
6 – Add links and hotspots to make your prototype interactive in a flash
Make your prototype interactive with minimal effort with link events and the Hotspot widget.
Links helps users to navigate from screen to screen in your prototype and contributes towards the overall user journey. Being able to add these links in your prototype will allow you to simulate and test out the user journey and each touch point before moving further along. Creating links in your Justinmind prototypes is simple. Drag and drop the source element to the target element/screen to create a link between the two in a matter of seconds. To create a bidirectional link, simply, drag the target back to the source.
Hotspots allow you to create invisible hyperlinks or define an area on screen that will allow you to jump to another page. Usually, hotspots are invisible but when you hover your mouse of the area where the hotspot has been placed, the mouse cursor changes to a little hand to signify that the area is clickable. Justinmind has its very own hotspot widget to help you define events quickly and easily. Place it on top of any element to make the element clickable.
Tune in soon for the second half of this post that explores the use of data-driven prototyping, CSS palettes and requirements management to speed up the design and development processes.
Download Justinmind to take advantage of a prototyping tool that gives you a break. Already a Justinmind user? What are you waiting for?! Get the tool open right now and test out our nifty time-saving features now.