How To getting started with App Design
Before We Go Ahead Please Go Through this amazing Skool network video about Ux Design.
some of key points of user interface fundamentals highlighted below.
1. Know your user
“Obsess over customers: when given the choice between obsessing over competitors or customers, always obsess over customers. Start with customers and work backward.” – Jeff Bezos
Your user’s goals are your goals, so learn them. Restate them, repeat them. Then, learn about your user’s skills and experience, and what they need. Find out what interfaces they like and sit down and watch how they use them. Do not get carried away trying to keep up with the competition by mimicking trendy design styles or adding new features. By focusing on your user first, you will be able to create an interface that lets them achieve their goals.
2. Pay attention to patterns
Users spend the majority of their time on interfaces other than your own (Facebook, MySpace, Blogger, Bank of America, school/university, news websites, etc). There is no need to reinvent the wheel. Those interfaces may solve some of the same problems that users perceive within the one you are creating. By using familiar UI patterns, you will help your users feel at home.
3. Stay consistent
“The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.” – Jakob Nielson
Your users need consistency. They need to know that once they learn to do something, they will be able to do it again. Language, layout, and design are just a few interface elements that need consistency. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency.
4. Use visual hierarchy
“Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.” – Jeffery Veen, The Art and Science of Web Design
Design your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element work together, creating a clear path to understanding your interface. A clear hierarchy will go great lengths in reducing the appearance of complexity (even when the actions themselves are complex).
5. Provide feedback
Your interface should at all times speak to your user, when his/her actions are both right and wrong or misunderstood. Always inform your users of actions, changes in state and errors, or exceptions that occur. Visual cues or simple messaging can show the user whether his or her actions have led to the expected result.
.
6. Be forgiving
No matter how clear your design is, people will make mistakes. Your UI should allow for and tolerate user error. Design ways for users to undo actions, and be forgiving with varied inputs (no one likes to start over because he/she put in the wrong birth date format). Also, if the user does cause an error, use your messaging as a teachable situation by showing what action was wrong, and ensure that she/he knows how to prevent the error from occurring again.
A great example can be seen in How to increase signups with easier captchas.
7. Empower your user
Once a user has become experienced with your interface, reward him/her and take off the training wheels. The breakdown of complex tasks into simple steps will become cumbersome and distracting. Providing more abstract ways, like keyboard shortcuts, to accomplish tasks will allow your design to get out of the way.
8. Speak their language
“If you think every pixel, every icon, every typeface matters, then you also need to believe every letter matters. ” – Getting Real
All interfaces require some level of copywriting. Keep things conversational, not sensational. Provide clear and concise labels for actions and keep your messaging simple. Your users will appreciate it, because they won’t hear you – they will hear themselves and/or their peers.
9. Keep it simple
“A modern paradox is that it’s simpler to create complex interfaces because it’s so complex to simplify them.” – Pär Almqvist
The best interface designs are invisible. They do not contain UI-bling or unnecessary elements. Instead, the necessary elements are succinct and make sense. Whenever you are thinking about adding a new feature or element to your interface, ask the question, “Does the user really need this?” or “Why does the user want this very clever animated gif?” Are you adding things because you like or want them? Never let your UI ego steal the show.
10. Keep moving forward
Grandpa Bud: If I gave up every time I failed, I would never have invented my fireproof pants!
[Pants burn up, revealing his underwear]
Grandpa Bud: Still working the kinks out a bit.
Design is a rather broad and vague term. When someone says "I'm a designer", it is not immediately clear what they actually do day to day. There are a number of different responsibilities encompassed by the umbrella term designer.
Design related roles span many industries, ranging from industrial design (e.g. cars, furniture) to the traditional print industry (e.g. magazines, publications), to the new media tech industry (e.g. websites, mobile apps). With the relatively recent influx of tech companies focused on creating interfaces for screens, many new design roles have emerged. Job titles like UX or UI designer are confusing to the uninitiated and unfamiliar even to designers who come from other industries.
Let's attempt to distill what each of these titles really mean within the context of the tech industry.
UX Designer (User Experience Designer)
UX designers are primarily concerned with how the product feels. A given design problem has no single right answer. UX designers tackle this challenge and explore many different approaches to solving a specific user problem. The broad responsibility of a UX designer is to ensure that the product logically flows from one step to the next. One way that a UX designer might do this is by conducting in-person user tests to observe one's behavior in the wild. By identifying verbal and non-verbal stumbling blocks, they refine and iterate to create the "best" user experience. An example project is creating a delightful onboarding flow for a new user.
"Define interaction models, user task flows, and UI specifications. Communicate scenarios, end-to-end experiences, interaction models, and screen designs to stakeholders. Work with our creative director and visual designers to incorporate the visual identity of Twitter into features. Develop and maintain design wireframes, mockups, and specifications as needed." - Experience Designer @ Twitter"
Deliverables: Wireframes of screens, Storyboards, Sitemap
Tools of the trade: Photoshop, Sketch, Illustrator, Fireworks, InVision
You might hear them say this in the wild:
"We should show users the 'Thank You' page once they have finished signing up."
UI Designer (User Interface Designer)
Unlike UX designers who are concerned with the overall feel of the product, user interface designers are particular about how the product is laid out. They are in charge of designing each screen or page with which a user interacts and ensuring that the UI visually communicates the path that a UX designer has laid out. For example, a UI designer creating an analytics dashboard might front load the most important content at the top, or decide whether a slider or a control knob makes the most intuitive sense to adjust a graph. UI designers are also typically responsible for creating a cohesive style guide and ensuring that a consistent design language is applied across the product. Maintaining consistency in visual elements and defining behavior such as how to display error or warning states fall under the purview of a UI designer.
"Concept and implement the visual language of Airbnb.com. Create and advance site-wide style guides." - UI Designer @ AirBnB
The boundary between UI and UX designers is fairly blurred and it is not uncommon for companies to opt to combine these roles.
Tools of the trade: Photoshop, Sketch, Illustrator, Fireworks
You might hear them say this in the wild:
"The login and sign up links should be moved to the top right corner."
Visual Designer (Graphic Designer)
A visual designer is the one who pushes pixels. If you ask a non-designer what a designer does, this is probably what comes to mind first. Visual designers are not concerned with how screens link to each other, nor how someone interacts with the product. Instead, their focus is on crafting beautiful icons, controls, and visual elements and making use of suitable typography. Visual designers sweat the small details that others overlook and frequently operate at the 4-8x zoom level in Photoshop.
"Produce high-quality visual designs — from concept to execution, including those for desktop, web, and mobile devices at a variety of resolutions (icons, graphics, and marketing materials). Create and iterate on assets that reflect a brand, enforce a language, and inject beauty and life into a product." - Visual Designer @ Google
It is also fairly common for UI designers to pull double duty and create the final pixel perfect assets. Some companies choose not to have a separate visual designer role.
Tools of the trade: Photoshop, Sketch
You might hear them say this in the wild:
"The kerning is off and the button should be 1 pixel to the left!"
Interaction Designer (Motion Designer)
Remember the subtle bouncing animation when you pull to refresh in the Mail app on your iPhone? That's the work of a Motion Designer. Unlike Visual Designers who usually deal with static assets, motion designers create animation inside an app. They deal with what the interface does after a user touches it. For example, they decide how a menu should slide in, what transition effects to use, and how a button should fan out. When done well, motion becomes an integral part of the interface by providing visual clues as to how to use the product.
"Proficiency in graphic design, motion graphics, digital art, a sensitivity to typography and color, a general awareness of materials/textures, and a practical grasp of animation. Knowledge of iOS, OS X, Photoshop and Illustrator as well as familiarity with Director (or equivalent), Quartz Composer (or equivalent), 3D computer modeling, motion graphics are required." - Interaction Designer @ Apple
Tools of the trade: AfterEffects, Core Composer, Flash, Origami
You might hear them say this in the wild:
"The menu should ease-in from the left in 800ms."
UX Researcher (User Researcher)
A UX researcher is the champion of a user's needs. The goal of a researcher is to answer the twin questions of who are our users andwhat do our users want . Typically, this role entails interviewing users, researching market data and gathering findings. Design is a process of constant iteration. Researchers may assist with this process by conducting A/B tests to tease out which design option best satisfies user needs. UX researchers are typically mainstays at large companies, where the access to a plethora of data gives them ample opportunity to draw statistically significant conclusions.
"Work closely with product teams to identify research topics. Design studies that address both user behavior and attitudes. Conduct research using a wide variety of qualitative methods and a subset of quantitative methods, such as surveys." - UX Researcher @ Facebook
UX designers also occasionally carry out the role of UX researchers.
Deliverables: User personas, A/B test results, Investigative user studies & interviews
Tools of the trade: Mic, Paper, Docs
You might hear them say this in the wild:
"From our research, a typical user..."
Front-End Developer (UI Developer)
Front-end developers are responsible for creating a functional implementation of a product's interface. Usually, a UI designer hands off a static mockup to the front-end developer who then translates it into a working, interactive experience. Front-end developers are also responsible for coding the visual interactions that the motion designer comes up with.
Tools of the trade: CSS, HTML, JavaScript
You might hear them say this in the wild:
"I'm using a 960px 12 column grid system."
Product Designer
Product designer is a catch-all term used to describe a designer who is generally involved in the creation of the look and feel of a product.
The role of a Product Designer isn't strictly well-defined and differs from one company to the next. A product designer may do minimal front-end coding, conduct user research, design interfaces, or create visual assets. From start to finish, a product designer helps identify the initial problem, sets benchmarks to address it, and then designs, tests and iterates on different solutions to it. Some companies that want more fluid collaboration within the various design roles opt to have this title to encourage the whole design team to collectively own the user experience, user research, and visual design elements.
Some companies use UX designer or simply designer as a catch-all term. Reading the job description is the best way to figure out how the company's design team divides the responsibilities.
"Own all facets of design: interaction, visual, product, prototyping. Create pixel-perfect mocks and code for new features across web and mobile." - Product Designer @ Pinterest
"I am looking for a designer"
This is the single most common phase I hear from new startups. What they are usually looking for is someone who can do everything described earlier. They want someone who can make pretty icons, create A/B tested landing sites, logically arrange UI elements on screen, and maybe even do some front-end development. Due to the broad sweeping scope of this role, we usually hear smaller companies asking to hire a "designer" rather than being specific in their needs.
Above article courtesy : treeehouse bold.pixelapse.com
After You have idea about your app. next step would be accomplishment of rough sketches and wire-framing for better understanding layout of app functionality and user interaction analogy.
About Wire-framing and prototyping tools found here.TOOLS here
Tutorial For Ui/UX Design in Photoshop
After WE Get Our First Design. We can Go For Low Fidelity Mock-up in Photoshop or Sketch.
Before We Start Our App Design We Will Download Our Resources for ios 9 Ui Kit.
For Photoshop Download : ios 9 Ui Kit Here
For Sketch Download : ios 9 Ui Kit Here
You can Download Some Premium and Free Ui Kits Here .
after creating low fidelity mock-up screens and brainstorming ideas improved the user interface flow
with taking feedback from colleagues and experts about designs.
after improving app design for better mobility and user approach .we can make high fidelity mock up with ease, you can also make gif of interaction with cool animation .which showa forecast the userexp and ease of use in presentation before final deliverable s .
0 comments: