Skip to main content

UI/UX Introduction - What I learned


When I was young, I was passionate about computers. We couldn't have access to that. Usually, I play with some of the cardboard waste and make a computer screen and keyboard out of it. 

After I got a good score in my O/Level exams, my father asked, "What do you want as a gift?" And I said I wanted a laptop. Then he purchased me an HP laptop. It was the best gift ever; I got it after a long wait.

Later, I became familiar with basic computer skills slowly and started exploring the world through technology.

Then, I chose IT as my career path eventually.

Here, I'm sharing my learning experience to track my progress.




UI/UX Introduction - What I learned


It's a free course for beginners.

Summary of this course:
  • UI means interaction with user and website/product/app
  • UX means what user experienced while using this UI

Example: Using the Apple website, they direct their customers clearly to their products - It's a good UX

https://www.apple.com/iphone/ 

When a user experience the best UX in a product he/she never goes back to another product/ brand-  Apple products 

  •  UX discussion 
                        Who is that for (user/audience)?
                        What is the product/service?
                         How does the user behave while using the product? (user behaviour)
                         Understanding the users
                         Critical thinking

  •    UX Process

         Research work

                             Wireframing

                             Understand revision request

                             Create prototypes

                             User Testing

                             Understand the feedback

                             Apply what you learn    

  •  Wireframe & Prototyping

                                 


"A/B testing is the most reliable way to learn user behaviors. As designers, we should think about our work through the lens of experimentation. "  - Medium (reference)
  https://uxdesign.cc/how-netflix-does-a-b-testing-87df9f9bf57c
https://www.invisionapp.com/inside-design/wireframe-prototype-difference/

  •  UX Tools

                    Invision 

Photoshop 

Adobe XD 

Figma 

Pen & Paper 

  •  UI Tools

Adobe Illustrator

Photoshop

Invision

GIMP

Adobe color

Pen & Paper

  • UI concepts

Visuals, Typography, Mood, Motion Design (Animation), Icons, Interaction Design 


 

 
 
 
 

 

 

 

 

Labels:

Comments

Post a Comment

Popular posts from this blog

Fourth day at Uki

 Programming Languages. The programming language is a formal language comprising a set of instructions that produce various kinds of output. Programming languages are used in computer programming to implement algorithms. Because the computer only understands "0 and 1" Most programming languages consist of instructions for computers. Javascript, Java, Python, C#, C++, HTML, CSS, RUBY, NodeJS are some examples of web development languages used in programming. Moreover, we can simplify our problems with Flowchart and Pseudo code before coding in programming languages. Look at this image, This is a simple flow chart to solve a problem HTML -Hyper Text Markup Language. I strongly suggest learning HTML first with  https://www.w3schools.com/ It's a learner base code academy to learn quickly. We can use Notepad++, Visual studio code, Atom.io (via  https://en.wikipedia.org/wiki/List_of_HTML_editors ) This is an example of a basic heading style in HTML This is the output. Paragraph...
Post a Comment
Read more

Boostrap 4

What is Bootstrap? Bootstrap is a free front-end framework for faster and easier web development Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, and many other, as well as optional JavaScript plugins Bootstrap also gives you the ability to easily create responsive designs.  Why should I use bootstrap 4? Bootstrap 4 is the newest version of Bootstrap; with new components, a faster stylesheet, and more responsiveness. Bootstrap 4 supports the latest, stable releases of all major browsers and platforms. However, Internet Explorer 9 and down is not supported. If you require IE8-9 support, use Bootstrap 3. How does bootstrap 4 Work? Step 1: Setup and overview. Create an HTML page. Load Bootstrap via CDN or host it locally. Include jQuery. Load Bootstrap JavaScript. Put it all together. Step 2: Design your landing page. Add a navigation bar. Include custom CSS. Create a page ...
Post a Comment
Read more