How to wireframe a website | CharliMarieTV

Articles, Blog

How to wireframe a website | CharliMarieTV

How to wireframe a website | CharliMarieTV


Today I’m in a bit of a different set-up from
my usual, because I want to take you through the first stage of the web design process
which is wireframing. The purpose of wireframing is to work in a really minimal way to start
organising the information and start figuring out the flow of a page before you start worrying
about things like the fonts and the colours and making everything pixel perfect. With
wireframing you allow yourself to work really quickly and generate lots of ideas and my
web design skills have definitely improved a lot since I started following a proper wireframing
process, so today I want to teach you how I do it. I always start my wireframing using just a
pen and a piece of paper. you could start on the computer and a lot of people do, doing
just grey boxes and using the default font but the second you find yourself trying to
align things properly or get a box to be the exact right size, that’s when you’re focussed
on those little details and you lose the flow and you’re not just generating quick ideas.
So sticking with just a pen and paper I can let myself be really messy and get my ideas
out. Before you start you need to know what content
is going on the page you’re designing, I can’t stress that enough. Your job is to design
the information so you need to know what information is going on the page that you need to get
across before you can start designing. That doesn’t mean you need to have the exact copy
finalised, you just need to have a rough idea of what information is going on the page,
what it’s about and how much of it there is. Now for this video I’m going to use the example
of a blog design because I want to redesign the homepage of my blog. So i know that on
it I am going to have a header, bio info, a footer, photos and titles for each post,
maybe a blurb to go along with that maybe not, social media links, a search bar and
a newsletter signup and I think also a popular posts section. I like to write a list like
this to start just so I have a reminder of whats going on my page out in front of me
and I’m not forgetting anything. If I’m working on a marketing design site then I’ll generally
have a Google doc open on my computer next to me with the rough copy on it from the copywriter. To start generating ideas I use a technique
that an old workmate taught me which he called ‘crazy 8’s’ where you fold a piece of paper
into 8 different sections and then do 8 different ideas for a wireframe as quickly as possible.
You can draw as big or as small as you want, whatever works best for you. Sometimes i might
do four on this side and then four on this side if it’s a particularly long page. This
works as a warm up technique for your brain, and I always find it fascinating because I
start off thinking there is just one obvious way I want to arrange everything, but when
you’re forcing yourself to think of more and more concepts you’ll be surprised at all the
ideas you had just hiding in your mind. And you shouldn’t limit yourself to just 8 as
well. If you get going and find that you’ve got more and more ideas coming, keep drawing
and get them all out. As you can see when I’m drawing I’m really messy, and that doesn’t
matter one bit. Drawing nicely is not the point. The more you do this, the more you’ll
sort of develop a little key for yourself, like for me, a straight line like this one
here means a headline and then squiggly ones mean body copy. A box with a cross through
it means a picture and little circles mean icons. It really doesn’t matter if it looks
like a child drew it to anyone else, the point is that you’ve got your ideas out, you know
what it means and you’ve got a place to get started with your design. After this phase
I will look at my 8 concepts and put a little star next to the bits that I think might be
worth exploring more. Sometimes I will then go and draw a new mockup of all those bits
together, but generally I’ll move onto the computer at this point. Mostly because I find
it hard to draw neatly and I know that after this stage I’m going to want to show someone
and get feedback on my design, so they’re going to have to be able to understand it
as well. I like to use a program called Sketch to mock
up my wireframes. I have done a whole video actually about what design software I use
for what purpose so I’ll like to that down below. even though I have some idea now of
how I want t arrange the information on my page, when I move on to the computer to lay
it out, I’m still just going to use plain grey boxes and the default text, and the reason
for this is because I don’t want the person who is critiquing this wireframe to think
about anything other than the structure of the site. Using colours or proper icons or
anything that remotely looks like it could be part of a finished visual design is just
going to confuse everything. I don’t just make one wireframe in Sketch, I’ll make as
many as I feel I have ideas for after combing through my favourite parts of this sketching
process. After that it’s a good idea to sleep on it
at this point and come back to it the next day before you share for feedback or before
you start on the visuals if it’s a personal project. that way you’re going to be able
to come back to it with a fresh mind and a fresh perspective before you move on to the
next stage. So that is my wireframing process and that
is how all of my web design projects start. Let me know down in the comments if you’ve
got any questions for me on it. and please make sure you give this video a thumbs up
if you found it useful. I’m absolutely loving making design videos like this at the moment,
so if you like them as well and you haven’t already, please hit subscribe and I will see
you next time. bye.

