Good and useful design means a lot for a user. When you first open up any mobile application, UI and UX is the first thing that strikes a user’s eye. If app design is weak, user will close the app and never use again. As a developers and designers our main goal is to prevent it and build a mobile app design that will engage more users and will be user-friendly.

Mobile app design steps we undertake at OneArtBoard

Creating design is a very complicated and long process that requires a great attention to details. So now let’s talk about the main steps on how to create mobile design from scratch.

Steps to build your mobile app design:

  1. Idea
  2. Spec
  3. Build Wireframes
  4. Create Prototypes
  5. Visual Design
  6. Hand over a completed design to developers

Idea

Everything begins with a Idea. This may be your Idea or a Idea that a customer has moved toward you with. Idea are incredible, but on the other hand they’re extremely common. The sooner you understand that Ideas are only passing apparitions of something that may one day transform into an item, the better you’ll have the option to deal with this stage.

We will in general put an abundant excess confidence in Ideas, as getting the Ideas ‘right’ is far less significant than individuals might suspect. Ideas are fixed up and secured by NDA’s, marched around in pitch decks, and will in general interpretation of a characterised state excessively early.

There is generally abundant confidence in the idea, but getting the idea right has far less significance as suspected by an individual. Ideas are fixed up and secured by NDA’s, marched around in pitch decks and an interpretation of a characterised state excessively early.

also, prompts obviously better final products. Ideas ought to be exposed to a solid portion of Darwinism before being sought after – natural selection. You need your plan to advance the best form of itself, and keeping that in mind, it can bode well to discuss a round procedure inside this stage.

Depending on the type of idea, there are different questions to ask. In the case of apps, these are some of the most often asked questions:

  • Is this idea financially viable? Making anything takes time, effort and money. Can you recoup your investment? Does the idea have a solid plan for revenue? A realistic one?
  • Is this idea technically feasible? Can this be made? Who should make it? How would we go about making it? What sort of tools do we use? What sort of data/API/touch points do we need? What are the obstacles facing the implementation of the idea?
  • Is someone else already doing this? Most things today are a remix. While that’s cool, what we can do better? What components of this idea differentiate it from existing ideas? How are we adding something new to the market?
  • Could this be made simpler/differently? Are there other ways to accomplish the same goals? Or, are there other methods that could be more effective and take less time to execute?

Those are just a handful of the tough questions you need to ask while you or your clients’ idea is taking shape. To be honest, 90% of app ideas I’ve ever been pitched or have come up with myself, fall flat on the first question. People always underestimate how long it takes to make something and always overestimate how much they stand to gain.

Idea workshops are great ways to force the evolution of your ideas. You can use things like Trello to track aspects of your idea in an environment where you can move around and prioritize concepts. Collaboration helps promote the strong aspects of the concept, the ones that resonate with participants. At the same time, collaboration helps identify and eliminate what is detracting from the idea.

Spec

A ‘Specification’ or a ‘Spec’ is the bit of paper(s) that pronounces what your application does and how it is cultivated. It’s the outline maybe. There are many approaches to do a spec, extending from the lighter (additionally now and then called a ‘brief’) to the encompassing total wrapping breakdown. Regardless of what direction you decide to go about it, generally do a spec. I repeat: Always do a spec.

In customer ventures, specs are frequently contracts on which appraisals can be in light of – the mother report that directs to all gatherings included what should be made and (generally) how. In close to home or in-house ventures they’re not as regularly observed as a need, yet they ought to be.

You’d be surprised how much of an idea is further developed, changed or refined when you’re asked to put everything in writing. Areas of uncertainty are naturally brought forward and further questions are raised. In a sense, the act of creating a spec is the first conscious and calculated ‘design’ of the solution. A lot of initial ideas and assumptions are explored and illuminated in this document, which keeps everyone involved in tune with what is being built. It can also be beneficial to periodically revisit a spec and update it retroactively while the project moves into its next phases.

A program like Pages, Word, or any other simple markup editor will be fine for this phase. The real trick is deciding what to include and what to leave out of a spec. It is best to keep things short and concise under the assumption that the more you write, the more can be misinterpreted. List both functional and non-functional requirements. Explain what your app is, and not how it needs to be done. Use plain language. In the end, the best spec is the one that is agreed upon by all parties.

Wireframe

Wireframes, or low loyalty mockups, can be either part of the spec or built from the spec. Data Architects (iA’s) and User Experience Designers (UX Designers) for the most part take responsibility for the stage in any case, truly it’s significant that everybody in the group talks about and sees how the product is assembled and how the application is organized.

