Basic Web Design Part 1- Sitemaps and Wireframing

Web Development and the interaction of multimedia and design is a major tool for any business to survive and prosper in the 21st century; from traditional business to education and the entertainment industries. Its study and competencies will prepare its graduates for many career and independent business opportunities within this exciting field.

This Web Design course will teach you  the very basic steps on what to do and what to learn before, and during, building a website. You’ll learn all the steps  including:

  • planning a sitemaps and wireframing
  • using basic tools and panels in Photoshop
  • basic HTML and CSS  and
  • create your very fist website from scratch after learning these first 3 steps.

Planning a Sitemaps

sitemap

Before you begin any project, you should always prepare a sitemap to plan out your site and keep it organized. Sitemaps are like a family trees consisting of your website pages rather than a list of  distant relatives who send you odd knitted things over the holidays.

Sitemaps show how the visitor will get from one page to the next and back and establishes all of the pages you need to design, which is critical when quoting on a project!

Wireframing

First, let’s back up and talk about what a wireframe is. For those looking to build a web site of any size or shape, wireframes are the foundation on which to begin building. Wireframing usually comes after the site architecture has been determined by a site map or flow chart of the web-site’s pages and before the creative design phase.

There are 3 easy ways to describe a wireframe:

  • Wireframes are simple black and white layouts that outline the specific size and placement of page elements, site features, conversion areas and navigation for your web site.
  • They are devoid of color, font choices, logos or any real design elements that take away from purely focusing on a site’s structure.
  • We often say that they are much like a blue print to a home, where you can easily see the structural placement of your plumbing, electrical and other structural elements without any interior design treatments.

Here is an examples of what a wireframe looks like:

wireframetools10a

Wireframes are the rough layout of a web page. They help us plan out what does where and is an effective way to communicate our thoughts to the client

Since they are basic line drawings, they get the client to focus on what elements are on the page rather preventing them from getting distracted over nit-picky design issues.

The purpose of a wireframe is to start blocking out the design of your site. This helps you visualize the space you have to play with, visual hierarchy (importance), navigation, and placement of media and text. This is a crucial step in designing a website.

A wireframe is a visual presentation of how a website’s layout will look when it’s finished. It’s about structuring the overall layout without any graphics, placing the various elements where you believe they will look and work best. Wireframing is a great step to start before jumping on to Photoshop because it allows you to focus on the important components of the website without all the visual clutter of a finished design. Wireframing also saves you time when designing a website because wireframing acts as a sketch, and instead of having to do things more than once in Photoshop, you can just adjust your ‘sketch’ until you’re happy.

Your wireframe should include boxes that represents images, header, footer, sidebars, text blocks, navigation and other content aspects of your website.

You don’t have to worry about drawing them yourself, since there are many wireframing tools available on web.

21 Useful UI  Wireframing Tools:

1. Pidoco

Pidoco is a web-based prototyping software for rapidly creating clickable wireframes and UI prototypes for web, mobile and enterprise applications. It’s easy to use with smart sharing and collaboration features, a convenient usability testing module and much more.

wireframetools01

2. justinmind

The best platform to define web and mobile apps with rich interactive wireframes. Wireframes and mockups have been used to think and define websites or applications before their implementation. But with the coming of the web 2.0, dynamic websites and RIA, you need to think everything from UI to conditional navigation or the type of interactions you want to use. Mockups or even clickable wireframes aren’t enough anymore.

Justinmind Prototyper 3.0 is a powerful wireframing tool designed to build fully functional dynamic prototypes without any coding, both on Windows and Mac.

wireframetools02

3. HotGloo

Great application, with a lot of tutorials, forum, active twitter account and Faqs/Help section! Interface is very modern as well, one of my favorite applications by far.

hotgloo

4. Jumpchart

Make planning architecture easier with Jumpchart. By creating pages, and subpages you can quickly sketch out the hierarchy of your site. Change titles, and reorganize with just a click and a drag. It’s never been easier to plan the navigation for your site.

Different than classic wireframing tools, because of functions, you can change less hierachy, but it’s very easy to build sitemaps and separate content in categories there.

