Design awesome mobile-first websites with responsive prototyping
Responsive design, parallax prototyping and the power to design impressive desktop and mobile experiences. Now the only limit is your imagination
We’re seeing in the New Year and with it a new resolution to up our responsive design game. We know that designers are challenged with building more responsive interfaces and experiences than ever before. In fact, 51% of users now access internet on their mobile device, compared to 42% on desktop, which means your content needs to be mobile responsive.
Safe to say, if you aren’t designing responsive webs, you aren’t really designing for users. We get it. That’s why we’re excited to bring you the latest version of Justinmind, with brand new responsive design and parallax features to help you lick this year’s UI/UX challenges.
Read on to explore Justinmind’s new features and start designing better.
Responsive prototyping that’s pixel-perfect
Last year saw mobile browsing become more popular than ever. And with no signs of stopping, 2018’s UX and UI designers will have to prioritize responsive design in order to compete in the mobile-first landscape.
While there is demand for mobile-first sites, mobile responsive design is not an easy task. Design tools don’t always measure up to the responsive challenge, and designers are faced with messy workarounds to accommodate content on smaller screens.
That is, until now. With Justinmind’s latest release, designers can easily prototype responsively for web and mobile in just a few clicks. Our drag & drop screen design interface helps design teams build pixel perfect responsive design, every time.
With the new version, designers can:
- Scale UI elements proportionally with the new Size “%” attribute, and have them adapt to different screen resolutions or container elements. Elements will scale proportionally both in the editor and during simulation
- Make UI elements resize proportionally even when the screen resolution is changed in Justinmind’s editor
- Scale images proportionally with the ‘Lock aspect ratio’ option
- Pin UI elements to the canvas and have their position adapt to the screen’s resolution or container’s size
- Add adaptable margins between UI elements and their containers
- Create “Move” events with pin-able elements and “Resize” events that scale elements proportionally
- Save UI elements with responsive properties in custom widget libraries and reuse them later on. They’ll retain their responsiveness
No more tool-hopping, no more responsive workarounds. You’re one click away from better responsive design.
Upgrade Justinmind now for the most powerful responsive designs yet
Let your imagination run wild with our new parallax features
Most web design trends come and go, but parallax is one that just keeps going. Parallax scrolling is a great way to keep users engaged and focused on your site’s important stuff. That’s why we’ve made sure designers have just what they need to prototype their parallax websites.
Up until now, Justinmind’s ready-made parallax library made it quick and easy to simulate the parallax scrolling effect in web and mobile prototypes.
But now, parallax prototyping is even more powerful. In addition to Justinmind’s prebuilt widgets, upgrades to the Properties palette give designers total control over the canvas.
With the new “Pin” attribute – available for all UI elements – designers can not only fix UI elements to the canvas, they can also choose their position down to the last pixel. And with the “Always on top” attribute, designers can ensure that their fixed position elements are always visible to the user. Designers, you have the power!
Give important UI elements the attention they deserve
Convert your site visitors into customers by making sure that essential elements, such as buttons, search bars and sign up forms, are clearly visible to the user.
There’s nothing worse than users scrolling right past an important Call to Action button because it doesn’t stand out from the surrounding content.
With this new release, designers can set background images for UI elements to make them more noticeable. Use this feature to add a background image, or as an overlay/cover image for a UI element. It’s as simple as selecting an image and then choose how to align the image. The image’s transparency can also be customized for improved contrast and visibility.
Improvements to your prototyping tool
And that’s not all. This new version has a few more improvements for a faster and smoother prototyping experience:
- Justinmind for Mac now uses Chromium for seamless simulation of prototypes
- The Chromium simulation window now launches with the same resolution as the prototype’s canvas by default (e.g. if simulating an iPhone Plus prototype, Chromium will take on the iPhone screen’s resolution)
Creatives take on a lot. But with the perfect toolkit, you can be the designer you want to be. Upgrade Justinmind today and design your best parallax websites and mobile responsive sites yet!
Looking for a full guide to responsive design? Check out our Introduction to Responsive.