Design Mockups: Of2 With Improved Clarity

Improving the process flow and increasing the clarity of my mobile app. Gui-design mobile notification mobile-application mockup. Share improve this question. Asked Feb 9 '14 at 19:03. We could give you pointers or give examples in the form of mockups we make ourself, but that's just another opinion from another designer or ux. Display improvements first introduced in the 9.7-inch iPad Pro, including the True. Design changes are not expected for the next-generation Apple Watch, but. New Mockup Shows What the Rumored 'Space Black' iPhone 7 Plus Might Look Like. Also allows users to zoom while retaining more clarity, the person added. Styles of H1 to Hx and content blocks to be improved The design should become more modern We are using Modx CMS with ModMore ContentBlocks. So these blocks are the smallest unit, where design styles can be applied. - The site is responsive. Mockup for regular screen size and for smartphone is.

1. Design Mockups: Of2 With Improved Clarity 2

I have a screen which allows the user to capture bank account information (+ the account information is for someone that the user wishes to pay, either now or later - this is a banking context, not e-commerce) and then choose what to do with that information. The options are either pay or save or both. (+ the user may not be paying at this point so a solution that requires immediate payment will not work) In my prototype (used for concept testing) I have represented these as 2 checkboxes. The user must select 1 or both. The interaction is clumsy and I'm looking for a more elegant solution.

The immediate requirement is for Web (desktop and mobile) but there may be a requirement for native app as well. Any suggestions would be appreciated. Perhaps the following can get you thinking about the interaction flow. The way I see it, you have a collection of existing options, or the option to add a new one. This list is accessible via the Saved Options button. This will trigger the modal window as shown in the second mockup.

Saving a set of payment options is an available feature, but not required for a user to continue, so you can have that logically grouped with the data input rather than near the page-ending, finalizing controls for the page (i.e. The Pay Now button in this example). The Save Payment Options button should be a button because it triggers an action immediately-adding to the Saved Options list-but doesn't navigate away from the page. Clicking Use Selected from the modal can just prepopulate your form for you.

I'm not sure what fields you're dealing with, but hopefully this will help get you started. – Wireframes created with.

Elect one operation to be the main one. The screen will be about it, and the other one will be also possible. This way the screen won't be clumsy, understanding it will be immediate. Then let the user do any of the two operations later whenever they want (i.e, pay from a contacts list or save a contact from the history of payments). That's the same situation of dialing a phone number on the cell phone. Usually it offers three options: create new contact, send an SMS or call to the dialed number.

The interface has a clean design because the call button is proeminent, green, light, with an icon instead of text and is already there when the interface is shown (as you expect to be in a phone dialer); the other options are shown after you dial the number, along with auto complete suggestions, appart from the main option (green button 'call'). And if you want to save the number after you have called to it, you can do it from the call history. This answer has been updated. If this choice is the primary action for this screen I would use buttons labelled with the available options instead of checkboxes. The buttons should read pay and save payee, pay, save payee.

You would also need to throw in a cancel button if the screen doesn't have an exit mechanism. However by offering three options, you are combining two operations that should probably remain separate. To make the interaction less clumsy you could separate these two operations. I think this flow might help:. After information is captured provide pay now and pay later buttons. When the user selects pay now inform them that the payee has been paid and provide them with save payee and done buttons.

When the user selects pay later inform them that they can choose to save the payee (possibly also include steps to pay a saved payee). Again provide them with save payee and done buttons.

Is the go-to UI of choice for many people working in the design industry. What you might not know is that there's a diverse and powerful community of people working to extend Sketch's functionality and features by building custom plugins. In this article, we'll share some of the best Sketch plugins. The good news is that the management of your Sketch plugins is even easier now. Plugins update automatically and outdated ones are disabled, plus a string of other small but highly intuitive improvements have been made. Making the plugin ecosystem even more useful is, a file-sharing service that anyone can sign up for, where you can view, download and comment on Sketch documents that have been shared publicly, or privately straight from Sketch.

So let’s take a look the best Sketch plugins around – the ones that could drastically change the way we design user interfaces. Once you've spotted one you'd like, read up on how to install. This Sketch plugin helps you manage design systems. Price: Free. Summary: Render React components to Sketch Managing design assets can in Sketch can be difficult. This handy Sketch plugin provides an easier, more reliable way to manage your assets. Implement your designs in code as React components, then use this plugin to render them into sketch.

It also makes it easier to fetch and implement real data into your Sketch files. React Sketch.app was developed by Airbnb for use with its design system, with the aim of helping to bridge the gap between designers and developers. Price: Free. Summary: A Git client built into Sketch This plugin aims to bring version control into Sketch. It works by exporting an image for every part of the design, then generating pretty diffs so it's clear what changes have been made. By documenting each step of the design process, everyone on the team can see the how the design has progressed.

Git Sketch Plugin was created by, who has since moved on to creating a more comprehensive, paid version control system called. Price: Free. Summary: Responsive design for Sketch Group Resizing is a native Sketch feature that enables you to change the way objects react when your artboards or parent groups are resized. Auto Layout, built by, takes this functionality a little further.