Use Jumpchart to quickly plan out the navigation of your site by adding pages, and sub-pages. If you change your mind, easily drag pages to new spots within the site hierarchy. There is no better way to organize the content for your website.

wireframetools03

5. MockFlow

MockFlow is an online tool for creating wireframes of software and websites. It helps to enhance your planning process by enabling to quickly design and share interactive UI mockups. Can be used as desktop application and one more great thing you can collaborate real-time with fellow collegues and discuss development process right in the application if you use premium account.

Mockflow is a web app based on the Adobe Flash Platform. It has a clean, minimalistic, organized interface and the editing feature-set set is extensive. You drag and drop components into a mockup to create the wireframe with the ability to add pages and map out an entire site and it’s structure. The built-in components are extensive, from charts and ads to menus and dropdowns. The ability to upload your own images to use, as well as the option to choose from a set of stickers of common site elements, such as social networking and e-commerce images, make the process of ‘building’ the mockup pretty efficient.

You can talk over the real-time chat and invite others as editors or viewers, depending on the level of editorial power you’d like each member to have. Editors have the ability to make changes to the wireframes, while viewers are limited to reviewing and commenting.

The MockStore is a wonderful add-on service that provides third party components and templates shared by the user community.

wireframetools19

6. Lovely Charts

Lovely Charts is an online diagramming application, that allows you to create flowcharts, sitemaps, organization charts and wireframes.

One of the key features is the application’s ability to make assumptions based on the type of diagram you’re drawing, and thus streamline the drawing process. The History management feature is extremely useful, keeping 20 states of your diagram in memory should you wish to go back to an earlier version or undo any changes.

There is a powerful yet simple tool set provided, with an extensive library of crafted symbols to suit most requirements. With Lovely Charts’ extremely simple and intuitive drag’n drop drawing mechanism, you’ll be able to focus on what really matters. You won’t have to draw boxes or arrows, and you won’t have to worry about what symbol to use.

wireframetools4

7. Creately

Here at Creately, we are focused on making it easier for teams to work collaboratively on all things visual. And we do this by giving you a great online application that’s a breeze to use and an extraordinary customer service experience that you’ll love.

wireframetools04

8. frame box

Easy frame sharing. Frame Box is a tool that is browser based and featured a click-and-drag layout system. This is fantastic for creating resizable, easily adjustable wireframes on the fly.

wireframetools05

9. JustProto

JustProto allows multiple collaborators to work on an interactive prototype at the same time and then lets you share a fully functional preview to other users who can refresh and see your changes as they happen.

wireframetools07

10. Gliffy

Gliffy is a web-based application which allows you to create process flow diagrams, org charts, floor plans, business processes, network diagrams, technical drawings, website wireframes, and more. It uses a drag and drop UI with the ability to add boxes, buttons, and lines from the tool shape library to anywhere on the page. Then you can easily add text to create a clear, concise mockup.

You have access to a complete library of shapes and can even import your own images, like logos and backgrounds, to complement your diagrams. You can share and collaborate with anyone, on any platform, in any location, while having the ability to protect and track changes.

The Gliffy API (beta) also makes it possible for developers to add Gliffy diagramming features to their existing web-based applications based on a simple to use framework. With a tool that makes it easy to create, share, and collaborate on a wide range of diagrams, Gliffy users can communicate more clearly, boost innovation, improve decisions, and work more effectively.

You can use Gliffy to build almost everything, I don’t like though there are too much features. If I would need tool just for wireframing I think I would choose different one, because there I have too many distractions and options I don’t need. With Gliffy online diagram software, you can easily create professional-quality flowcharts, diagrams, floor plans, technical drawings, wireframes and more.

wireframetools8

11. WireframeSketcher

WireframeSketcher is a software tool that helps product managers, designers and developers quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It’s standalone software and a plug-in for any Eclipse IDE.

wireframetools10

12. FlairBuilder

You start with the wireframe design, the content layout and main design elements such as branding, navigation, sections. Next, you attach interactions to elements in the wireframe. From simple page-to-page links, to more complex functional interactions. Prototyping advanced user interactivity has never been easier. It takes less time for you to see your ideas in action.

