# data[].attributes.attachment_link.title
Free mobile & web prototyping (iOS, Android) for designers - Marvel

# data[].attributes.attachment_link.description
Turn sketches and designs into interactive web, iPhone, iPad, Android and Apple Watch prototypes and mockups. Collaborate with your team and get feedback. No coding required.

# data[].attributes.body
Journey map:

# data[].attributes.body
Client A: ‘I have a tight budget and deadline, so I don’t understand why this extra step is necessary. We already talked about my needs for the site/app. Can’t you just take my ideas and build what I need?’

Unfortunately, sometimes ideas and drawings of a design can sometimes be a far cry from the real world in which the product will be used. By creating a prototype, it is possible to sit down with a real version of the product and determine which aspects are worthwhile and which parts need to be revised or discarded. In this process, it may be possible to find glaring omissions that, on paper, weren’t noticeable.

Prototypes allow you to test out what works, and what doesn't, before you make the expensive decision to write code or produce assets. Perhaps equally important, are the discoveries that you'll make along the way. Testing prototypes often result in unexpected ideas and approaches to solving problems that you wouldn't have come across any other way. As a result, you might be able to enhance your project beyond it's initial scope.

Client B: ‘What do I do with this thing? It’s just a grouping of boxes and lines and certainly does not look like a website/app. I also don’t like the gray. Where’s the color? And I don’t know what ‘lorem ipsum’ means; my site/app should be in English.

the boxes and lines are wireframes. Wireframes are simple black and white layouts that outline the specific size and placement of page elements, site features, conversion areas and navigation for your website/app.

1. Wireframes display site architecture visually

2. Wireframes allow for clarification of website features

3. Wireframes push usability to the forefront

4. Wireframes identify ease of updates

5. Wireframes help make the design process iterative

6. Wireframes save time on the entire project

7. Experience shows it works

