The realization of an app goes through several phases including Mood boarding that we will explain to you through a series of articles. You will find out more about our way to work, our vision and the technical means to launch a project from scratch in good conditions. Our thinking process is split in 6 different articles :
- Mood boarding and the required tools
- Design Thinking and luxury wireframing
- Creation of basic components : Sketch
- Création of advanced components : Sketch
- Classic prototype : Invision & Principle
- Advanced prototype : Noodle & Origami
Throughout this first article, we will introduce you to different useful ways to be inspired to create a moodboard, the basic tools to work efficiently, the impacts of Apple’s and Google’s new developments and last but not least how to get inspired by actual trendy apps.
I Mood Boarding
Before beginning any project, it is crucial to be aware of the current UX/UI trends. To do so, several creative platforms exist in order for you to find all the inspiration you need. In this article we will only list a few examples that we use as there are so many great websites online and we can’t mention all of them.
Dribbble
Dribbble is an online closed community, only accessible for creators by invitation where we can find all the best designer worldwide. They share their projects focused on web or digital interfaces. It is important to follow those type of works to be aware of the latest updates and design possibilities. Dribble is and will remain one of the best platforms to get professional feedback from a digital point of view.
Behance
It is one of the main competitors of Dribbble, where creativity and inspiration don’t only focus on digital but more on design and creativity in general. We can find several types of projects including photography, packaging, architecture, but also digital interfaces. The main benefit is that this platform is open to anyone willing to share their work and to describe their project from a global point of view.
Awwwards
Awwwards is a professional platform where we can encounter the best digital and web works currently that have been nominated or awarded lately. All of these projects were selected and graded by a jury of professionals, bringing together the most innovative and creative concepts of the moment. It is therefore one of the most useful platforms to focus your thoughts on your project.
UpLabs
If you are looking for the best examples of animation and interaction, this platform is for you. The UI/UX search is highly advanced, while following the features available on iOS and Android. There are also examples of web integration as well as 3D, which is one of the fastest growing categories.
Muzli
Muzli is a tool created by invision, which brings together all the flagship projects and concepts of the moment. It groups together all the sites discussed so far and organizes the content in a personalised way for each user.
II Tools
To start your project in the best conditions, it is important to have the right tools in hand. We will be talking about the essential tools for designers but also tools that facilitate communication between the designer, developers and the customer.
Sketch
For digital projects such as websites and applications Sketch is perfectly designed for a fast and efficient workflow. Indeed, it is an intuitive software that allows all digital designers to realize their projects in the form of an artboard page. Each artboard represents the screens of your project and allows you to have a global view of your progress and to keep the same identity throughout the creation process. Sketch is unique in that it is possible to work as a symbol or component for your project. Once all your components have been made, all you have to do is assemble them.
Invision
To simplify communication between designers, developers and the customer, Invision is one of the best tools to offer that as of this moment. Indeed, this web platform is connected directly with Sketch via Craft, which allows you to share all your artboards and also offers the possiblité to create your own prototype. Once synchronized on invision, each customer has the possibility to visualize the prototype, but also to leave comments throughout the project. The designer, on the other hand, can create his prototype using build mode to allow him to navigate through his project. This is a useful and simple tool to test user flows. To make the developer’s task easier, he has access to an inspect mode, where he will be able to find the work’s dimensions and spacing, the color codes used, but also to download all the assets. Invision is therefore one of the best ways to work in collaboration quickly and efficiently.
Principle
For any advanced prototype concerning the animation and interaction through gestures in a concept, Principle is the tool recommended for its simplicity and reactivity. Thanks to this software, it is very simple to realize more advanced animations that will give life to your interface. You will be able to navigate directly in your project by achieving the desired effects that will reflect the end product’s experience. This way, you can determine all transitions and application behavior.
III What’s new IOS/Android
One of the best ways to stay up-to-date with the latest news and technology trends is to follow Apple’s and Google’s conferences to have a global view on the future of interfaces several months in advance. Indeed, after studying these conferences, it is possible to prepare and innovate in the field of UX/UI design to get ahead of the curve. The digital world is advancing rapidly, so it is essential to be aware of its evolution.
A project takes time to come to life, so it is important to make the right structural or design choices from the beginning. In order to remain aware of its latest news, Apple and Google share their guidelines to make it easier for all designers to work after each keynote.
https://developer.apple.com/ios/
IV Design Inspiration
In order to achieve an optimal application at both a UX and UI level, it is important to be inspired by current popular applications that are widely used such as Facebook, Instagram, Airbnb and many others. Indeed, these applications create usage trends across our company and usage standards.
By respecting codes and habits, it is easier to guide users through a project. For example, using a tab bar to navigate simply through an application is easily identifiable in the most popular applications.
These trends can also be found in the user’s gestures, for example the vertical swipe used on several news feeds, such as Facebook, Instagram, or the left to right swap proposed by Tinder which allows the user to easily express his choice, positive or negative.
It is therefore important to follow all the new features on a daily basis in order to remain relevant in the way it works and to be constantly up to date. Our next chapter will focus on the design thinking and production of luxury wireframes.