FlairBuilder is built such that you will feel comfortable with the application’s user interface and complete each task fluently and efficiently.  That is why you will find many common elements such as the toolbar, the menu, a component palette, a context menu for common tasks and a set of handy keyboard shortcuts. All these to simply let you focus on you job and get it done as fast as possible.

wireframetools11

13. Simple Diagrams

SimpleDiagrams is a small desktop application that helps you express your ideas quickly and simply. There’s just enough functionality to describe a thought or capture a process.

SimpleDiagrams is a small desktop application that helps you express your ideas quickly and simply with just enough functionality to describe a thought or capture a process. It’s built on the Adobe AIR platform, so will run smoothly on Mac, Windows and Linux. You can drag, drop and size symbols from libraries, add photos and post-notes and export your diagram to PNG. It may not be a fully-fledged diagramming tool, but because SimpleDiagrams is so basic, you will be creating wireframes or diagrams within minutes.

wireframetools12

14. MockNow

MockNow is a online wireframing sharing tool created by Ayush. MockNow target is easy to provide easy way to make quality wireframing online and nothing else.

wireframetools14 (1)

15. Axure RP

Axure RP enables application designers to create wireframes, flow diagrams, prototypes, and specifications for applications and web sites. It provides the features you need to get started quickly whether working alone or collaborating with your team.

Used by user experience professionals, business analysts and product managers in over half of the Fortune 100, leading agencies and thousands of small and medium businesses around the world. Axure RP has become an essential tool for successful application design.

wireframetools15

16. ProtoShare

ProtoShare is an easy-to-use, collaborative, Web-based prototyping tool that helps teams visualize requirements for interactive projects and work together in real-time.

Big or small, the key to successful projects is getting people talking and cooperating early. ProtoShare helps all stakeholders — Web developers, account execs, management, marketing, and clients — get on the same page before money and time are sunk in various development dead ends.

wireframetools16

17. GUI Design Studio

GUI Design Studio is a graphical user interface design tool for Microsoft Windows that you can use to rapidly create demonstration prototypes without any coding or scripting.

Draw individual screens, windows and components using standard elements, connect them together to storyboard operational workflow then run the simulator to test your designs. Watch video demo overview.

wireframetools18

18. iPlotz

With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project.

wireframetools17

 19. Mockingbird

Mockingbird is a web-based beta software based on the Cappuccino framework to create, link together, preview and share wireframes of your website or application.

It’s a clean and user-friendly interface, with drag and drop UI, interactive page linking, smart text resizing and the ability to easily share mockups with clients or colleagues with a direct link, make Mockingbird one of the best wireframe tools available.

As it’s web-based, it means you can create and share mockups from anywhere. It will be interesting to see just how good Mockingbird is when it comes out of beta and the full version is released.

Mockingbird

 20. Cacoo

Cacoo is a user-friendly online drawing tool that allows you to create a variety of diagrams, such as sitemaps, wireframes and network charts.

The drag and drop UI means creating diagrams is relatively simple; there are also a number of stencils to utilize which could make the process even more efficient. Unlimited Undo is a neat feature with the history of all modifications saved, meaning you can undo right back to the start.

Numerous users can also work on and complete the same diagram simultaneously with the application supporting real-time collaboration.

Cacoo

 21. Lumzy

Lumzy is a mockup and prototype creation tool for websites and applications. You can add events to controls, place controls inside other containers and emulate your project with easy page navigation triggered by user actions.

Real-time collaboration is one of the key features, with tools for team editing, a chat engine for deliberating over designs and file versioning. Lumzy is also the only mockup tool with a real image editor built-in — simply grab any picture from your drive and edit it, apply hue, saturation, adjust contrast, and so on, and then add it to your project.

The Pro version is white label and can be integrated into an existing platform or hosted on your own server which may be of interest to companies working with confidential information.

Lumzy

2 thoughts on “Basic Web Design Part 1- Sitemaps and Wireframing

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s