![\"image06\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image06.jpg\")
<\/p>\n![\"the](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/the-book3.png\")
<\/a><\/figure>![\"Mobile](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Mobile-UI-Design-Patterns.png\")
<\/a><\/figure>![\"unnamed\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/unnamed-262x375.png\")
<\/a><\/figure>![\"book](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/book-knowledge1-262x375.png\")
<\/figure>Do you want to know more about UI Design?<\/h3>
Download 'Meaningful Mobile Typography' FOR FREE!<\/span><\/p>Download e-book for free<\/a><\/article><\/section>Close<\/a><\/section> Hi-fi mockups can be great when you get close to a finalized design. But when you\u2019re trying to iterate quickly, learn what works and doesn\u2019t work, they can be a hinderance. <\/p>\n Other than being able to change course swiftly, there are a few other reasons for not using hi-fi mockups when we\u2019re in the early stages: <\/p>\n Once the base style is established, sketches become efficient blueprints for repeatable elements. <\/i>Photo Credit: Fairhead Creative<\/a><\/p>\n With the base design established, time spent re-applying them to every additional page is time could be spent focusing on what makes them unique, rather than what makes them the same.<\/p>\n For additional pages, consider mocking up only what sets them apart – the unique assets, how content is placed into the base design – only what is essential for you to determine an effective layout, and for stakeholders to get a sense of that too.<\/p>\n This way, page mocks become blueprints, with which you and stakeholders can act quickly on.<\/p>\n Now we\u2019re considering doing away with high-fidelity mocks for every page, let\u2019s talk about medium-fidelity.<\/p>\n Once your low-fidelity, sharpie-level imagery is a hit, consider going with a medium fidelity before high-fidelity or writing any code. Remember, as soon as you go high-fidelity, everyone\u2019s going to be concerned with kerning, line heights and colors. The focus of the work will tend to shift toward micro details rather than the larger user experience problems. <\/p>\n Photo Credit: Fairhead Creative<\/a><\/p>\n Using a prototyping or wireframing tool, such as UXPin<\/a>, allows you to stitch together pages of real content for clients to experience without those distractions.<\/p>\n Much like lo-fi mocks, you aren\u2019t committed to the details in \u00a0medium fidelity. There\u2019s still an opportunity to change course. You can rearrange things without having to toss out a bunch of code or visuals. And you\u2019ll keep everyone focused on the bigger picture rather than the minutia.<\/p>\n As I mentioned in my article on TheNextWeb called “5 UX mistakes that make users feel stupid<\/a>\u201d, new ideas are definitely worth exploring, but not when creativity loses sight of usability.<\/p>\n You can speed up your responsive design by using design patterns: solutions to common design problems that appear again and again that users are already familiar with. As shown in the quick prototype below built in UXPin<\/a>, think about the hamburger icon that reveals a navigation drawer \u2014 that\u2019s a common design pattern in responsive design .<\/p>\n Photo Credit:\u00a0UXPin<\/a><\/p>\n The beauty of design patterns is that they give us many out-of-the-box solutions, such as a \u00a0dropdown menu, checkboxes, radio buttons, and underlined hyperlinks, just to name a few. Extending these patterns to familiar navigational structures, iconography and scrolling behavior is a great way to speed up design while also making visitors feel right at home on the finished product.<\/p>\n You should strongly consider leveraging any standard patterns and elements that your site\u2019s target audience is familiar with, rather than recreating them. More often than not, you\u2019ll want users focused on things other than what your icons mean. Things that your design is supposed to shine light on, such as signing up, checking out, or registering interest.<\/p>\n If you want to see some of the more popular mobile UI patterns being used, check out the free e-book Mobile UI Design Patterns<\/a>. <\/p>\n And I don\u2019t just mean staying up to date with Photoshop software updates. Really, that\u2019s the least important part.<\/p>\n Make sure your tools are in good condition. Specifically, make sure you have the pens you need, that they aren\u2019t running dry, that you have plenty of paper and post-its to hand, and so on. Whatever you need.<\/p>\n It may seem silly to think about replenishing your pen and paper supplies \u2026 that is until you reach for one of them to sketch an idea and find that you\u2019re out. <\/p>\n Use different types of devices in real life. Specifically, the ones that your target audience is using.This varies from website to website, but Google Analytics will reveal the usage trends for your audience\u2019s preferred device types.<\/p>\n The very latest iPhone is lovely. But the web is for everyone, and not everyone has your screen, your processor, your proficiency. This is especially true for web designers: your level of passion for technology may not be reflected in the audience you\u2019re designing for.<\/p>\n One way to get into your users\u2019 heads is to create personas. As outlined in The Guide to UX Design Process and Documentation<\/a>, personas are a great way to understand how and why someone would use your product.<\/p>\n Photo Credit: UXPin<\/a><\/p>\n A persona can help frame your design decisions with their added real-world considerations. That being said, personas shouldn\u2019t represent all audience or address all the needs of your product. Instead focus on the main needs of your most important user group. <\/p>\n You might think that designing for a platform of unknown limits makes easy to push the limits. With the web, that\u2019s not always true.<\/p>\n Users require that web development give them a balance of user empowerment and creative distinction in equal measure. Try to stay abreast of latest design trends and developments so that you can leverage them, such as cards.<\/p>\n Photo Credit: Vox<\/a><\/p>\n A few things to keep in mind when using trend: <\/p>\n You can catch up on all the latest UI trends in the e-book, \u00a0Web Design Trends 2015-2016<\/a>.<\/p>\n As I mentioned some previous articles, designers should\u00a0stop chasing screen resolutions<\/a>.<\/p>\n Photo Credit: Fairhead Creative<\/a><\/p>\n What this means is, your assets need to be prepared specifically for each use case. But some assets can scale naturally without load time penalties.<\/p>\n Logos, icons, light animations and simple background images can all benefit from SVG graphics over raster graphics. In most cases, a properly optimized SVG ends up being many times smaller than a conventional raster alternative.<\/p>\n Vector graphics, when presented inline, can even be animated and manipulated using CSS. Just be sure to provide raster fallbacks<\/a> if your developer needs inline placement.<\/p>\n Your number may vary, but I like to think that any important data should be accessible within 10 seconds of me deciding I want it.<\/p>\n If it takes longer than that, it feels like it\u2019s \u2018away in the vault\u2019, and I\u2019ll be less likely to rummage through it unless it\u2019s \u201cimportant.\u201d<\/p>\n Inspiration may strike when you\u2019re not pro-actively seeking a very specific \u201cimportant\u201d piece, and so the closer you keep your research, the more you\u2019ll use it, and the more effective it\u2019ll be.<\/p>\n There we have it – ten shortcuts to speed up your next responsive design project. Now, here\u2019s a bonus step.<\/p>\n This bonus step may just save you more time in your responsive designs than all of the others combined.<\/p>\n And it\u2019s also the simplest.<\/p>\n Here it is:<\/strong> stop your search for more responsive design shortcuts, and start designing more. The more you design, the better and faster you become. The more proficient you\u2019ll become with your tools. The more ideas you\u2019ll have to explore for each design. All of your work will benefit from your increased focus on the doing, rather than the reading-about-doing.<\/p>\n It\u2019s time to go get started on that next responsive design.<\/p>\n If you found this article helpful, check out our free e-book on Responsive and Adaptive Web Design<\/a> that dives deep into mobile-first design and best practices.<\/p>\n3. Don\u2019t Use Mockups of Every Single Page<\/h2>\n
\n
\n
\n
![\"image01\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image012.jpg\")
<\/p>\n4. Speed Up Medium-Fi Work With Tools Like UXPin<\/a><\/h2>\n
![\"image07\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image074.png\")
<\/a><\/p>\n\n
\n
\n
Join the world's best designers who use UXPin.<\/h2>Sign up for a free trial.<\/span>Try it for free!<\/a><\/section>\n
5. Don\u2019t Try to Reinvent the Wheel<\/h2>\n
![\"\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/image06.gif\")
<\/p>\n\n
\n
6. Look After Your Tools<\/h2>\n
![\"image02\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image02.jpg\")
<\/p>\n\n
\n
\n
7. See the World Through the Eyes of the End-User<\/h2>\n
\n
\n
![\"image05\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image057.png\")
<\/p>\n8. Keep Your Finger on the Pulse of Modern Development<\/h2>\n
![\"image00\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image00.jpg\")
<\/p>\n\n
\n
9. Use Vectors Where Appropriate<\/h2>\n
![\"image04\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image043.jpg\")
<\/p>\n\n
\n
\n
10. Keep All Research Within 10 Seconds Of Reach<\/h2>\n
\n
\n
\n
Conclusion<\/h2>\n
![\"tw-promo\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/tw-promo.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"