Building a Website in Progressive Steps: Wireframing
Tutorial Details
- Topic: Wireframing
- Difficulty: Basix
- Screencast duration: 24 mins
- Building a Website in Progressive Steps: Wireframing
- Building a Website in Progressive Steps: Header and Footer
- Building a Website in Progressive Steps: The Home Page
- Building a Website in Progressive Steps: Page Elements
- Building a Website in Progressive Steps: Blog Page
- Building a Website in Progressive Steps: Establishing Trust
“Steps” is a progressive series of screencasts, during which we’ll walk through the process of designing and building a website. In this part, we take a look at wireframing.
Step 1: Wireframing
Additional Resources
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Justin Hubbard
Since 2007 Justin Hubbard has been helping businesses by creating timeless, memorable logos as part of a branding package and modern, user-friendly websites.
"Creating websites, designing logos and building mobile applications, that's what I do and I love it! It's gives me great pleasure to be able to help businesses grow through their web presence; and when it's successful, that's the best feeling anyone could ask for."
Sign up now!
Freelance Jobs
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Always enjoy seeing what other designers do for their workflow. I’m actually excited for the next tutorial when you move on to Photoshop. This honestly was an excellent tutorial idea!
I’m glad you enjoyed it! :)
I like it and looking forward to it
another artist strike, good job
it s intresting looking for the next tutorial
thank you Justin Hubbard
You bet, I only hope that you guys get something out of it. I’m here to share the knowledge and even though my processes might be controversial, I think they’ll benefit plenty of people.
You bet, I only hope that you guys get something out of it. I’m here to share the knowledge and even though my processes might be controversial, I think they’ll benefit plenty of people.
it’s allways good to see another approach to make something. i think you made a point. webdesign is about combining technics and there isn’t one way to design something. i’m looking forwoard to the next tutorials. thank you very mutch for your share.
You’re welcome and part 2 is due to come soon :)
Awesome tutorial! Very enjoyable. I am thoroughly excited for the rest of the tutorials and can’t wait to hear what you have to say.
I’m sorry but this is not a good tutorial at all. Not enough argumentation – put this here and that there. I just watched you creating a wireframe for a random and dull design. (header, sidebar, 3 columns – seriously?) You think seasoned veterans shouldn’t use a wireframe? What’s up with that? Wireframe is supposed to keep you for not getting a creative block? I mean this is a load of **** in it’s very core.
Wireframe’s aren’t blueprints for a house and your website doesn’t collapse if it’s not followed to the death.
Wireframes in webdesign are generally used as a way to portray all the elements you need in the design, visually. It doesn’t mean you have to follow the structure/layout presented in the wireframe.
This site is pretty much dead, haven’t seen a decent tutorial in a while, where are the actual design tutorials and tips this site promised?
Thank you for submitting your thoughts on the tutorial. Maybe took some of what I said too literally where they were simply analogies.
A wireframe and blueprint is essentially the same thing used to build different things. A blueprint is the foundation for building a house and a wireframe is the foundation for building a website.
In any case, thanks for watching and I’m sorry you didn’t get anything out of this Basix tutorial. However it seems that many people are getting something out of it and so this tutorial has accomplished what it’s set out to do.
I agree with Steve.
BTW. Taking Orman Clark (classica) banner, putting it in your own design (praktikant) and highlighting as your own job is not cool..
Ok, that was the banner my client picked out to put up there as a placeholder lol. He knew and I knew it was not my work and I never said that it was. That banner was not used in the finished site. If I was going to use anyone else’s work in a commercial product, I would ask for permission first but as I said, it was only used as a placeholder and still exists on my demo site because I don’t know what my client added to the final site as I did not handle that.
Before making false accusations, ask the person of whom you are accusing for clarification first, especially when you plan to be disrespectful in a public format such as this.
Tell me exactly in which part of my post was I disrespectful? And I am not discussing about fact if you did or did not use in in final product but that you are showing it at your site under the Samples of “My Work”.
I agree. I got value from it. Great video!
Wow, i must be a season’d veteran! I’ve tried wireframing on the odd ocassion using mocking bird, but usually just dive in and do it.
This is where Adobe Fireworks comes to the rescue.
We can do wireframe+prototype and even can move on to the Design(better than photoshop)
its strange to see , how these software vendors do business on wireframe, which in-turn never see light on the end.Better to say a pencil and paper do much more than that.
Now i am with fireworks for a year now, which i consider by far is the bets tool t design for the web.
Photoshop has too much to offer!!
I agree that Fireworks is a terrific choice for mocking up websites and provides a better workflow. I actually plan to do some tuts on Fireworks later on if there’s a desire for it.
I was aiming towards the software vendors….not the screencast..:)
Was better if you provide a USabiity review than showing the design (PSD.) before the wireframe.
great workflow…
waiting for the next session…
heh, do you think I ruined the surprise by showing the PSD first, lol?
A comment from a real tutorial user. No, newbies need to see the big picture of what we’re doing in advance–keep the spoiler alert, uh, Photoshop file!
Beginners can’t learn a new program, Fireworks, along with the process. Thank you for sticking to Photoshop.
There are a lot of cranky people on here that need to move on, this is a tutorial site. Y’all need to be bossy & perfectionist somewhere else. Or start your own advanced tutorials for OCD folks who like to diss each other! (And maybe try Lexapro.)
Justin, we really need tutorials that are workable just like this, Thank You.
I agree – I consider myself a beginner and I have taken to Fireworks much more than Photoshop for building sites.
I’m surprised at the lack of useful Fireworks tutorials. I think it would be helpful to let people know they have another option besides Photoshop and to teach us how to use it.
I guess I’m basically just saying – Please, Please, Please Give Us Some Fireworks Tutorials!!!!
And thanks for the informative tut :-)
I do really enjoy watching others do their workfow. Somehow, this helps me a lot in refining my workflow, thanks and looking forward to next great post :)
I’m a new web designer and to speak the truth I had never seen this process before… I think it saves alot of time and we can plan better.
Really good tutorial, looking forward to next ones. Cngrats!
I’m glad you enjoyed it Renato :) That’s what this is tutorial is designed for.
good stuff!
It would be great if you could pump out some Firework tutorials :)
Looking forward to them!
I will pump some out sometime at the end of this series if there is enough demand for them.
This is exactly what I have been looking for! Thanks
You’re very welcome Monique! :)
I don’t like this way of building. Why don’t just code the website like a pro. This is just dragging a website together. The code will be a mess and you won’t be in controle.
I type all the code myself and I’m always in controle. This way is for people who don’t know how to make a website.
You’re not required to agree with my practices but thank you for watching. :)
Considering it’s clearly marked as a basix tutorial maybe bashing it for not being “pro” enough is a bit daft, don’t you think?
I’m constantly amazed of all these kinds of replies. They’re just variations of:
“I, like, wasted 20 minutes on watching this beginners tutorial. I’ve been working with web developement for, like, 25 years and this tutorial doesn’t offer me anything. It sucks!”
Wireframing is good idea. But what do you think about wireframing in html/css? It would be slight slower for first wireframe you make, but it will be much faster after you have all styles. Plus you don’t have to manually calculating where to place block — just define margin and padding. When you change sizes, in Axure you have to manually repositioning elements.
Once you start coding then technically it’s no longer a wireframe. Am I understanding your question correctly?
I do something similar to what you say – I sketch the basic design using pad/pencil and then create a mockup in HTML/CSS. It helps me define the margins, sizes, padding, div elements right from the start. Justin, your method is very good too and I agree with analogy with creating a blueprint for a house. Going to watch the other tutorials in the series now.
when will part 3 be available?
I’m actually submitting it in about 20 minutes and it should be live within a day or two.
Thanks for watching! :)
Why are you using a Pirated version of Axure? LOL! Anyway very good tutorial ! :)
Thanks for the great tutorial, helped a lot in creating new website designs.
Nice tuto, ideal for getting organzation ideas with your team or customers!!
Great post!!
Thanks for sharing your insights.
I have just heard of wireframes, and this is a great tutorial!
:-)
I stopped watching when he said, “Spam bots love to get a hold of your email, so make sure they are encrypted”.