100 thoughts on How to wireframe a website | CharliMarieTV

  1. Really good information with lots of helpful tips, all in a concise order. No fluff and I learned a lot. Really upbeat and a superb example of what a tutorial video should be.

  2. So glad I stumbled on your videos! Just getting my head around wireframing and so far haven't found anyone else who doesn't go straight into techy talk I don't understand!

  3. Hello Charli!
    I'm french and I'm actually studying web design, development en communication in order to become web designer one day 😀 I recently had a exercise to do for my studies. This exercise consist to give an interview to a person who works in the internet. Do you think is it possible to have a discussion in order to do my interview? I would be very happy and flattered if you answer my comment, 
    thank you very much!
    Bye
    Eva.

  4. I'm sorry, I must have missed what program you said you used to document the Wireframe with? Is that Visual Studio?

  5. Very, really, very much grateful to you for this video, it helped me a lot and allowed me to organize information in my head, as well as see how others do the same.

  6. This is amazing! My Web Languages teacher is actually using this video for one of our projects and tells us to use designs like yours!

  7. Hi Charli Marie, very nice you show the way to do design, but I need to know what is this applications you are using in your PC for lay Out?

  8. I don't do wire-frames. Ideas pop-out of my head as i work. End result is always good. You just need to know your job and be creative. But if you find wire-framing useful, please go ahead and use it. I was speaking about my self.

  9. Absolutely amazing video, I really appreciate the help and advice dude do u want to send me a friend request on roblox or minecraft?

  10. Creating webscreen wireframes in PORTRAIT layout, huh? Hope they are for a phone? This reminds me so much of my last job. My boss had created loads of wireframes for an IoT based CRUD system. She specified the colours, the font and even the captchas. No f**** idea about the database sitting behind it. No intention of discussing it no matter how hard I tried. Just didn't want to know. Of course I got blamed for the inevitable result. Despite building large multi-user database applications most of my career she accused me of not knowing my stuff. How the hell do these people end up in charge?

  11. Really great process. We're redesigning a page, so I am going to audit the content and then work from that list. The Crazy 8s idea on tabloid paper is fantastic for brainstorming! The bigger the paper, the more space your brain feels it has to get those ideas out!

  12. I usually don't leave comments, but I had to this one time. Your video was extremely helpful for my course project! It was straight to the point and easy to understand. Thank you so much!

  13. Thanks for the video – just made my first website for a business, and your video helped me get started with a wireframe. Really appreciate it.

  14. 💗💗💕Thank you so very much for your helpful 𝑡𝑖𝑝𝑠 𝑎𝑛𝑑 𝑖𝑛𝑠𝑝𝑖𝑟𝑎𝑡𝑖𝑜𝑛

  15. I feel like if you want to showcase extensive web copy changes and a change to the structure/flow of content, you need more of a high fidelity mockup that include fonts and colors. I'd be curious to hear your thoughts.

  16. I'm thinking about changing careers to UX design. This was a really helpful insight. Thanks. Also, you are very likable and easy to listen to.

  17. Hi there, Thanks a lot for this very useful tutorial. I was wondering what is the soft you're using right after (03:52) ? Do you have any "free" recommendation for this part too (I'm a student). Thanks'n keep rockin' !

  18. Is it ok to do a bit of UX writing to know what content is going on? Or should I not care when I generate lots of ideas? I see a lot of people doing abstract ones.

  19. You guys have a very-limited tutorial on wire frames; generally biased towards designers…

    Here is the deal—a wire frame is the very first data flow diagram for the developer. If you don't have it…. we can't do it for you…. we will standby the project until a draft/moch is completed.

    /> came here looking to help a client.

  20. yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet vvyeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet yeet v

  21. YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEET

  22. YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEETYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEEYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYEEEEEEEEET

  23. I'm learning how to code/design websites at uni and I have been stuck with where to start, this crazy 8s exercise has got me through that block!

  24. Thanks a lot for this video, it's simple and clear, perfect for me because i'm starting to learn web development just two weeks ago. 🙂

  25. Here 4 years late lol but great video! I am an SEO Specialist that started a Web Design and Development firm and our designer didn't like being committed to a company so I watched this to understand what goes into a wireframe of a website! Thank you!

  26. I like the video but who is doing laundry? iron your shirt please this looks like you're a dude programmer that never gets out.

Leave a Reply

Your email address will not be published. Required fields are marked *