In case you’re single designer working on the product, you’re likely the one holding the marker here. Draw on your experience of the platform conventions, knowledge of controls and interface paradigms, and apply that knowledge to the challenges you’re trying to solve alongside those who may have domain-specific knowledge. The combination of information on the best way to best accomplish things on the stage, with information about the intended interest group or the objective of the item, makes a solid establishment for the engineering of the application.

We tend to do workshops either internally or, ideally, with the client, and go through the spec, screen by screen, and whiteboard the wireframes. The wireframes are then brought into a tool to be digitized, shared and revised. Many people prefer applications like Adobe XD, Figma or Sketch. Its upto you whatever you want to use

Prototype

The next step varies greatly. Infact, the next three steps are all entwined and often run alongside each other. With the spec and the wireframe in hand, we are now ready to attempt a prototype. The word prototype in this context covers many different things, but ultimately it’s about creating a bare-bones version of the app with the goal of testing your hypotheses and get early feedback. Some people use tools like Invision or Marvel where you can convert your low-fidelity mockups into interactive “apps” that allow you to tap through the design. Often, designers go straight for a native prototype written in Swift.

There are pros and cons to each approach. More complex and “bigger” apps with larger teams influencing the product (or with more loose specs) may benefit more from this intermediate step, where iterations are quickly and more easily shared. For smaller teams with a more solid spec, going directly to code allows for a quicker turnaround, while laying the foundation for the actual app. This also often confronts implementation issues directly as you’re actually building the real product right from the start.

There are many tools popping up that span the divide between visual design and functional prototype, while aiming to take collaborative design to new interactive heights. Both Framer and Figma are two options worth looking at.

How you choose to prototype depends on many different factors. The most important thing in this step when deciding is getting early validation of your idea. A bad experience with a prototype might cause you to uncover issues with your wireframes, your spec, or even the very core of your idea. You can then, before you’ve invested time in the next two phases, make changes or abandon it entirely.

User Interface Design

Now, you’ve been ‘designing’ all along, but in this phase, you get to what is more traditionally consider ‘design’. User Interface design deals with the appearance of the app. It is not just making things look nice, but also making sure that there’s a consistent and identifiable visual language throughout. Here design helps, not only to tell a story and communicate your brand, to guide users through challenging parts of the app, but also to make particular aspects of the experience more enjoyable.

Proper User Interface design should build on top of all of the experiences you’ve made in the previous stages. It should support the overall ethos of the idea, the goals defined in the specs, the flows laid out in the wireframes, and the lessons learned from the prototype.

User Interface design is not just a ‘skin’. It’s not a coat of paint applied to make things look pretty. It is the visual framework you use to create a coherent and consistent experience, tell an engaging story, and differentiate your product from others’. Great User Interface design elevates the mundane, clarifies the unclear and leaves a lasting impression with the user.

Rules defined in the great unwritten design manual of your product, inform every choice on every visual solution you may encounter. The work in this stage consists of the designer defining a series of rules and conventions and then applying those to every challenge he or she may encounter when putting the interface together. Luckily you don’t need to reinvent the wheel every time (even though sometimes we do just that). iOS & Android have a ton of existing rules, conventions, and expressions on which we can lean.

There is no right way of creating a User Interface design for an app and this stage is probably the phase that has the most tools and approaches. If you’ve been diligent and digitized (and updated) your wireframes you could start to add embellishment to those and build it from there in Adobe XD, Figma or Sketch. Another place to start is to base your design off existing iOS UI elements and then tweak from there.

Hand over a completed design to developers

Next up, or as is sometimes the case, alongside, is the development of the app. In an ideal world, the person responsible for developing the app has been part of all previous phases, chiming in with his or her experience, deliberating on the difficulty level of implementation of various proposed designs, and discussing best practices in terms of structure, tools, libraries, and so on.

I am familiar with the desire to clearly separate development from design, both from an organizational and a cultural perspective. It is my clear conviction that the best products are built by teams made of multiple professionals from various disciplines who have a mutual understand of each other. Development shouldn’t be devoid of a design presence and design shouldn’t be without development know-how.

There’s an obvious balance to this. Designers probably shouldn’t have much to say in the choice of an API implementation, like developers probably shouldn’t get to veto a color scheme. However, during a wireframing session a developer could save a designer from making a disastrous proposal that would cause time for implementation to increase tenfold. Likewise, a designer overlooking implementation of navigation could steer the interaction towards a much more enjoyable experience that better fit the consistency and feel of the app. Use your best judgment but, don’t rob your team of their combined expertise by putting up imagined barriers.

Related Post

No Comments

Leave a Comment