Design Mockups: Of2 With Improved Clarity 2

Where Group Resizing lets you create fluid elements and pin objects to a corner (think::fixed positioning in CSS), Auto Layout also lets you offset elements by a certain number of pixels, define minimum and maximum dimensions for elements (think: min-: and max-: in CSS) and do everything that Group Resizing allows you to do but with a much less confusing UI. Launchpad is an efficient way of converting.sketch designs into static HTML websites. Price: Free.

Summary: Convert designs to static HTML webpages offers an ultra-simple way to convert.sketch designs to static HTML webpages. It's from the same people who created Auto Layout, and in fact you can combine these two Sketch plugins to export responsive.sketch designs as HTML. LaunchPad doesn’t export a ‘finished’ design – you’re still expected to fine-tune loading times, tweak the code to ensure your design responds properly to different screen sizes, and optimise the code output to ensure the site loads quickly and runs smoothly.

However, it does give you some pretty solid foundations to work with. After trying Launchpad out with a couple of low-fidelity mockups, I can see that the output is relatively simple, so there's no need to worry about bloated code. ImageOptim brings a sophisticated image optimisation workflow.

Price: Free. Summary: Image optimisation in Sketch While Sketch offers its own for optimising SVG files, there is no range of options for compressing JPG and PNG images. Since has been offering a solid service for a number of years, it makes sense that it would bring this functionality to Sketch. Any designer who cares about loading times and image optimisation (which should be all designers) should add ImageOptim to their toolbox. Note that as well as the plugin, you'll need the core (free) installed on your macOS system, and you still need to mark layers as exportable in Sketch (navigate to ‘Export and Optimise All Assets’ to begin). Price: From $4/mo.

Summary: Image perspective transformation tool If you're trying to make impressive product but have to keep jumping into Photoshop to deal with the tricky stuff, Magic Mirror could be a life-saver for you. It's an image perspective transformation tool, enabling you to create perspective mockups and other distorted effects without ever leaving Sketch. Make Mac-ready icons and animated GIFs with Export More.

Price: Free. Summary: Export Mac-compatible icons and GIFs Previously two different plugins – Generate ICNS and Generate GIF – Nathan Rutzky's brings them both together in a single package that addresses a couple of glaring holes in Sketch's export options.

With it you can export icon designs as Mac-compatible ICNS files, and create simple animations that you can export as GIFs, all without ever having to step out of your Sketch workflow. This Sketch plugin is ideal for embracing the renewed enthusiasm for – while you could use for or for your GIF design, you don't necessarily need a full-featured Adobe app, especially when creating relatively simple animations. Export More treats each artboard as an individual frame and combines them together.

You can then choose whether to have the GIF play once or on a continuous loop. Navigate to Plugins Export More Artboards to GIF, choose the desired playback method (default or loop), then select the desired frame rate. Fancy using Bill Murray as a placeholder image?. Price: Free. Summary: Automatically generates placeholder images Adding placeholder images to a design is a necessary part of prototyping, but finding the actual images can be a pain. So rather than waste any time on it, leave it all to Day Player. This allows you to add customised placeholder images to any Sketch document, from a number of different placeholder image services, so the biggest decision you'll have to make will be whether you want to use Bill Murray, Nicolas Cage or kittens.

Sketch Runner is macOS’ Spotlight equivalent for Sketch. Price: Free. Summary: Spotlight for search Sketch is well-loved for its minimalist keyboard workflow. That being said, there’s always two or three keyboard shortcuts that you always seem to forget or confuse with another design app like Photoshop – and let’s not forget those less common tools and features that don’t have a keyboard shortcut and are hidden deep in the Sketch menu. Sketch Runner solves these issues and does so in a way that macOS users are familiar with – Sketch Runner is the macOS Spotlight, but for Sketch. Icon fonts in Sketch. Price: Free.

Summary: Manage icon fonts Icon fonts are a highly efficient way of using icons in your web designs without having to export and optimise a ton of image assets. Typically we reference icon fonts in the section of HTML webpages, as we do with CSS and JavaScript. However, using them in Sketch is a little more complicated. Thankfully, Icon Font makes it easy.

After downloading and installing Sketch IconFont, download SVG font files or download this, which includes the font files for FontAwesome, Material Design Icons, Ion Icons and Simple Line Icons. When you’re done, navigate to Plugins Icon Font Install a Font-Bundle, select the downloaded fonts from the Open File dialog, then navigate to Plugins Icon Font Grid Insert your desired icon font in order to insert an icon. Even if you’re intending to design a custom icon set for your design, having ready-made icons at your disposal can help you with rapid prototyping in the early stages of design, adding a little more clarity/fidelity to your low-fidelity mockups. Price: Free. Summary: Find and replace text in selected layers Text editors aren’t the only place you need find and replace – it’s useful in Sketch, too. This plugin has lots of advanced options, and it enables you to search for instances of particular words or phrases in the text in selected layers (and everything contained within), then replace it easily.

Next page: More time-saving Sketch plugins.