A proper plan is important for each and every thing; whether you are planning to build a house, draw a design, open a new business and what ever it may be needs a rough sketch. Wireframing is such kind of plan to start a new project in designing. Without strong foundation you can’t achieve anything in designing, so this quick planning and time saving tool helps you to build a base for your future work.
Its basic elements like header, footer and sidebar gives designers a simple visual oriented layout structure of the website and its functions. To help you to sketch outline for the website we have collected some fruitful resources with good examples.
Boagworld is a blog that shares five commandments with you. That helps you to put your ideas and to keep spontaneity in your different approaches. Here you will get an idea of wireframing and with the help of it you can show vision of the site which you are building.
Wireframe for the wicked, with nice slideshow shares different types of the wireframe and its purpose.
Sometimes the best wireframing tool is a pencil
A pencil is also a best wireframing tool with that you can draw your ideas. You can quickly sketch your ideas and these sketches are not perfect in alignment but it is purely about concept. So this pencil sometimes becomes better wireframing tool than other computer tools.
Here you will know the importance of sketching and wireframing to express and expand your ideas. You can also alter your ideas so that you can bring better formulated and finalized designs to the world and it is useful to strengthen your design.
This is about the evolution of wireframing from functional to visual. The functional wireframe is difficult to read so many designers made experiment with their new ideas to add information (interface) to it. The resulting future wireframe is readable and easily understandable.
Wireframing not a religion is an attractive post on different types of wireframes and how it is bread and butter for the UX designers. Though there is no right way for this according to context and requirements of the project you can quickly give shape and you can produce better product.
UX 101 the wireframe is a beginner’s guide that teaches you about the wireframe and how it is useful for designers. It reflects your ideas about the placement of different elements and site navigation and it is an opportunity for you to check your project as it is going in right direction or not.
The wireframe all you need to know
This is a perfect guide for beginners to know what wireframing is, why it is used and why it is important. It helps you to present your imagination about the project and to demonstrate the exact vision of your client. So it reduces the possibility of complexity in your project.
Storyboard vs wireframes is detailed discussion about the usefulness and drawbacks of both storyboard and wireframe. But anyway these are apt choice for you to make better plans and to understand the process.
Right way to wireframe is a nice video by Will Evans and shows you a right way for wireframing. The main reason behind the creation of this wireframe is to inform design process and decision. This is a form of communication between sketch holder, team members and clients and it is helpful to improve your practices.
This is a collection of useful tools and resources for web wireframing that allows you to visually illustrate the fundamental elements of interface. You can also make changes and amendments according to your requirements. You will get many techniques here and you can use them in your project.
A short post is about the benefits of wireframe and mockups. These two tools have the power of solving design problems and they stimulate imagination, allows you to make changes and it gives forward look to the people. So these tools are more effective than any other deliverables.
The future of wireframe is a shared experience of users over the decades. This post helps you to reevaluate and understand the wireframe. Here you will find discussion on various aspects of wireframing.
Both benefits and drawbacks of wireframingvdiscussed here; this provides guidance to designer for their designing process and shows how they can be problematic. So before creating a wireframe you need to think whether it is helpful or not for your designing process and at the same time you need to think that does it represents the client’s visions that help you to overcome its drawbacks.
Leeharding web design talks about the values of the wireframing. This is an important stage in your designing process that helps you sketch your idea and you can imagin how the readers interact with your site. You can use it for your both small website and larger websites.
The prototype deliverable pretends as wireframing but there is a difference between these two. Wireframe is a visual guide and the prototype is about behavior. Wirframe is more useful than prototype for you to draw an outline for you project.
Another big article talks about the differences between wireframe and prototypes. Both are in their own way useful to you to sketch your ideas.
Here you can get many useful resources and articles on wireframing. Along with wireframe samples it offers you UI components, job listings, 750 vector icons in illustrators, EPS, PDF and PNG flavor and a place where you can share your wireframes and tips. These articles also covered wireframe moodboard and prototyping with 960gs grid system and graph sketch layouts.
This is definitely your site that helps you to know benefits of wireframing and its process. In addition to benefits you can see forth coming potential problems of your project and offers you three steps to approach wireframing.
Ajax wireframing approaches
With bunches of Ajax prototyping elements this article covers useful wireframing techniques. It offers three brilliant methods of wireframing like keyframing, stacking and TOP it also marks both benefits and drawbacks of each method.
This comprehensive article covers whole and sole of the wireframing from its creation to benefits and working with clients. With a quick overview of why it is better choice offers you some tools to create your own wireframing.
In this wireframing all in one guide you will get guides, techniques, tools, examples, paper prototyping, wireframing articles and links to other sites. This is really a great resource site that meets all your needs to create an effective wireframing.
The importance of wireframing
This article talks about the importance of wireframing along with resources to help you create your own. You will find many benefits of wireframing including its ability to help the clients focus and what they can teach you about your clients and how you can save your time.
Pwireframing is a technique that makes regular wireframing more modular and collaborative. This article shows you how this paper badsed method goes beyond the rough sketches and showcases some photos that might help you to understand the technique properly.
Shades of gray wireframes as thinking device
This article covers personal experience of author and gives designer’s reasons for using wireframing and their purpose. With example of both wireframes and final designs it shows what you can get from the wireframing.
Wireframing over the shoulder, a video shows you whole process of wireframe from start to finish. In this episode designer draws wireframe from fast forwarded scratch. This gives you an idea to create wireframe on paper.
Framing the problem is a great article that defines you how to solve the problems that occurs while creating wireframe. It focuses on creating wireframe and before that it answers three questions; what types of visitors need to be persuaded, What actions do they need to tak And what information do they require to take that action.
This guide is about wireframe for search engine optimization and it describes process based purely on SEO perspective. It also reminds you to keep certain things in your mind like key functions of each pages and building navigation with relevant keywords.
With out history you can not move forward so this article is about history and benefits of wireframe that helps you to know need for its creation. You can get more modern techniques suitable for your websites and it offers you new standards for your contemporary wireframes.
An article talks about some of the issues and solutions of wireframing rich web media applications. It also traces out the benefits of both interactive and high fidelity wireframes with definition for each and how it is created.
Better perspective in wireframing
This big article is a list of tips to create better wireframes. The outlining tips are like putting functionality first, focusing on the user experience, working to the deadline, organizing wireframes and more.
This is a downloadable guide for wireframing using Adobe InDesign and it offers you a simple file you can experiment with it. Part of its content comes from a wireframing workshop that was presented at a communication and multimedia design course at Rotterdam.
This is a place for you to get example for wireframes and right place for you to checkout the methods of wireframes. This offers you a royalty free set of vector icons in ESP and flash SWF formats and you can resize them without the loss of fidelity, color and effects.
This describes wireframing and why to work with it. You can find brief overviews of wirframing tools and tips that will help you to create your own wireframe.
This detailed description is a guide for you to create your wireframing content. It helps you to create logical and connected websites and instead of structure and functionality it covers specific challenges and requirements for its creation.
This video guides you to create wireframe and it includes tips like using gridlines and adding anything which you needed and removing them. This is a good resource for you to create better wireframe.
Nick Finck in this video presents his wireframing process. He used OmniGraffle and a wireframe stencil kit you can download it.