Wireframes - presentation

A wireframe is a simplified black and white version of designs that work as a bridge between developers, designers, project managers, and clients. They ensure everyone is on the same page while discussing the overall structure and functionality of the product.

Wireframes are stripped of any decorative elements like logos, visuals, fonts, and colors that could distract team members at this point of the product discussion.

A mentor-ship session for students of Institute of Emerging Careers on importance of wireframing in design process.

3. What is a wireframe?
Wireframe define dimensions and placement of page

elements, information architecture, intended behaviors,

and navigation for your website.

4. All designs should start with a

It is the skeleton blueprint of
any website or app.

5. a Benefits of using the Wireframes

© Allows to plan and structure a page's basic layout quickly
© Wireframes are cost-effective.
© Encourages team collaboration.

© Fast to deliver.

7. 9 What are Wireflows?

Wireflows are diagrams designers use to document 090

interactionsland show directionalflow

10. O Wireframes & UX/UI

Every product is Uniguejand the wireframing order you

choose should depend-on the project

11. The best design process isn’t linear.

It takes an it@rativé approach in which designers are

involved in product development at early stages and can
rapidly share, test, and validate ideas.

13. Wireframing for information
design

Wireframing helps information
designers make sense of data for
users.

With wireframes, you can:

+ Plan content strategy.

・ Proofread and review copy for each
page.

・ Organize and categorize information.

・ Plan the layout of each unique page.

Stats
Click story below to view detailed stats Y Filter
46.985 4.764 4462
Viens (30 days) Reads (20 days) Fans (30 days)

14. Wireframing for navigation
design

Navigation helps users get from point A
to point B in the least frustrating way.

Using wireframes, designers decide on
such things as:

+ Logical and consistent placement of
the primary navigational links,

Placement of secondary navigational
elements, such as submenus,
breadcrumbs, and search,

The expected behavior of navigational
elements.

New & Featured
New Releases
Best Solers
Trending: Neon
Sales to 40%

New from 2021

New

Help JoingUs Signin

Man Women Kids Sale @

Shoes

Lifestyle

Running

Training & oh

Track & Field
Sandals & Siides

All Shoes

Clothing
Pants & Leggine
Hoodies & Sweatshirts
Jochets & Vest

Shirts & Dresses

All Clothing

15. Wireframing for UI design

Wireframes display the main features, functions,
and content of a future user interface without
diving into visual design

Wireframes benefits in determining:

+ Controls (links, buttons, headings, body text,
icons, etc.),

・ Patterns — groups of controls (header, image
grid, search function, etc.),

・ Design principles (contrast, hierarchy, proximity,

alignment, etc.),
+ Templates (search results, category page, check
out page, etc.)

17. a Wireframes- Best practices

Jot down @lplamland formulate why you need wireframes in

the first place and what Boals you expect to achieve,

18. ◉
◉
◉
◉
◉
◉
◉
◉

19. ◉
◉
◉
◉
◉
◉
◉
◉

20. ◉
◉
◉
◉
◉
◉
◉
◉

21. ◉
◉
◉
◉
◉
◉
◉
◉

22. ◉
◉
◉
◉
◉
◉
◉
◉

23. ◉
◉
◉
◉
◉
◉
◉
◉

24. ◉
◉
◉
◉
◉
◉
◉
◉

25. ◉
◉
◉
◉
◉
◉
◉
◉

26. 5

31. Thanks!

Any questions ?

You can find me at

© www.usman.design
© www.linkedin.com/in/usmani87/

Wireframes and Illustrations from uxcel.com