(source: https://www.orbitmedia.com/blog/7-reasons-to-wireframe/)

lorem ipsum is a filler text commonly used to demonstrate the graphic elements of a document or visual presentation.

(source: https://en.wikipedia.org/wiki/Lorem_ipsum)

Client C: ‘Ok, I understand the comparison to building a house. What else do you need from me? How do I know what to look at and when?’ ‘So what happens next?’ What would be your response to this client’s comments?

have action plan for implementing changes

# data[].attributes.body
Colour Theory:

A collection of guidelines and laws used to evoke emotion set moods, and manage user attention through the application of colour Colour theory is a collection of laws, guidelines, and interpretations which guide the selection and use of colours.

In user experience design, the meanings associated with certain colours and colour groups is particularly significant.

There are two broad colour groups: warm and cool.

Warm colours (e.g. red, orange, and yellow) convey happiness, enthusiasm and positivity.

Cool colours (e.g. green, blue, and purple) can be used to create calming and relaxing environments. Individual colours also have their own meanings.

1. Red can be used to convey importance or danger; error messages and delete buttons are commonly red to make the user aware of this.

2. Green can be used to reassure the user; success messages and primary buttons make good use of this colour to tell the user that everything is fine or that they are safe to proceed.

Beyond concerns of clarity and visual appeal, designers can consider the perceived meaning of the colours they use to strengthen the messages they are trying to deliver.

(source: https://en.wikipedia.org/wiki/Color_theory )

History/Background:
color theory principles first appeared in the writings of Leone Battista Alberti and the notebooks of Leonardo da Vinci, a tradition of "colory theory" began in the 18th century, initially within a partisan controversy over Isaac Newton's theory of colour (Opticks, 1704) and the nature of primary colours. From there it developed as an independent artistic tradition with only superficial reference to colorimetry and vision science.
(source: https://en.wikipedia.org/wiki/Color_theory#Color_abstractions)

Colours may also convey specific meanings depending on cultural background.
for example:

Blue colour

1. China: blue represents the heavens, the east, clouds, spring, wood

2. THE U.S.:  blue represents Trustworthy, official business, philosophy, soothing

3. Russia: blue represents Hope, purity, peace

4. Germany:  blue represents Ocean

(source: https://www.sitepoint.com/using-color-schemes-in-mobile-ui-design/)

Web Resources:
■https://en.wikipedia.org/wiki/Color_theory

■https://en.wikipedia.org/wiki/Color_theory#Color_abstractions

■https://www.sitepoint.com/using-color-schemes-in-mobile-ui-design/

# data[].attributes.body
Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Match between system and the real world
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
User control and freedom
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Flexibility and efficiency of use
Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

Our client: Megafash
competitors: Minitoons, Typo,  Monoyono
MINI TOONS is the leading Gifts and Lifestyle retail chain store in Singapore. Their business has grown from a modest push cart stall in SuntecCity to an expanding chain of 6 outlets.

# data[].attributes.body
snapchat app:
-image messaging and multimedia mobile application
-features:
-creating multimedia messages referred to as "snaps"
-snaps can consist of a photo or a short video and can be edited to include filters and effects, text captions, and drawings.
-The private message photo snaps can be viewed for a user-specified length of time (1 to 10 seconds as determined by the sender) before they become inaccessible.
-Memories allow snaps and story posts to be saved into a private storage area, where they can be viewed alongside other photos stored on the device, as well as edited and published as snaps, story posts, or messages.
from "https://en.wikipedia.org/wiki/Snapchat#Features
i pressed the button to take photo/video, then press send. all my friends can view my photo/video. my photo/video will disappear after 24 hours. compared to other cameras app. snapchat is more interesting. it has many other features which other apps do not have such as can send private message photo snaps

# data[].attributes.body
What are the new consumer's expectations?
1.More personalization.
2.More options.
3.Constant contact.
4.Listen closely, respond quickly.
5.Give front-liners more control.
from "http://www.customerexperienceinsight.com/customer-expectations-you-must-meet-now/"

What is the on-demand economy?
The On-Demand Economy is defined as the economic activity created by technology companies that fulfil consumer demand via the immediate provisioning of goods and services.

What is the industry that has been disrupted?

transport- cab booking because of uber/grab

# data[].attributes.body
Understand the interaction design process that you should adopt in embarking on a mobile application project.

Empathise - Define - Ideate - Prototype - Test

Empathise: The first stage of the Design Thinking process is to gain an empathic understanding of the problem you are trying to solve.
Define: During the Define stage, you put together the information you have created and gathered during the Empathise stage and analyse your observations and synthesise them in order to define the core problems that you and your team have identified up to this point.
Ideate: you can start to look for alternative ways of viewing the problem. It is important to get as many ideas or problem solutions as possible at the beginning of the Ideation phase.
Prototype: The solutions are implemented within the prototypes. the problems that are present, and have a better/more informed perspective of how real users would behave, think, and feel when interacting with the end product.
Test: alterations and refinements are made in order to rule out problem solutions and derive as deep an understanding of the product and its users as possible.

# data[].attributes.body
What is interaction design?
- Interaction design is a process in which designers focus on creating engaging web interfaces with logical and thought out behaviours and actions. The successful interactive design uses technology and principles of good communication to create desired user experiences.
from "https://designmodo.com/interaction-design/"

How it is different from information architecture, product design and visual design.

- Information Architecture concerns structure
information architecture focuses on the organisation and structure of content in a manner in which a user can navigate through it. Digitally speaking, it can range from a simple brochure site all the way to a complex information system. Information Architects work to create usable content structures out of complex sets of information.
- User Experience concerns emotion

User Experience Designers take a site’s information architecture one step further, considering not only its navigation but also its ability to facilitate engagement. To do this, they employ user-centered design to produce a cohesive, predictable, and desirable effect in their target audience.
from "http://www.uxbooth.com/articles/the-difference-between-ia-and-ux-design/"
- Product design
Interaction design focuses on the behaviour of individuals using a product, but product design encompasses the entire range of research, concept, and execution and testing of a product. Product design includes interaction, visual, UI and UXdesign.
from "https://www.quora.com/What-is-the-primary-difference-between-a-product-designer-and-an-interaction-designer"
- Visual design
How it looks. more about making sure the website looks good.
from "https://uxdict.io/the-differences-interaction-design-vs-visual-design-dae7b454be77