Mockplus

This article curated some of the most recommended design posts in 2016, such as the principles, books, and tools helpful on UI/UX design, methods and suggestions on how to make better design, as well as the new design trends.1. The State of UX in 2017We are looking forward to how UX will evolve in 2017. In the meantime, here's our take on looking at the past, understanding the present, and anticipating what the future holds for UX.2. Why DesignIn some ways, this knowledge is bittersweet. Nothing gold can stay. You make a thing that changes the world, and before long the world has changed to the thing. It no longer inspires the same kind of wonder. Given time, we will always demand more.3. Design Better FormsWhether it is a signup flow, a multi-view stepper, or a monotonous data entry interface, forms are one of the most important components of digital product design. This article focuses on the common dos and don'ts of form design. Keep in mind that these are general guideline and there are exceptions to every rule.4. Design Doesn't Scale.Design Doesn't Scale is a statement that has bothered me for the last four-years. When I joined Spotify's design team in 2012, the level of inconsistency and fragmentation shocked me. Up-close, the treatment of type, color, imagery, layout, IA, and interactions just didn't seem to align anywhere. And when I started talking about it, I realized the whole team was frustrated too. We concluded that the fragmentation in the product was just reflecting the fragmentation in the team, that designers spread across so many different projects, timezone and competing timetables, just didn't stand a chance. And, after all, weren't these factors inherent in all modern tech companies anyway? It was then that I first heard myself say, “Design Doesn't Scale”.5. The Difference Between UX and UI Design-A Layman's Guide (by Emil Lamprecht)We've all overheard conversations, walking down hip streets of the world's tech capitals, discussions about the great 'UX' of a product, or the poor 'UI' of a website. Is it a secret language you will never be privy to? Are these people just using slang to look cool? Well, ok probably yes to the latter, but a determinate NO to the rest. Read on to learn what these terms mean, which jobs are better paid, and how to become a UX designer or UI designer. Scroll to the middle of the post to watch a video of me speaking about this article, and giving you some extra info on what being a UX or UI Designer really means.6. Complexion Reduction: A New Trend In Mobile DesignOver the last several months, some of the leaders of innovative design have taken 'minimal design' to the next level. Facebook, Airbnb and Apple have followed a similar blueprint to simplify prominent products in a way that reflects this new trend of 'Complexion Reduction' in mobile design.7. UX vs UI vs IA vs IxD : 4 Confusing Digital Design Terms DefinedOnce upon a time, if you said the word “design”, the odds were overwhelmingly likely you were talking about graphic design. But nowadays, the digital world is becoming increasingly more complicated and a lot of new job positions appearing, which lead to confusion for people outside or new to the design industry. Here's a quick overview on the four different primary forms of design to help you understand what they mean.8. Hamburger menu alternatives for mobile navigationIf you're working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.)9. How to apply a design thinking, HCD, UX or any creative process from scratchThis how-to article aims at providing designers, creative thinkers or even project managers with a tool to set up, frame, organise, structure, run or manage design challenges, and projects: The Double Diamond revamped.10. Best Practices for MicrointeractionsMicrointeractions are subtle moments centered around accomplishing a single task. Almost all applications around us are filled in with microinteractions. Here are just a few examples:Confirming an item is added to cartUse pull-to-refresh to update contentInterface animation that confirms an action (e.g. toggle button)11. The Best UI/UX Design Books & Resources for DesignersWant to be an excellent designer? Looking for the best UI/UX books and resources? Nowhere to go or to gain the right and effective channel for becoming an outstanding UI/UX designer? Just follow me, I have compiled a list of high-profile UI/UX books, which are recommended by the major professional websites, and blogs.The topic is mainly covering UI design, UX design, and web design. Hope it is helpful and useful to you. Any resource you think it's worth to be included, please feel free to give a message below the comment area or simply drop me a line on LinkedIn.12. 12 Design Tools & Websites for UI/UX DesignersThe continuous improvement of designing tools, have a positive impact on usability and user experience, that provides great convenience for designers, as well as the users. Therefore often a good web designer will try to be updated with frontier, and master the latest tools. Hundreds of design blogs and websites update design articles, share design skills, and recommend new tools today on the internet. That is the important source of information for designers.13. Unintuitive Lessons on Being a DesignerI sometimes joke that everything I have ever learned about design, I learned from my first job. Nowadays, this first job has extended to nearly ten years, its soul consistent even as its shape unfurls in depths and colors I could never have imagined in the beginning.You May Also Interested in:16 Design Books Every Designer Should Read in 2017Information Is Money: 10 Best Web Design Blogs You Must ReadPrototyping Design Tutorial Roundup: Best Video Tutorials100 Excuses for Designers -- Because sometimes you need one! (by Jon Moore)What Kind of Prototypes and Design Tools You Need for Your Audience?

