Тёмный

How to wireframe a website 

CharliMarieTV
Подписаться 229 тыс.
Просмотров 119 тыс.
50% 1

Опубликовано:

 

10 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 130   
@IanMarder
@IanMarder 4 года назад
Literally the best advice I've ever received, and constantly need to remind myself, is to stay lo-fi for as long as possible. This wireframing process reinforces that advice. Awesome video.
@salvadorkeaton251
@salvadorkeaton251 3 года назад
you probably dont give a damn but does anybody know a method to get back into an Instagram account..? I was stupid forgot my login password. I love any assistance you can offer me
@JamieMPhoto
@JamieMPhoto 4 года назад
I'm extra excited that all the stuff I did laying out newspapers and magazines was literally the base of wireframing and that I really do have this skill truly already in the toolbox. Awesome!
@evvie01
@evvie01 Год назад
Me too. for a local magazine. Dummy pages for Smarties.
@carlosmarquis4234
@carlosmarquis4234 Год назад
the irony of your handwriting and the fact that you're selling a font is top tier. Watching your video for school, I enjoyed watching your flow
@charlimarieTV
@charlimarieTV Год назад
haha! Lettering is verrryyy different from writing after all! it's more like drawing.
@myxsys
@myxsys 4 года назад
Thank you so much for creating this video. I was stuck for about a week on how to go about the design process. I love your workflow which is simple and straightforward.
@ffgfhfd5955
@ffgfhfd5955 3 года назад
In nmfq
@MarkWhiteartist
@MarkWhiteartist 3 года назад
Really love this, I love how you do a colorless draft first to help keep focus on other things.
@RedFox-st1yw
@RedFox-st1yw 3 года назад
Wireframing tends to be very confusing at first but the paper and pen idea works. Going high fi ruins the ideas immediately. Will definitely apply these ideas
@chienandaluz
@chienandaluz 4 года назад
Since I saw your last video (the previous one) I wanted to comment that I'd really like to see a video where you explain the artboards sizes you use (and breakpoints, of course), grids, main containers, typography scale and the correct size/use of buttons. Now that is written I think is too much hahah
@GreciaOmana
@GreciaOmana 4 года назад
It was amazing to see your wireraming process! Sometimes it can feel obvious but it’s not, I loved the advice of forcing yourself to create one more idea, it can give you the feeling that you explored enough before going forward with one idea. Thank you for sharing!
@charlimarieTV
@charlimarieTV 4 года назад
totally! and I often surprise myself by coming up with ideas that weren't in my head initially. Thanks for watching!
@jill3704
@jill3704 4 года назад
Free-flowing with ideas first before trying to play around and make it happen was a gamechanger that I learnt from you maybe even a few years ago now. I literally have to be in another room to my laptop or have it turned off to do this otherwise I get caught in a "let's try it" or "look for inspiration" vortex! Only recently got an iPad and am LOVING using Concepts. Way quicker than paper haha
@skoolie_life3261
@skoolie_life3261 4 года назад
Thanks for the wonderful video! I’d love to see a video on how you stay up to date on design trends and maintain an up to date look on the sites you design.
@taexyang
@taexyang 4 года назад
If I have time my design process is quite similar or sometimes I would just show my sketches on paper to the webdevs and if it's clear for everyone we would jump directly to final design. Worst scenario I had was when I had to design a one page website in one afternoon and I jumped directly to design ... It turned out ok and worked well but as a designer I wished we would have more time and more funds on this project
@infiniteinnocence
@infiniteinnocence 4 года назад
This is SO HELPFUL!!! Thank you, Charli! I'm literally in the wireframe process of my first freelance web design project and it's comforting to know your process (eeek! I got this!) I'm using a pad of paper right now (ugh) and upgrading to an iPad is definitely a top priority for my next project! >_
@handlebendover
@handlebendover 3 года назад
You can use a phone too with a stylus ???? O
@handlebendover
@handlebendover 3 года назад
Or maybe a budget drawing pad tablet etc you see you have to think inovvation
@handlebendover
@handlebendover 3 года назад
Or this too ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8-rPLMErdFU.html
@allishagreen4385
@allishagreen4385 4 года назад
Thanks for the videos. please keep the video coming. you do a great job and I am learning so much with each video ❤
@charlimarieTV
@charlimarieTV 4 года назад
Thank you for this kind feedback Allisha! I’ll keep going ❤️
@dorenesmith4808
@dorenesmith4808 Год назад
Thank you so much, Charli, for showing this where it doesn't have to be perfect! I get so intimidated when I see all the 'pretty' stuff. I don't do 'pretty'. You should see my bullet journal! ;)
@stevegreeley5080
@stevegreeley5080 4 года назад
So helpful. Thank you! I liked the idea of pushing your creativity to exhaustion, then pushing for two more designs. You're awesome.
@prabhathsannasooriya
@prabhathsannasooriya 3 года назад
i am new to this chanel .this chanel is very importent for my future career. thanks for creating
@PcHabitat
@PcHabitat 4 года назад
Hi CharlieMarie, great video. You hit it on the bullseye for, I have abad habit of going straight into prototyping in Figma without even doing a low/high fidelity wireframe let alone even draw my ideas. Its really hard to resist going straight into the prototype for me.
@pieteb_nl
@pieteb_nl 4 года назад
Really good stuff! I'm completely blank in UI/UX design. This is good puzzle piece in my journey to learn a bit more about it.
@ap2099-k2m
@ap2099-k2m 3 года назад
Thank you so much for this video! So short and straight to the point (a rare thing on RU-vid :) ). I was a bit stuck in this lo-fi prototyping phase on a project, but you totally helped me get back on track. Great point about just jotting down as many ideas as you can, and then a couple of more! :D
@akky335
@akky335 4 года назад
damn I was looking for some video to help me figure out what is the process and where to start... your method gave me a clarity from where I should begin creating a webpage.. Thanks A Lot...!!
@mariahvicary
@mariahvicary 3 года назад
This was so helpful!! Thanks so much for being so transparent with your process!
@mridhu21
@mridhu21 2 года назад
Great info! I am just starting out with funnel design and totally loved all the info here.
@william.darrigo
@william.darrigo 4 года назад
Thank you! It's great to hear your design process. Will give it a try
@mofo1545
@mofo1545 3 года назад
Thank you so much Charlie. I'm getting more insight watching this video 💕
@rujutasondur2765
@rujutasondur2765 4 года назад
Love seeing your process Charli !!!
@allthenonsense1658
@allthenonsense1658 4 года назад
Clearly explained, thank you!
@pew4410
@pew4410 2 года назад
how do you get on 11:08 the left sidebar with all the buttons? if i open figma i only have like a topbar where I only can do like rectangle and stuff
@charlimarieTV
@charlimarieTV 2 года назад
That’s my component library! It’s something you create for yourself (though I’m sure you can find a Community file with a design system template to copy)
@hrlayz
@hrlayz 4 года назад
Thanks for that video... It really gave me some good inspiration for the site I'm working on, and the process 😊👍
@gauthier13
@gauthier13 4 года назад
Hey, thank you for this video ! It helps me
@KB-wx7it
@KB-wx7it 3 года назад
So helpful, thanks Charli!
@danimvijay3089
@danimvijay3089 4 года назад
Cool one. But that figma part reminded me of how to draw a horse meme :P It'll be great if you can do another tutorial on translating wireframes to figma.
@charlimarieTV
@charlimarieTV 4 года назад
Sure thing! I was worried that would be too boring as it’s literally just drawing rectangles which is pretty easy... 🤔 you’d still find it interesting to see tho?
@danimvijay3089
@danimvijay3089 4 года назад
@@charlimarieTV I see. Quite new to figma, and that might be the reason I found it confusing. Noticed you've done a 101 series on figma already. Will check it out instead 👍
@abujafor6472
@abujafor6472 3 года назад
this video really most helpful for me in designing a wireframe.
@daflexx2003
@daflexx2003 3 года назад
what the hell is going on with you man ? really you need this shit ?
@abhinavkarkare
@abhinavkarkare 4 года назад
Much needed video. Thank you 🙏🏻
@tuzinb
@tuzinb 4 года назад
At what point do you pick a good design (after wireframing in Figma I mean) or is it a design group decision in companies and it's not up to you? Sometimes I like multiple ideas and I see both working for the project I work on and can't decide.
@lemonbuzz642
@lemonbuzz642 Год назад
This is where you'd go back to your team and make a team decision if you cannot decide. Or make the decision yourself based on data and research.
@danieladegboyega6471
@danieladegboyega6471 4 года назад
Big fan of your work
@daberechiukoha-kalu356
@daberechiukoha-kalu356 3 года назад
same girl from video in 2015?! lovee
@jeremr-n2938
@jeremr-n2938 4 года назад
i probaby never do enough wireframe, what i do for aps is to try getting as much as possible so i will do nice enough paper versions to already get feedback and then work my way to a higher fidelity asking for feedback at each steps. this means there is a lack of creativity in the flow. right now I design components like a slider or an input box for a form ad then for the ui I force like to make 20 high fidelity versions of what a slider could be like.
@adebowaleselere4254
@adebowaleselere4254 3 года назад
Also, How do you pull inspirations for the layouts of the wireframes?
@praveenparamata
@praveenparamata 2 года назад
Everyone will watch the video till the end, You need not say it to us. But I really wanna say the reason behind is.. you look too beautiful.❤
@andresparedes9557
@andresparedes9557 4 года назад
I love your videos , you are fantastic *-*
@imanijx
@imanijx 3 года назад
This was amazing, thank you! :D
@wgm247
@wgm247 4 года назад
Great excuse for an iPad pro now :)
@MeghanCreative
@MeghanCreative 4 года назад
All of your videos are amazing but this is a random request for a vlog -can you show us how you dye your hair like that? I love the colors and that aesthetic but I have no idea how to dye my hair (or like non-toxic dye options or anything).
@charlimarieTV
@charlimarieTV 4 года назад
I'll try to remember to dye it in the next vlog! spoiler alert though: I dye it a very bright purple, and then it ends up looking all pastelly like in this video after a couple of weeks as it fades.
@MeghanCreative
@MeghanCreative 4 года назад
@@charlimarieTV amazing!
@davidchollez5784
@davidchollez5784 4 года назад
Crazy 6 for the win 💪
@agnemedia624
@agnemedia624 3 года назад
Great wireframe preparation and clean figma out output Very helpful tip and direction Do you face and issue engineering explaining flow (did you use lucidhart to present flow chart and complexity of interaction “if”?) Thank you
@AkinsRealm
@AkinsRealm Год назад
I guess wireframing tutorial that’s mentioned by Chris Do at The Futur podcast episode (that you’re the guest) was this one? :)) Thank you!
@charlimarieTV
@charlimarieTV Год назад
hi! it probably was :) I have an older one too about how I used to wireframe on paper, but this is still my current process as shown in this video!
@AkinsRealm
@AkinsRealm Год назад
​@@charlimarieTVI'm sure there are going to be people like me searching "Charli Marie wireframing tutorial" on RU-vid after listening that episode😊👍
@chukwumaudokporo2586
@chukwumaudokporo2586 3 года назад
Awesome content, Charlie! Quick question...Do you use references for your wireframes or you ideate straight from your head? Just wondering. Thanks
@paulcasperjr
@paulcasperjr 4 года назад
Charli great stuff! Do you ever use wireframe "kits" for the gray boxes? I know theres a few "kits" out there like platforma that might help me cut down on time creating my own layout sections in figma. Wanted to know your thoughts on those. Thanks!
@kennytieshisshoes
@kennytieshisshoes 4 года назад
This was a really great video.
@y.nunungpamungkasjayuda3997
@y.nunungpamungkasjayuda3997 3 года назад
Hey Marie, Have you try Object menu for wireframing - for example you can use template such as button, image or etc in concept app. Thanks
@personsomething8960
@personsomething8960 4 года назад
Hi, I'm barely jumping into this and making sure it's right for me (seems to be in the few hours of research) and I was wondering what were some of the best things to get into for the T shape chart if I'm more into web design and want to be open for logo designs and such. I'm not going for motion graphics or animation I'm thinking of going into either studio work or freelancing and just wanted to know what you think the best steps are to take.
@adebowaleselere4254
@adebowaleselere4254 3 года назад
Thanks for this Video. But, Do you have any idea of wireframing anything outside a landing page or a Website? Like a Webapp. If yes, Great. If no, Do you have any video that you can recommend?
@clarkemily2279
@clarkemily2279 3 года назад
omg you are so pretty
@sebluketravis2438
@sebluketravis2438 2 года назад
I like to sketch and then import and trace in "my-fi" so not high fidelity or boxes.
@ANIEKANEDET-kl4uu
@ANIEKANEDET-kl4uu 2 года назад
Awesome
@mamadoukone6839
@mamadoukone6839 3 года назад
Thanks 🙏🏾 Charlie For this 👆🏾 Content !
@lostintravel14
@lostintravel14 3 года назад
Do you use 11inch ipad pro or 12.9inch. Which size do you prefer.?
@charlimarieTV
@charlimarieTV 3 года назад
I have the smaller one! I really like how portable it is and never really find myself wishing the screen was bigger.
@marioserodotou2958
@marioserodotou2958 4 года назад
Lovely video!
@renansm
@renansm 4 года назад
great video, does anyone know any program or website to draw on the computer?
@TrueLee00123
@TrueLee00123 4 года назад
Thank you !!!
@Damainefy
@Damainefy 4 года назад
Great content!!!
@saadb2670
@saadb2670 2 года назад
What tool you used ?
@Mo_TEK
@Mo_TEK 3 года назад
thank you ^^
@Sawleyhuh
@Sawleyhuh 3 года назад
Which software are you using on iPad?
@mae2309
@mae2309 4 года назад
this was a dope video....dope. dope.dope.
@charlimarieTV
@charlimarieTV 4 года назад
Glad you enjoyed it!
@adrianmarciante
@adrianmarciante 4 года назад
Thanks for the great video. Apologies for the dumb question, but what video capture software would someone use to capture the screens in a video like this (with the cool zooms etc)? thank you!
@charlimarieTV
@charlimarieTV 4 года назад
the cool zooms etc were all done by my editor I'm afraid. I just record my screen using QuickTime. But I hear Screenflow (i think thats the name) is a good tool for it too!
@adrianmarciante
@adrianmarciante 4 года назад
@@charlimarieTV great...thanks for the info 👍
@juliustanoey1012
@juliustanoey1012 3 года назад
Do you show your team only the best or all of the wireframes? Considering one website could have multiple pages, it will be overwhelming to show different ideas for each pages.
@charlimarieTV
@charlimarieTV 3 года назад
I only show them the ones I'm interested in moving forward with! and as I work inhouse I'm usually only designing one page at a time so it's not too bad
@juliustanoey1012
@juliustanoey1012 3 года назад
@@charlimarieTV wow thanks! It helps a lot, you are amazing!
@jacklee8695
@jacklee8695 4 года назад
Thank you for the video, it's so helpful. I am considering buying the new iPad pro to replace the paper and pencil in the daily design works. If let you rate iPad pro to replace paper and pencil for some sketch and wireframes of design works, how much are you going to rate(10/10)?
@charlimarieTV
@charlimarieTV 4 года назад
i don't do any sketching or wireframing on paper anymore! :)
@jacklee8695
@jacklee8695 4 года назад
@@charlimarieTV Earth is getting greener because of you! New iPad is coming out soon and I will definitely buy one after the Apple Event. Thanks for your time. Your videos are so helpful:D You made my day.
@jacklee8695
@jacklee8695 4 года назад
CharliMarieTV i will get my iPad today! So excited. And coming back to review your video again. Apple and Concepts should thank you too :)
@jacklee8695
@jacklee8695 4 года назад
CharliMarieTV Design with iPad and Concepts is just So great👍
@thearaav6670
@thearaav6670 3 года назад
Hi Sis! The ConvertKit website is designed by you?
@charlimarieTV
@charlimarieTV 3 года назад
Yep the website is! But not the app.
@noface960
@noface960 4 года назад
thank, xoxo
@CallumLovekin
@CallumLovekin 4 года назад
What size iPad have you got? Im looking to get one for wireframing!
@charlimarieTV
@charlimarieTV 4 года назад
I have the 11 inch! I really like it. Would choose it again over the larger one for better portability.
@CallumLovekin
@CallumLovekin 4 года назад
CharliMarieTV that’s great to know thank you very much!
@audiosex
@audiosex 4 года назад
Question Charli....are you good at coding? Cause I want to get into web and UX but I suck at coding
@charlimarieTV
@charlimarieTV 4 года назад
You absolutely do not know how to need to code to be a UX designer. An understand of it is very valuable and I’d recommend that. But coding and UX design are two different jobs.
@audiosex
@audiosex 4 года назад
@@charlimarieTV Oh thank goodness...cause I love the visual but coding gives me a headache. I mean I know basics here and there with HTML and CSS but I rather if someone else can do that job faster than me ya know Thanks for that
@jizan8344
@jizan8344 4 года назад
Hey, Happie to see you ... i saw a plugin in figma, What about that ?
@charlimarieTV
@charlimarieTV 4 года назад
Which plugin do you mean?
@jizan8344
@jizan8344 4 года назад
@@charlimarieTV wireframe, Just 5 min before I watched your video I just saw a plugin, and no one had commented on your video yet. I felt like I need to comment on something and mentioned that plugin. anyway, its a plugin called "wireframe". you don't have to explain that to me. your contents are super cool , i love watching your videos , with lots of love :)
@safaecreates3361
@safaecreates3361 2 года назад
Question for designers: how do you keep yourself positive and motivated throughout this process? And not constantly thinking "oh that idea is shit, oh that's so basic" and then just losing that creative + innovative spark ?
@arthurasta96
@arthurasta96 2 года назад
We don't need to be always "creative" and "innovative", most common (and WORKING) patterns already were invented for last 20 years or so. Basic things is everywhere, just make sure your users is happy. If you want to win Awwwards? That's another question
@kaziratna2943
@kaziratna2943 4 года назад
I need your help
@moviesmovies3132
@moviesmovies3132 4 года назад
Hi 👋
@clarenceaigbuza3479
@clarenceaigbuza3479 4 года назад
I oddly have my ideas while I'm designing
@charlimarieTV
@charlimarieTV 4 года назад
Wireframing is designing! :)
@clarkemily2279
@clarkemily2279 3 года назад
9:33
@clarkemily2279
@clarkemily2279 3 года назад
8:32
@clarkemily2279
@clarkemily2279 3 года назад
12:09
@chutherock
@chutherock 3 года назад
I see you’re also a member of the Terrible Handwriting Crew 😂
@charlimarieTV
@charlimarieTV 3 года назад
Absolutely 😅
@Oheyitskayla
@Oheyitskayla Год назад
Please dont laugh I'm entirely new to this 😶but are ideating, sketching and wireframing the same thing????
@hciperson
@hciperson 4 года назад
Did not know of an email address to send you a link on design systems so here the link superfriendlydesign.systems/
@blazeforu
@blazeforu 2 года назад
You look like ananya Pandey 😅
@meriahneely
@meriahneely 3 года назад
Jesus, the handwriting 🤣🤣🤦🏾‍♀️
@adilinial
@adilinial 4 года назад
Great vid!
Далее
How To Create Your First Wireframe (A UX Tutorial)
12:52
Figma 101: An introduction tutorial
18:35
Просмотров 219 тыс.
Cute
00:16
Просмотров 2,5 млн
Apple Event - September 9
1:38:19
Просмотров 24 млн
ДОМИК ДЛЯ БЕРЕМЕННОЙ БЕЛКИ#cat
00:45
10 Pro tips to get the most out of FigJam
6:51
Просмотров 11 тыс.
I Paid the Top Rated Pros on Fiverr for THIS Website.
16:06
Revealing what I earned in the last 12 months 💸
10:42
How to wireframe a website | CharliMarieTV
4:56
Просмотров 437 тыс.
35. Wireframing & Prototyping (ft. Leon Barnard)
37:12
Просмотров 2,7 тыс.
Wireframing with Figma
17:28
Просмотров 70 тыс.
Cute
00:16
Просмотров 2,5 млн