The document provides an introduction to UX (user experience) design. It begins by distinguishing UX from UI (user interface), noting that UX design is based on thorough user research and testing, while UI focuses only on visual screen elements. The key aspects of UX include user research, prototyping, design, and development with the goal of intuitive, effective experiences. User research, especially getting accurate user requirements, is described as the most important part of UX design to avoid scope creep and ensure projects meet user needs. The document then discusses wireframing as a method for capturing content, organization and interactions before development begins.
A Quick guide into a Lean UX process and how to engage with Users.
How to do products people love?
What are the steps you need to give to be a great Uxer?
Can User Experience be Lean?
What Methods and Processes can be used?
User Testing in a nutshell.
Prototyping is essential to designing memorable mobile user experiences, but can often be overlooked at the beginning of building a product. Learn the types of prototypes, tools, and best practices for mobile product design (including overview of mobile flow and UI best practices, patterns, and frameworks).
Topics include:
Principles of user interface
UI design process
Design principles
Wireframe
Graphic icon, image and colour physiology
User experience and research
1. What it is?. Philosophy and Principles.
2. How to use it? methodology and basic tools.
3. Beyond UCD. Alternatives methodologies: Activity Centered Design and Goal Directed Design.
A Quick guide into a Lean UX process and how to engage with Users.
How to do products people love?
What are the steps you need to give to be a great Uxer?
Can User Experience be Lean?
What Methods and Processes can be used?
User Testing in a nutshell.
Prototyping is essential to designing memorable mobile user experiences, but can often be overlooked at the beginning of building a product. Learn the types of prototypes, tools, and best practices for mobile product design (including overview of mobile flow and UI best practices, patterns, and frameworks).
Topics include:
Principles of user interface
UI design process
Design principles
Wireframe
Graphic icon, image and colour physiology
User experience and research
1. What it is?. Philosophy and Principles.
2. How to use it? methodology and basic tools.
3. Beyond UCD. Alternatives methodologies: Activity Centered Design and Goal Directed Design.
User centred design (UCD) and the connected homeCyber-Duck
This presentation is a summary of a workshop that was conducted at UX London and Mozfest by Cyber-Duck, an agency that merges lean and agile deliver with user centred design (UCD). The workshop was aimed at those wanting to apply UCD to futuristic technologies. The workshop explored the concepts and thinking of ‘how to design an Internet Connected Dishwasher app’ while considering a wider eco system. The workshop started by introducing IoT (and ‘nearables’), why its relevant now and how the UCD process can adapt to it. The workshop frames UCD in a wider product delivery context and is aimed at those wanting to learn on how UX tactics can be applied to successfully design IoT products and systems.
Running Great Design Reviews With Clients & PartnersCraig Peters
No matter how great your designs are, the way you communicate with your clients/business partners can make or break your engagement, especially as design challenges and organizations become more complex.
But what actually makes some meetings go well, and others not? We’ve heard “Be storytellers,” “Provide the right context,” and “Set expectations,” but what does that look like in practice?
I’ll provide real-life examples of how we’ve done this in our presentations for client engagements. We’ll include examples of our fundamental concepts we live by. No surprises. Over-communicate. Tell them how to be and what to do in the meeting. Design every slide of a presentation, not just the “designs.” Tell a story. Assume your clients have no idea what your meeting is all about (put yourself in their shoes).
It always goes better when you’re well prepared; we’ll help you get there.
Que veut dire «faire du UX»? … Un buzzword anglo-saxon souvent utilisé sans connaissance du réel métier…. !
Toute une méthodologie centrée sur l'utilisateur est préalable à la création d'une expérience intuitive et parfois addictive.
Ce n’est ; ni le domaine réservé de Apple, de airbnb, de UBER, ou encore un luxe qui doit couter cher. Le UX est accessible à tous et représente un investissement avec un ROI prouvé – une réalité indispensable qui accompagne votre transformation digitale.
Nous vous invitons à un voyage dans les coulisses du UX pour démystifier quelques notions erronées et découvrir sa forte valeur ajoutée.
Topics include:
Introduction to user interface
Types of user interface
Graphic user interface definition
History of user interface
Difference between UI and UX
Characteristics of GUI
Advantages and disadvantages
More than 370 visual definitions of UX : User Experience, Customer Experience, Service Design, Design Thinking, Lean UX, Usability diagrams from 1970 till 2017.
This is a restored version of the presentation. Previous with 80 000 + views was deleted as a result of SlideShare bug...
Road from concept of eCommerce system to implementation is usually long and complicated. In this presentation we discuss stage of eCommerce implementation
Web UI Design Patterns and best-practices guide from http://www.uxpin.com -- the best online wireframing, UX & product management suite available anywhere.
LET'S TALK FUTURE!
User Experience (UX) design is a dynamic and constantly evolving field that will continue to be shaped by future trends and technologies. In this interactive session, we explored how topics like artificial intelligence, virtual reality, micro-interactions, physical hardware, design sprints and innovation games are changing the landscape of UX.
WHAT YOU WILL LEARN
We shared of PALO IT’s experience in applying future UX methodologies to a variety of different projects. Participants were invited to share questions and topics to drive a dynamic conversation around their experiences and perspectives on the future of UX.
Topic: UI/UX DESIGN IN AGILE PROCESS
Why do we integrate design into our Agile process?
As we all know, the Agile Manifesto is well-received and successfully adopted as it is today thanks to the 12 underpinning principles. While “good design” is one main reason that “enhances agility”, “Agile processes promote sustainable development”.
At Axon Active, it’s important for us to do everything Agile and work with one another collaboratively in Collaboration Model. It gets people on the same page, makes everyone engage more with the product, encourages them to share more creative ideas, and gives them the flexibility they need to improve themselves.
Indeed, Designers and Developers can collaborate more closely and effectively, and subsequently integrating design into Agile process will yield numerous benefits.
For that reason, Scrum Breakfast Da Nang this October will be the very chance for you to learn:
• How to successfully integrate design into Agile process in practice
• How different Collaboration Model is from traditional model
• The benefits of Collaboration Model when done correctly
This presentation is targeted to developers trying to learn enough design skills to fill in gaps when a ux designer is not available to work on a project. A secondary goal is to give developers insight into the design process.
The web enables many things. Also the ability to liquify your brand and its values. Brand building and establishing and securing are getting more and more important, as we are running towards a generation of multi digital output devices. This presentation creates awareness for that topic, explores how User Experience Design and Documentation can contribute to a cohesive brand experience across all channels.
User centred design (UCD) and the connected homeCyber-Duck
This presentation is a summary of a workshop that was conducted at UX London and Mozfest by Cyber-Duck, an agency that merges lean and agile deliver with user centred design (UCD). The workshop was aimed at those wanting to apply UCD to futuristic technologies. The workshop explored the concepts and thinking of ‘how to design an Internet Connected Dishwasher app’ while considering a wider eco system. The workshop started by introducing IoT (and ‘nearables’), why its relevant now and how the UCD process can adapt to it. The workshop frames UCD in a wider product delivery context and is aimed at those wanting to learn on how UX tactics can be applied to successfully design IoT products and systems.
Running Great Design Reviews With Clients & PartnersCraig Peters
No matter how great your designs are, the way you communicate with your clients/business partners can make or break your engagement, especially as design challenges and organizations become more complex.
But what actually makes some meetings go well, and others not? We’ve heard “Be storytellers,” “Provide the right context,” and “Set expectations,” but what does that look like in practice?
I’ll provide real-life examples of how we’ve done this in our presentations for client engagements. We’ll include examples of our fundamental concepts we live by. No surprises. Over-communicate. Tell them how to be and what to do in the meeting. Design every slide of a presentation, not just the “designs.” Tell a story. Assume your clients have no idea what your meeting is all about (put yourself in their shoes).
It always goes better when you’re well prepared; we’ll help you get there.
Que veut dire «faire du UX»? … Un buzzword anglo-saxon souvent utilisé sans connaissance du réel métier…. !
Toute une méthodologie centrée sur l'utilisateur est préalable à la création d'une expérience intuitive et parfois addictive.
Ce n’est ; ni le domaine réservé de Apple, de airbnb, de UBER, ou encore un luxe qui doit couter cher. Le UX est accessible à tous et représente un investissement avec un ROI prouvé – une réalité indispensable qui accompagne votre transformation digitale.
Nous vous invitons à un voyage dans les coulisses du UX pour démystifier quelques notions erronées et découvrir sa forte valeur ajoutée.
Topics include:
Introduction to user interface
Types of user interface
Graphic user interface definition
History of user interface
Difference between UI and UX
Characteristics of GUI
Advantages and disadvantages
More than 370 visual definitions of UX : User Experience, Customer Experience, Service Design, Design Thinking, Lean UX, Usability diagrams from 1970 till 2017.
This is a restored version of the presentation. Previous with 80 000 + views was deleted as a result of SlideShare bug...
Road from concept of eCommerce system to implementation is usually long and complicated. In this presentation we discuss stage of eCommerce implementation
Web UI Design Patterns and best-practices guide from http://www.uxpin.com -- the best online wireframing, UX & product management suite available anywhere.
LET'S TALK FUTURE!
User Experience (UX) design is a dynamic and constantly evolving field that will continue to be shaped by future trends and technologies. In this interactive session, we explored how topics like artificial intelligence, virtual reality, micro-interactions, physical hardware, design sprints and innovation games are changing the landscape of UX.
WHAT YOU WILL LEARN
We shared of PALO IT’s experience in applying future UX methodologies to a variety of different projects. Participants were invited to share questions and topics to drive a dynamic conversation around their experiences and perspectives on the future of UX.
Topic: UI/UX DESIGN IN AGILE PROCESS
Why do we integrate design into our Agile process?
As we all know, the Agile Manifesto is well-received and successfully adopted as it is today thanks to the 12 underpinning principles. While “good design” is one main reason that “enhances agility”, “Agile processes promote sustainable development”.
At Axon Active, it’s important for us to do everything Agile and work with one another collaboratively in Collaboration Model. It gets people on the same page, makes everyone engage more with the product, encourages them to share more creative ideas, and gives them the flexibility they need to improve themselves.
Indeed, Designers and Developers can collaborate more closely and effectively, and subsequently integrating design into Agile process will yield numerous benefits.
For that reason, Scrum Breakfast Da Nang this October will be the very chance for you to learn:
• How to successfully integrate design into Agile process in practice
• How different Collaboration Model is from traditional model
• The benefits of Collaboration Model when done correctly
This presentation is targeted to developers trying to learn enough design skills to fill in gaps when a ux designer is not available to work on a project. A secondary goal is to give developers insight into the design process.
The web enables many things. Also the ability to liquify your brand and its values. Brand building and establishing and securing are getting more and more important, as we are running towards a generation of multi digital output devices. This presentation creates awareness for that topic, explores how User Experience Design and Documentation can contribute to a cohesive brand experience across all channels.
Presented at 3|SHARE's EVOLVE'15 - The Adobe Experience Manager Community Summit on Monday August 19th, 2015 at the Hard Rock Hotel in San Diego, CA. http://evolve.3sharecorp.com
ContentsTeam Work Schedule3Team Task Assignment3Project .docxbobbywlane695641
Contents
Team Work Schedule 3
Team Task Assignment 3
Project Plan 4
Step 1: Define the Problem 4
Step 2: Create a Plan 4
Step 3: Execute 4
Step 4: Check Work 6
Step 5: Learn and Generalize 6
House of Quality (HOQ) for Theia’s Smart Glasses 7
Step 1: Define the Problem 7
Step 2: Create a Plan 7
Step 3: Execute 8
Step 4: Check Work 14
Step 5: Learn and Generalize 14
Aggregate Project Plan 15
Step 1: Define the Problem 15
Step 2: Create a Plan 15
Step 3: Execute 16
Step 4: Check Work 22
Step 5: Learn and Generalize 22
I was able to use the APP skills from the midterm and apply it to our actual project. We learned that project #2 yields the highest EMV so that will be the industry we will be focusing on. 22
Theia’s Conceptual Design Process 23
Step 1: Define the Problem 23
Step 2: Create a Plan 23
Step 3: Execute 24
Concept 1 27
Concept 2 28
Concept 3 29
Concept 4 30
Concept 5 31
Concept 6 32
Step 4: Check Work 34
Step 5: Learn and Generalize 34
Phase Ⅱ Reportca 36
Step 1: Define the Problem 36
Step 2: Create a Plan 36
Step 3: Execute 36
Project Planning 36
House of Quality 37
Aggregate Project Plan 37
Reverse Engineering (includes FAST analysis + diagram) 38
Conceptual Design 38
Step 4: Check Work 38
Step 5: Learn and Generalize 39
Team Work Schedule
Date
Task
10/24
Homework assigned, touch bases with team to decide weekend plans.
10/25
Read handout and HOQ example. Everyone assigned to do individual research about AR Glasses.
10/26
Read handout and HOQ example. Everyone assigned to do individual research about AR Glasses.
10/27
Meet at a cafe downtown, due to the power outage. Meeting time is 1 hour.
10/28
Everyone working remotely. Also everyone is working on Phase I/II at the moment. HOQ problem is postponed for a while as we are working on Phase I/II.
10/29
Meet at TBD. Meeting time is 1 hour.
10/30
Revise our work.
10/31
Final revisions. Turn in homework.
Team Task Assignment
Task
Phase 1 - Missing Info + Tech Strategy
Phase 1 - Missing Functional Maps
Project Planning
House of Quality for Product
Aggregate Project Plan
Reverse Engineering
Conceptual Design
Phase II ReportProject PlanStep 1: Define the Problem
We need to clearly determine the tasks required of this project and develop a systematic plan of action to tackle these tasks.Step 2: Create a Plan
Framework for Project Planning:
1. Clearly state the intent of the Project
2. Determine the Design/Development sub-tasks and activities Comment by Christopher Chiang: Develop OS
Develop Display technology
Develop glasses framework
Audio Output
Develop Bluetooth compatibility
Battery development
Charge development
Environment sensing capability
3. Create a design/development activity matrix
4. Create a schedule for each subtask using a GANTT Chart
5. Identify the Critical Path for the Project
6. Assign Clear Roles and Responsibilities & track progressStep 3: Execute
1. Clearly state the intent of the Project
a. Develop smart glasses wearable technology prototype within a 1 year timesp.
This is one of the training course that I conducted in 2016 before I started my company Lava X.
And I thought it will be great sharing it here with everyone.
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016Pekka Hartikainen
Topics in the meet-up
A Practical Approach to Icon Taxonomy
Teemu Korpilahti, Lead Designer at Crasman
Accept the Imperfectness
Sami Vuori, Visual / UX / UI Designer at Gapps
Losing Control: Design Systems for Complex User Interfaces
Pekka Hartikainen, Design Lead at Smartly.io
Project Proposal Service Center Management softwareAdam Waheed
Service center professional is software which can manage full service life cycle of an organization. The software is a web based application which will be developed on PHP MySQL to solve current problems of Albion service center .This software is very useful for medium and small sized organizations
A holistic guide to annotated wireframes for app developmentConcetto Labs
Annotated wireframes can be a huge advantage for any mobile App Development project. We use the latest technology & creative methodology to craft an awesome application for your business
Web development on web was part of a project in the final year of Engineering to demonstrate the implementation and application of SaaS using Microsoft Silverlight.
The application facilitated creation of web pages without having a need to install any HTML editor based software.
Similar to Introduction to UX for Mesiniaga Academy (20)
Instructions for Submissions thorugh G- Classroom.pptxJheel Barad
This presentation provides a briefing on how to upload submissions and documents in Google Classroom. It was prepared as part of an orientation for new Sainik School in-service teacher trainees. As a training officer, my goal is to ensure that you are comfortable and proficient with this essential tool for managing assignments and fostering student engagement.
Ethnobotany and Ethnopharmacology:
Ethnobotany in herbal drug evaluation,
Impact of Ethnobotany in traditional medicine,
New development in herbals,
Bio-prospecting tools for drug discovery,
Role of Ethnopharmacology in drug evaluation,
Reverse Pharmacology.
This is a presentation by Dada Robert in a Your Skill Boost masterclass organised by the Excellence Foundation for South Sudan (EFSS) on Saturday, the 25th and Sunday, the 26th of May 2024.
He discussed the concept of quality improvement, emphasizing its applicability to various aspects of life, including personal, project, and program improvements. He defined quality as doing the right thing at the right time in the right way to achieve the best possible results and discussed the concept of the "gap" between what we know and what we do, and how this gap represents the areas we need to improve. He explained the scientific approach to quality improvement, which involves systematic performance analysis, testing and learning, and implementing change ideas. He also highlighted the importance of client focus and a team approach to quality improvement.
The Art Pastor's Guide to Sabbath | Steve ThomasonSteve Thomason
What is the purpose of the Sabbath Law in the Torah. It is interesting to compare how the context of the law shifts from Exodus to Deuteronomy. Who gets to rest, and why?
The Roman Empire A Historical Colossus.pdfkaushalkr1407
The Roman Empire, a vast and enduring power, stands as one of history's most remarkable civilizations, leaving an indelible imprint on the world. It emerged from the Roman Republic, transitioning into an imperial powerhouse under the leadership of Augustus Caesar in 27 BCE. This transformation marked the beginning of an era defined by unprecedented territorial expansion, architectural marvels, and profound cultural influence.
The empire's roots lie in the city of Rome, founded, according to legend, by Romulus in 753 BCE. Over centuries, Rome evolved from a small settlement to a formidable republic, characterized by a complex political system with elected officials and checks on power. However, internal strife, class conflicts, and military ambitions paved the way for the end of the Republic. Julius Caesar’s dictatorship and subsequent assassination in 44 BCE created a power vacuum, leading to a civil war. Octavian, later Augustus, emerged victorious, heralding the Roman Empire’s birth.
Under Augustus, the empire experienced the Pax Romana, a 200-year period of relative peace and stability. Augustus reformed the military, established efficient administrative systems, and initiated grand construction projects. The empire's borders expanded, encompassing territories from Britain to Egypt and from Spain to the Euphrates. Roman legions, renowned for their discipline and engineering prowess, secured and maintained these vast territories, building roads, fortifications, and cities that facilitated control and integration.
The Roman Empire’s society was hierarchical, with a rigid class system. At the top were the patricians, wealthy elites who held significant political power. Below them were the plebeians, free citizens with limited political influence, and the vast numbers of slaves who formed the backbone of the economy. The family unit was central, governed by the paterfamilias, the male head who held absolute authority.
Culturally, the Romans were eclectic, absorbing and adapting elements from the civilizations they encountered, particularly the Greeks. Roman art, literature, and philosophy reflected this synthesis, creating a rich cultural tapestry. Latin, the Roman language, became the lingua franca of the Western world, influencing numerous modern languages.
Roman architecture and engineering achievements were monumental. They perfected the arch, vault, and dome, constructing enduring structures like the Colosseum, Pantheon, and aqueducts. These engineering marvels not only showcased Roman ingenuity but also served practical purposes, from public entertainment to water supply.
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
How to Make a Field invisible in Odoo 17Celine George
It is possible to hide or invisible some fields in odoo. Commonly using “invisible” attribute in the field definition to invisible the fields. This slide will show how to make a field invisible in odoo 17.
4. UI
User Interface
What is?
“ Screen design for users to
interface with a system or
(web) application ”
- Specifically, we are purely talking about
combinations of UI elements such menus,
tables, forms, buttons, etc to make up an
interface.
4
6. Problems of UI Design
● The created design is based on what you think they need.
○ even worst, based on your ego as an artist.
● The created process is based on your assumptions and cognitions, not
theirs.
● The biggest problem is when all your assumptions are wrong.
There is a gap between UI and UX
6
8. UX
User
Experience
What is
“ Derived from a design philosophy
where UI is developed based entirely on
end-user’s needs, wants and
limitations, applied throughout the
design processes and development
lifecycle. ”
- This design philosophy is called UCD or User-
Centered Design.
8
12. Ultimate Goals of UX is Intuitive Design
An application made through UX Processes requires:
- A minimum cognitive abstractions (a.k.a thinking),
- and, a minimum experimentation if necessary,
- Resulting in an understanding which contains the
maximum correctness with maximum confidence
- Applicable to the the maximum diversity of user.
12
15. Why is it the utmost important in UX?
● It is the first pillar of UX
○ Because if this is done INCORRECTLY:
■ Your design will just be UI Design.
■ It will resulted in scope creep.
○ Because if this is done CORRECTLY:
■ It will provide additional income.
15
16. Project
Scope “ A defined and documented list of specific
project goals, deliverables, tasks, costs and
deadlines. It establish boundaries of the
project and provide the base for verifying
completed work. ”
16
18. Why scope creep is scary?
1. Causes more work with no additional income.
2. Delays project completion.
3. Causes reputation loss and lower client satisfaction.
4. Causes less employee satisfaction due to overtime and (in
many companies), no compensation.
18
19. TechTarget:
“ It is natural for parts of a project to change along the
way, so the better the project has been "scoped" at the
beginning, the better the project team will be able to
manage change. When documenting a project's scope,
stakeholders should be as specific as possible in order to
avoid scope creep, a situation in which one or more parts
of a project ends up requiring more work, time or effort
because of poor planning or miscommunication. ”
19
20. How does it provide additional income?
● If everything is scoped properly, and, since there is always gonna be
changes in project scope, then all changes requested can be CR
(change request)’ed
20
21. CR “ A formal proposal for an alteration to an
aspect of the app. Because change requests
are beyond the project scope (hopefully),
generally the client will have to pay for the
extra resources required to satisfy them. ”
Change Request
21
24. CAUTION
Because of the time frame, the following lecture will
not cover all of the things that should be done by a UX
Developer. Do look back at the contents of this lecture
and google keywords that you want to study more.
24
26. Define Project Parameters
The first items to ask in any project:-
1. Minimum browser requirement.
2. Which devices end-users will use the web/app on.
3. Production environment scenario.
26
27. Minimum browser requirement
Example: IE 10 and above (should be a standard requirement)
Why?
- Because this will determine front-end technologies used e.g. whether we can
use Jquery 2.0 or not, whether can use CSS3 or not, etc., etc.
27
28. Which devices user will use the web/app on
Example: Desktop only, or mobile, tab
and desktop.
Why?
- This will determine front-end
design approach, whether it will be
responsive, mobile-first or
"regular" desktop design.
28
29. Production environment scenario
Example: 3-tier Service-Oriented Architecture (SOA) so there must be a physical
separation between presentation and business logic, with or without load
balancing, etc., etc.
Why?
- This will determine front-end architecture design, whether it is going to be a
Single Page Application approach (SPA), AJAX web application or the
"regular" webforms application.
29
30. CAUTION
Although there are many other methods that should be
used for getting thorough and correct user requirements in
UX Design stage such as User Interviews, Prepare Mental
Model, Storyboarding, Card Sorting, etc. etc. but we are
going to focus only on one process, WIREFRAMING
30
31. “ In the nutshell, it is a skeleton of a page. It reflects
designer's ideas on the placements of UI elements
on the page and how users to interact with the site.
It should ignore the visual style of page because its
purpose is to show content placements and
behaviour of the page. ”
Wireframe
31
32. Minimum prerequisite for Wireframe process
The following should have been done by Business Analyst / System Analyst:-
1. All workflow processes are captured in a form of flowchart / swim-
lane diagram.
2. Content Inventory and site-mapping process completed.
32
33. Checklist for Wireframe Process
When doing wireframe, the following questions have to fulfilled:
1. What are the contents of this page.
2. How are these contents to be organized
3. Each content’s level of importance (content highlighting)
4. Where users can go from here
5. Where is this page on the whole frame of site.
6. Are there any specific behaviour to showcase e.g. dropdowns, popup, hover
events, etc.
33
34. Wireframe 1. Sketch on paper or drawing board and
brainstorm.
2. Wireframe with software and mock
interactions for each process and
subprocess.
3. Add Visual Mockup on main items.
Process
34
36. Wireframe Step 1: Sketching
1. draw all elements needed for that interface, down to the last
detail, explore different ideas of layout, be open and creative
about it and decide on one.
2. Re-sketch as needed and repeat the process.
3. Document final decision of all processes brainstormed. The
easiest is to capture with phone camera and email to everyone.
36
37. Wireframe Step 2: Wireframe with software
1. Use grid template.
2. Draw final sketch layout with respects to grids.
3. Define Information Hierarchy with typography.
4. Fine tune with grayscale.
5. Decide on what UI elements to use, simulate behaviour and
document the decisions.
37
39. Note: This is not really considered part of wireframing but because at this point we should have the page
layout, content organization and UI elements in place, we might as well fine-tune and beautify.
1. Add in static contents such header design, footer design, logo
and other actual or sample images.
2. Add in Color Scheme to the wireframe.
3. Add in Typography.
4. Set actual borders, paddings and spacings for all elements.
Wireframe Step 3: Visual Mockup (High Fidelity)
39
42. Now that we know exactly what the
client wants, LET’S CODE!!
42
43. NOT SO FAST
my friend..
Let’s start with the basics
BEST
PRACTICES
43
44. Why follow best practices?
1. Foster code consistency across projects.
2. Facilitate ease of maintenance.
3. Ensure creation of professional quality (web)
applications.
44
45. Now chant after me!
● Semantic HTML for structure
● CSS for presentation
● JavaScript for behavior and interaction
- By the way, these are the three pillars of front-end development.
- Always, always follow these rules.
45
46. HOMEWORK
Read through the Isobar Front-end Code Standards at
http://isobar-idev.github.io/code-standards/
It is a work-in-progress but it has all the best practices
you will need to follow already.
46
47. Use Visual Studio Code
● It is built for front-end developers
● It can open (solutions) format from other
Visual Studio versions.
● It has a kick-ass HTML/CSS/JS Intellisense
engine.
● It’s Free! Download at https://code.
visualstudio.com/
Dev Tool
47
49. Get started quick and safe
For all projects:-
1. Use front-end template
2. Use front-end framework
49
50. Why front-end template?
1. Because they have implemented almost all best practices
to start and complete any front-end development project.
2. A correct setup will make your pages looks good even with
default setup. Provide a good baseline setup.
3. Prevent your page to break horribly on certain (version) of
a browser.
50
51. Why front-end framework?
1. Tested and deployed in millions of web application. Trusted.
2. We will be adhering to best practices since coding using this tool require
specific code standards or it will not work.
3. Because of the built-in UI elements that they provide, we do not need to
create them from scratch. One keyword Rapid Application Development
(RAD)!
4. A correct setup will make your page even better even with default
configuration.
5. Because it support responsive web design and mobile-first approach by
default. Will not have to to create different viewport screen design for each
viewport size manually.
51
52. Sample starting template. Download at https://drive.google.com/folderview?
id=0B9ZMQ__JVBh6WDBhOFVXQU9XbnM&usp=sharing
52
53. HOMEWORK
Go through these sites’ contents and documentation:-
https://html5boilerplate.com/ - Front-end Template
http://getbootstrap.com/ - Front-end Framework No 1
http://foundation.zurb.com/ - Front-end Framework No 2
53
54. 1. You have to be good in HTML
2. You have to be good in CSS
3. You have to be good in Javascript, specifically JQuery.
Surprising, right?
- But those are already the standard requirements to be a good UX developer
anyway, right?
Standard Requirements for using Front-end Tools
54
56. UI
56
Elements
“ UI Elements are code combinations of
HTML, CSS and JS that makes up a usable
components of an web app. ”
Category of components are (not comprehensive):
1. Navigation
2. Form
3. Content View (Item)
4. Helper