How Much Are You Worth? UI/UX Designer Salary Around the World

Want to be an excellent designer? Looking for the best UI/UX books and resources? Nowhere to go or to gain the right and effective channel for becoming an outstanding UI/UX designer? Just follow me, I have compiled a list of high-profile UI/UX books, which are recommended by the major professional websites, and blogs.The topic is mainly covering UI design, UX design, and web design. Hope it is helpful and useful to you. Any resource you think it’s worth to be included, please feel free to give a message below the comment area or simply drop me a line on LinkedIn.UX Books for Entry-level Designers (Books with PDF link)1. The Design of Everyday Things - By Donald A. NormanIt shows a teapot on the cover of the book, the teapot spout and the handle at the same side, if you tea, you are likely to burn yourself. What Norman want to tell you, the life is hard, often the "bad design" should be blamed. To learn interaction well, you must understand what’s the design requirements from people at first. As Steve Jobs said, “Design is not just what is looks like and feels like. Design is how it works.” The ultimate purpose of the designer is to make useful products, not just good-looking.2. Don’t Make Me Think - By Steve Krug"Characters of this book, the first one is short and pithy, 200-page length, not wordy at all. You may put it devoured on a noon, perhaps before going to sleep, even on the plane, or on your way to work. (It’s more likely to read through it on the love when you get the book) " Therein, which stresses the three laws of Web Usability, the first one is - do not let me think.3. The Non-Designer's Design Book - By Robin WilliamsInteraction designers must learn the basic knowledge of typography, no aesthetic, you can not be a good designer. In this ubiquitous creativity era, you have to make yourself be a designer.In the eyes of Robin Williams, the design is quite simple. The book covers the four graphic design principles of C.R.A.P(Contrast, Repetition, Alignment, and Proximity), with concise, humor, and vivid language recounts the how much the changes and visible benefits brought by using these principles flexibly. In addition, it also introduces some basic knowledge about color and font, making the content more completely.UX Books for Advanced Designers (Books with PDF link)1. The Elements of User Experience - By Jesse James GarrettIf all you need is a book to teach you “how to design”, there are many, many books discuss how to build a website, but this one is not you wanted. If all you need is a book to tell you about technology, you can not find a line of code here. If you want to find an answer in this book, on the contrary, this book teaches you “how to ask the right questions.”This book will tell you what you need to know in advance before you read other books. This book is for you, if you need a great concept, and if you need to understand the environment that user experience designers make decisions.2. A Project Guide to UX Design: For user experience designers in the field or in the making (2nd Edition) - By Russ Unger & Carolyn Chandler“If you are a young designer entering or contemplating entering the UX field this is a canonical book. If you are an organization that really needs to start grokking UX this book is also for you.”-- Chris Bernard.）3. Communicating Design: Developing Web Site Documentation for Design and Planning (2nd Edition) - By Dan M. BrownSuccessful web design team relies on good communication between developers and customers, but also inseparable from communication within the development team members. Dan Brown will teach you through this book, wireframes, site maps, flow charts and other design established a common language. Through it, the designers and project teams can capture ideas, track progress and always allow stakeholders to know the latest situation of the project.4. About Face: The Essentials of Interaction Design- By Alan Cooper, Robert Reimann, David Cronin, Christopher NoesselAs one of the must-read classic books, About Face series are worth the time to read, and each version is very valuable. As one of the instrumental books, AF brings interaction into the daily language of product design and development. Which is a comprehensive guide on interface design and interaction design of web and mobile devices. This book covers the best practices of project progress, goal-oriented design, persona development. For beginners who have no project experience, it may be very difficult, but still worth reading. We recommend cursory read at the first time and then study the rest part carefully when needed, because it involves too many details."If Norman is an old man telling stories, Krug is a crash expert let you simply entry design, while Cooper is a scholar, researcher, designer."UX Websites & Blogs1. LukewLukew, a senior UX expert on digital product leader who has designed and built software used by more than one billion people worldwide also the founder of several companies.2. Smashing MagazineA comprehensive website provides high-quality articles with the UX employee on Design, Coding, Mobile, and Word Press etc.3. UXboothA professional UX website. The difference between it and Smashing Magazine is that UXbooth focuses more on the aspect of user experience design.4. Mockplus BlogIt’s a new blog with very simple and clean interface, no more distraction from advertisements or others. Articles are all surrounding the topics of design tools, UI/UX design, web design, and mobile app design. A good design topic resource to follow.Books Recommended by readers:Mental Models (by Indi Young)Practical Empathy (by Indi Young)The Inmates Are Running the Asylum ( by Alan Cooper)Rocket Surgery Made Easy ( by Steve Krug)Designing for the Digital Age (by Kim Goodwin)Start with Why (by Simon Sinek)The UX Book: Process and Guidelines for Ensuring a Quality User Experience (by Rex Hartson, Pardha Pyla）Interaction Design: Beyond Human - Computer Interaction (by Preece, Sharp, and Rogers)Measuring the user experience (by Tullis and Albert) (If you want to know more about the quantitative side)Research Methods in Human-computer Interaction (by Jonathan Lazar and Jinjuan Heidi Feng)Handbook of Usability Testing 2nd Edition (by Rubin and Chisnell) (If you want to dig deeper into how to conduct usability tests, but may also be a bit for interviews).You may also interested in The Best Mockup & Wireframing Design Tools & Apps for UI/UX Designers

Быстрое взаимодействиеИнтерактивный дизайн проще, чем когда-либоИнтерактивный дизайн в Mockplus полностью визуализирован благодаря WYSIWYG-редактору. Создание интерактивных прототипов происходит без особых усилий с помощью простого перетаскивания. Набор готовых компонентов дизайна включает обычные и всплывающие панели, полосы прокрутки, выдвижные элементы и карусели изображений, что позволит вам создать свой продукт быстрее и проще.Быстрый дизайнСоздавайте прототип на профессиональном уровне, используя множество заранее разработанных компонентовВ Mockplus уже есть более 3,000 готовых иконок и около 200 других элементов. Просто перетащите нужный элемент в рабочее пространство и используйте его в любых комбинациях для реализации вашей собственной идеи всего за пару минут. Сфокусируйтесь только на самом дизайне и не тратьте время на создание компонентов.Быстрый предварительный просмотрМгновенный тест на реальном устройствеОтсканируйте сгенерированный QR-код, чтобы тут же увидеть прототип на реальном устройстве. Удаленная публикация или USB-кабели не нужны. Чтобы получить отзывы от членов команды или ваших друзей, делитесь своим прототипом и передавайте его с устройства на устройство в автономном режиме. Синхронизация с облаком делает предварительный просмотр на мобильных устройствах намного проще и экономит время.Никаких кодов, сразу приступайте к работеСосредоточьтесь на самом дизайне, а не на инструментах. Сразу приступайте к дизайну прототипа, пропустив длительное изучение тонкостей создания компонентов и не тратя время и деньги на профессиональную подготовку. С Mockplus вам не нужно разбираться в программировании, а тем более – в кодах. Быстрый предварительный просмотрМгновенный тест на реальном устройствеОтсканируйте сгенерированный QR-код, чтобы тут же увидеть прототип на реальном устройстве. Удаленная публикация или USB-кабели не нужны. Чтобы получить отзывы от членов команды или ваших друзей, делитесь своим прототипом и передавайте его с устройства на устройство в автономном режиме. Синхронизация с облаком делает предварительный просмотр на мобильных устройствах намного проще и экономит время.Никаких кодов, сразу приступайте к работеСосредоточьтесь на самом дизайне, а не на инструментах. Сразу приступайте к дизайну прототипа, пропустив длительное изучение тонкостей создания компонентов и не тратя время и деньги на профессиональную подготовку. С Mockplus вам не нужно разбираться в программировании, а тем более – в кодах.Быстрое обучениеНикаких кодов, сразу приступайте к работеСосредоточьтесь на самом дизайне, а не на инструментах. Сразу приступайте к дизайну прототипа, пропустив длительное изучение тонкостей создания компонентов и не тратя время и деньги на профессиональную подготовку. С Mockplus вам не нужно разбираться в программировании, а тем более – в кодах.01.Поддержка всех платформВ Mockplus есть все инструменты создания макетов для мобильных (Android и iOS), экранных (PC и Mac) и веб-приложений. Включите воображение и создайте уникальный продукт с чистого листа.02.Эскиз и каркасная модельМожно переключаться между режимами эскиза и каркаса, теперь они оба доступны как до начала работы, так и в процессе создания прототипа.03.Наличие готовых компонентовMockplus позволяет создавать прототипы быстрее благодаря более чем 200 готовым компонентам, которые подходят как для мобильных, так и для веб-версий приложений. Воплощать ваши замысловатые идеи в жизнь стало намного проще.04.Множество компонентов разметкиВ Mockplus представлены 10 самых часто используемых компонентов разметки, включая стрелочки, записки, фигурные скобки и многое другое. Теперь делать пометки в вашем прототипе очень легко.05.3,000 готовых иконок (в полной версии приложения)Mockplus предлагает более 3,000 готовых иконок, и в ближайшее время их станет еще больше.06.Визуализация взаимодействияСоздавайте реалистичное взаимодействие при помощи обычного перетаскивания. Конструировать интерактивные прототипы стало намного проще, чем когда-либо. Вы сможете создать свой прототип от начала и до конца, не имея опыта и знаний в программировании.07.Настраиваемые компоненты взаимодействияУпростите создание прототипов с готовыми компонентами взаимодействия. В Mockplus представлены обычные и всплывающие панели, видоизменяющиеся окна, всплывающее меню, выдвижные элементы, карусели изображений, полосы прокрутки и многое другое.08.Множество функций управления и эффектовВ Mockplus представлено множество простых функций управления, таких как скрыть/показать, переключение контента, всплывающее окно/спрятать окно, перемещение, масштабирование, увеличение, поворот, завершение действия и т.д.09.Последовательное и одновременное взаимодействиеВы можете совершать интерактивные действия как с несколькими компонентами одновременно, так и с каждым по очереди. Более того, каждый компонент может быть задействован и в нескольких мультикомпонентных процессах, и одновременно иметь собственные функции.10.Форма взаимодействия проста в использованииВсего за пару кликов на панели свойств вы создадите прототип с простым взаимодействием. К примеру, меняющийся цвет кнопки при наведении курсора мыши. Создавайте интерактивные прототипы без лишних усилий.11.ШаблоныВы сможете вносить в прототип глобальные изменения с помощью готовых шаблонов, что упрощает и ускоряет процесс создания.12.ИзбранноеСохраните часто используемые компоненты, изображения и страницы в избранное, и в следующий раз вам не придется заново их искать. Это сэкономит ваше время.13.Быстрый просмотрНажмите клавишу F5 для мгновенного просмотра прототипа. Больше не нужно тратить время на конвертирование в HTML-версию.14.Экспорт в виде изображенияMockplus позволяет легко экспортировать прототип в виде изображения форматов PNG/JPG. С помощью настраиваемых параметров вы можете экспортировать нужную вам часть проекта. Например, текущую страницу, текущую группу или весь проект целиком.15.Экспорт демо-версииВы можете экспортировать прототип в формате .exe для Windows или .app для Mac OS X. Ваш проект будет доступен для просмотра на других устройствах без установки Mockplus.16.Экспорт в HTML-форматеMockplus позволит экспортировать ваш прототип в HTML-формате (будет доступно в скором времени).17.Сканирование QR-кода для просмотра разработкиОтсканировав QR-код, вы в любое время можете увидеть свой прототип на экране мобильного устройства. Удаленная публикация или USB-кабель не требуются.18.Онлайн-публикация и просмотр на мобильных устройствахСинхронизировав ваш прототип с облаком, вы можете просматривать его на мобильном устройстве в любое время.19.Облачная синхронизацияОблачная синхронизация позволит вам сохранить проект в облаке и защитить его паролем. У вас появится возможность редактировать проект на различных устройствах и при этом не пользоваться USB-диском для его перемещения.20.ПечатьВ Mockplus доступна функция распечатки прототипа.21.Автоматическое резервное копированиеДля защиты ваших документов Mockplus будет регулярно создавать резервные копии вашего проекта. В случае возникновения ошибок вы легко восстановите данные из предыдущих резервных копий. Можно установить любую периодичность резервного копирования данных в Mockplus, исходя из своих потребностей.22.Тег страницыПомечайте статус страницы разными цветами. Также вы можете использовать теги для страниц, в которых будет указан этап разработки, что упростит вам работу с прототипом.23.Групповые модификацииИзменение размера страниц, типа и размера шрифтов, фонового цвета можно производить как на одной странице, так и во всем проекте сразу. Данная функция существенно сэкономит ваше время и усилия.24.Примечания к компонентуДобавив к компоненту примечание, вы сможете узнать любую важную информацию о нем, включая требования и данные об использовании, во время предварительного просмотра проекта на компьютере.25.Импорт и экспорт фрагментов компонентаВ Mockplus предусмотрена возможность создания проектов группой дизайнеров и доступна функция экспорта отдельного компонента или нескольких компонентов прототипа. Такой фрагмент можно импортировать и объединить с другим проектом для продолжения совместной работы.26.Импорт и экспорт фрагментов проектаЭкспортируйте фрагмент прототипа в одну или несколько страниц и передавайте другим членам команды. После импорта они смогут пользоваться этим фрагментом или соединить его со своей частью прототипа.27.Линейка и направляющиеЛинейка отображается в двух модификациях: в пикселях и процентах. Направляющие можно двигать обычным перетаскиванием.28.Публикация прототипаПубликуйте свой прототип напрямую в Facebook, Twitter и Google+, чтобы о нем узнало больше людей.29.Различные сочетания клавишБолее 70 горячих клавиш сделают дизайн вашего прототипа настолько оперативным, насколько это вообще возможно.