Information Architecture & Sketching for UI/UX Projects | Behind the Design Part 4
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2020
- Behind the Design of Essence: Smart Diffuser App | Part 4
Skillshare Class: skl.sh/3pcWnGC
Source file: bit.ly/3xacLLR
In this series I'm walking you through the behind the scenes of my Smart Diffuser App project, which you can check out on Behance here:
www.behance.net/gallery/10164...
In Part 4, I go through my process for determining important touch-points, putting together the information architecture for the app, and starting to sketch the important flows.
Here's the sketching template I use:
cdn.dribbble.com/users/12721/...
As always, leave any questions or video requests below! :)
Instagram ➭ @maddybeard.ux
Twitter ➭ @_maddybeard
Monthly Newsletter ➭ maddybeard.com/visual-qs
A great thing to take from this is reminding yourself that designing "is an iterative process", you won't get it perfect first time, its very easy to be hard on yourself especially when you're a perfectionist.
Some of the most underrated channel on TH-cam. Keep up the good work!!
Thanks so much! :)
As someone who is teaching themselves UX, your channel has been more than helpful. Gonna use this to help the IA of the app for my portfolio
Thank you!! I’m so glad :))
showing your earlier designs really helped me in understanding the concepts
Love the way you say "architecture" 😍
Hey... this is really great and informative. teaching a class today and this will help give them a good idea of some processes in UIUX design
Thanks, that's so great to hear! :)
Quality Content Here!!!!
THANKS MADDY
Thank you for this great video!
But for me there’s still something unclear:
1. what is the difference between a Sitemap and an Information architecture?
2. What exactly does an IA contain and what not?
For example: there’s a homepage with a top menue. When you click on prouducts a drop down menue appears, where you can click on product A. The product A page contains a lot of CTA Buttons like contact sales or pricing and further internal links. Should all these URLs (CTAs, internal links) be listed in the IA as well? The CTAs will also be partly repeated on the page Product B. Should this also be listed in the IA when they repeat?
Good questions, I hope she answers because I want to know too
Excellent video.. I always learn in your channel.
Would you be able to do a more in-depth video on user flows and what information to put in/how to structure different user flows?
Hey Maddy, nice video! How many sketches do you create per each screen? Do you always try to create more than one to ensure you have considered all possible options? Or do you already have clear solutions for some of the simpler screens? Also, how do you test your concepts at this stage? Thanks in advance! :)
Yes! I do sketch several variations per screen. Sometimes it just takes a couple tries... sometimes it takes dozens! After seeing this and your previous question on ideation techniques, I wanted to let you know that both of these topics are covered in much greater detail in the Skillshare class I published recently :) No pressure at all, but thought you might find it helpful. You can use this link for a free 14 day free trial if you're not already on Skillshare. Thanks for your thoughtful questions! skl.sh/3pcWnGC
@@MaddyBeard thank you, I will check it out! :)
Nice😍
I love this, my question is do you sketch different screen flows and the likes before drawing a site map?
I usually tackle the IA first because it's the most basic representation of the content so it's easier to organize at that stage. Then, if things really do need to change, I might discover that at the sketching phase and tweak accordingly :) Good question!
OMG
i literally thought that I was going crazy because my sketch process is very chaotic and sometimes I get lost myself
Lady what job description would be great for looking for my first UX position. I thought it would be easier to got for web design
Hi a quick question please... the project you have linked to behance (the clip you showed at the start of this video) is that your case study part? I'm struggling to understand the separation of the case study and the portfolio. So far I believe the case study is the who what when where why and how behind the design including the research and results. And the portfolio is the final outcome. Is this correct? Or should the portfolio contain the entire visual process? Or should the portfolio be selected parts of the entire process with annotations? I'm confused, thanks x
oh also! just watched more of your videos since and thought of something else. If our IA changes do we need to include the old one in our case study/portfolio and explain why we changed it? or just include the newest best one?
Very informative video thank you 😊 but the thing is please make tutorial videos on all UX design process with making so it can clear the things how to do actually in real scenario. Thank you 😊
That's exactly what I've done! :) Check out parts 1 through 3, part 5, and part 6 and 7 coming soon!
th-cam.com/play/PLAc81DyF_mAC7-9mBKIr2Nl9drgeFjjCJ.html
If you have any process you want to learn that were not included, definitely let me know and I'll keep it in mind for a future video.
Yeah sure.. thank you so much 😊😊
Very good explanation
Thanks and glad it was helpful!
If I am getting you right, you decide on whether to build a web app or mobile app after you have conducted interviews. I have been thinking that a client will give you the specifics of what they want, like they tell you whether they need you to make them a mobile or web app. Isn't that the case? Is it the job of a UX designer to decide?
I feel it's the designer's job to take the research and make recommendations as to the best way to move forward. The client may also want input in those decisions too!
@@MaddyBeard Okay. Thank you for the feedback
Hi Maddy, your videos are way far better than tons of "classes"! I came up with what could be a dumb question, but, when you create your sketches you think of specific features, like a certain kind of buttons, a drop-down menu, a search engine, a box to be ticked, etc. How did you get familiarized with all these small artifacts? I mean, how do you know what are your options when it comes to gadgets? Is it just that after browsing and cracking the IA of many sites you know what your tools are? Or you "studied" these elements in particular, as a separate subject? I hope I'm being clear enough. Thanks!
Thank you so much! This is a great question - it’s just something I’ve gotten familiar with over time working on different products and projects. But if you want to familiarize yourself with all the different kinds of components, you could look at open source design systems! Some great ones are: Apple’s human interface guidelines, google’s Material design, Shopify’s Polaris, etc. :)
Hi. Can you give me a link for part 1, part, 2 and part 3? thanks
Can you share your project link of behance
Ok i have a question
Should I sketch all the pages of the app including the states ?
Or just sketch the state buttons and so on
It’s honestly up to you!! I just sketch until I feel comfortable moving to digital :)
How long do these projects take?
I spent 3 months on this one working on it half-time or a little less :)
do you have courses that you offer?
Not yet but I'm working on my first Skillshare course right now! Hoping to launch in the beginning of March :) It will be for beginners and those transitioning from other design disciplines into UI/UX.
As a UX designer i am just curious to know why haven't you mentioned anything about task identification, task flow creation and task flow mapping, card sorting, grouping ? that is what is going to help to create the IA. I am just exhausted of people teaching wrong design ... c'mon guys!
There’s more than one right way to do things 😀
@@MaddyBeard i dont deny that... interesting... let me try your way of IA with a comparatively larger app or website. i have a feeling that it might create issue in that case
Nice video maddy please learn to me adobe xd
Definitely got some Adobe XD tutorials coming up! Let me know if there's anything specific you're looking to learn :)
wtf? you don't even have facial hair??