Design: How to Design SEO Friendly websites

1. Compare hosting companies, www.findmyhosting1.com  learn about different hosting companies
2. Creating privacy policy, www.easyriver.com/myprivacy.htm  write your own privacy policy
3. Creating web forms, www.phpform.org  which lets you create different types of web forms.
4. Test website with different browsers, http://browsershots.org  browserlab.adobe.com is one of the websites that allows you to see how your website will look on a wide variety of browser versions and operating systems
5. Test website with different devices, http://quirktools.com/  test how your website looks on different devices and screen sizes
6. Building SEO Friendly website
1. Creating sitemap, www.xml-sitemaps.com sitemap generator
2. Creating Robots.txt file to for Google Crawler, www.mcanerin.com/EN/search-engine/robots-txt.asp  www.internetmarketingninjas.com/seo-tools/robots-txt-generator/   Robots.txt file is a text document that informs the search engine spiders which parts of your website you would like to be crawled and which parts you do not want the search engines crawling
3. Nofollow attribute, usually, the links to external websites can reduce the rank of the website. Therefore, you use the attribute rel=”nofollow” in your HTML code to tell the search engine not to follow this link and discard it when evaluating the website
4. Creating .htaccess file
1. Secure folder or directories, www.htaccesstools.com, www.htaccesseditor.com/en.shtml  site enables you to choose from different rules. http://www.yellowpipe.com/yis/tools/htaccess_generator/index.php  site enables you to create .htaccess and .htpasswd that are used to protect special directories on your server. The .htaccess file is uploaded to the website server to help you control the web server’s behaviour.
2. Protect website images, An image hotlink refer to sites that link to images on your website without uploading the images directly on their servers. This can consume bandwidth and cause server load. The .htaccess protection code can help you avoid this problem.
3. Redirect Non-WWW Traffic to WWW. You can check whether your website pages are indexed with or without the WWW. Go to www.google.com and type Site: sitename.com in the search field, replacing sitename.com with your website URL. Then, you can check whether the indexed page includes WWW.
5. Scan Code Errors, http://validator.w3.org you can check website code compatibility; one is the W3C Markup Validation website
7. Mastering Keywords
1. www.semrush.com, www.keyworddiscovery, http://clues.yahoo, https://ads.youtube.com/keyword_tool  SEMrush is a comprehensive tool that collects information about your website, your competitor’s website, and the important keywords used on your website that bring effective traffic to it.
2. www.webseoanalytics.com Web SEO Analytics’ free and premium tools enable you to test your website, analyze its keywords, and find more SEO information about its ranking and position on the search engine
8. On-site optimization
1. File name & alt attributes,
2. Clean code
3. Content loading time http://tools.pingdom.com/fpt You can check your website’s loading time
4. Keyword density
5. Internal links, www.google.com/webmasters/tools and www.seochat.com/seo-tools/site-link-analyzer  help you check the internal links
9. Off-page SEO
1. Partner websites domain history, www.domaintools.com check domain history
2. Backlinks, www.google.com  in your web browser and press enter. Type link:_http://www.mashable.com replacing the website link with your own website, and press. It reviews website backlinks.
3. Compare rank in different search engines, www.opensiteexplorer.org is comprehensive tool that allows you to learn about your website in more detail. It shows your website’s authority, which reflects its ranking potential in different search engines, the links to the main domain or home page, and the total links to the website’s pages.
4. Compare website traffic, www.alexa.com. Alexa rank gives an estimate for a website’s popularity and you can use it as an indicator for your website’s traffic value. You can use Alexa for comparing other sites’ traffic ranking to yours, and apply this information to your link building plans, such as deciding whether to partner with these websites or just analyse their performance.
5. Compare link partner’s page rank, www.prchecker.info Google assigns a Page Rank (PR) for every website on the Internet. You can check the PR for the websites that you want to get links from using Page Rank checkers such as www.prchecker.info
6. Submit at Link directory,  http://dir.yahoo.com,  which charges a fee; and Dmoz at www.dmoz.org, which allows you to submit your website for free
7. Submit at article directory http://ezinearticles.com article directories on the web, and the most famous one
8. www.text-link-ads.com paid link provider is Text Link Ads
9. Write guest post, www.payperpost.com guest post is one method for getting backlinks is to write guest posts on other websites in the same category as yours. When you write guest post articles, you include links back to your website content in the article’s resources and related topics.
10. Submit press release, www.free-press-release.com  free press release websites that provide free submission
11. Submit at link exchange, www.linkmarket.net With this website, you submit your website and exchange links with other sites in the Link Market directory
10. Website Content
1. Build unique & professional content
2. Check duplicate content, www.copyscape.com , www.dustball.com/cs/plagiarism.checker, http://plagiarism-detect.com/, www.plagtracker.com,
3. Check content grammar & spelling, www.spellcheck.net
4. Check Keyword density, www.internetmarketingninjas.com/seo-tools/keyword-density , & http://tools.seobook.com/general/keyword-density   are free; simply submit the content link and it searches different types of keywords
5. Create RSS feed & feed subscription form, http://feedburner.google.com/  Creating the RSS feed is part of optimizing content because it makes it available to different web technologies, such as feed aggregators and news feeds.
6. RSS feed readers, Some feed readers are online-based, such as www.google.com/reader , www.bloglines.com , and www.netvibes.com
11. Google Analytics is one of the most important tools in the search engine optimization (SEO) world; it helps you obtain information about website traffic, page views, where users click when they visit a website, and where visitors live. Google Analytics enables you to analyze a website to learn more about it. You can then apply this information to optimize your website.
1. Install Google analytics tracking code
2. you can add one or more websites, which are known as Properties
3. View Website Analytics
4. View Real-Time statistics
5. Exclude traffic from a specific IP
6. Google Analytics’ Conversion Goals enable you to measure if you are achieving your objectives. It tracks actions giving you ideas about your progress in achieving a specific result.
7. Find Website Keywords
12. Google Webmaster Tools is one of the resources search engine optimization (SEO) experts use to track website performance, sitemap status, crawling errors, and links.
1. Add a website to the Webmaster. To add a website, you need to use the Add a Site link and then verify the website to identify that you are the owner. The default verification of ownership option is to download the verification HTML document and upload it to your website server on the root path. You can access it here by typing www.name.com/Google_vertification_file.html.
2. Submit a sitemap to google webmaster tools
3. Check for google crawling errors
4. Preview Your Website as Googlebots. The Google Webmaster Tools Fetch feature shows you your website the way Google sees it.
5. What are Sitelinks? When the search engine displays your website in the search results page, it often displays the internal links from your website it deems useful to the user. These links are known as Sitelinks.
13. Working Bing Webmaster, www.bing.com/toolbox/webmaster  Similar to Google Webmaster Tools, Bing Webmaster lets you add your website, submit sitemaps, and track website crawling data indexed by Bing crawlers. When you submit your website to Bing, it is crawled by both Bing and Yahoo crawlers because both search engines are linked together.
1. Use www.seofocus.net/BingSiteAuth.xml
2. Use bing SEO analyser
14. Working with social media and SEO.  Social media marketing is closely related to search engine optimization. Although it does not impact the search engine directly, it can help your website receive more traffic via social networks.
1. www.hootsuite.com  the increasing number of social media websites makes it harder for social media experts to manage all their social accounts, especially when social media is only one part of the entire SEO process. Thus, there are multiple third-party applications that help you handle all your accounts easily from one place.
2. Social bookmarking websites, http://delicious.com  are sites where you can submit bookmarks for your favorite links and share them with your friends and groups on the sites. When you do this, it can increase your website backlinks, especially when the link is shared among many of your friends on these bookmarking sites.
15. Working with AdWords
1. Create an AdWords campaign, https://adwords.google.com 
2. Create an Ad Group
3. The Traffic Estimator tool lets you calculate the estimated clicks that you will receive when users click a specific keyword or group of keywords. 
4. The Contextual Targeting Tool is another comprehensive tool in AdWords, and it allows you to search for specific keywords and display all the groups of keywords related to the entered term.
16. Applying SEO to wordpress blogs
1. Understanding WordPress CMS 
2. Install the W3 Total Cache Plugin
3. Configure the W3 Total Cache     
4. Set Up the All in One SEO Plugin 
5. Set Up Permalinks                
6. Install the SEO Friendly Images Plugin 
17. Monetize your website
1. Create Google AdSense Ads
2. Work with BuySellAds
18. Building and Managing an SEO team
1. Create a Freedcamp project, www.freedcamp.com , The SEO process is complex and requires you to do a lot of small tasks on a regular basis until you achieve your target results. Therefore, it is important to manage the workflow for these tasks well, especially when there is a team helping you. Many project management tools help you keep up-to date with your team’s progress. One of these free, comprehensive tools is Freedcamp, which allows you to create multiple projects and add tasks to each one. It also allows you to invite team members to work on projects and manage them through the Freedcamp platform.

Design: How to design a website 02 - Technical Tips

1. Photographs: 
1. Read the content or consider the content to get an idea what photographs you need
2. Try to use the standard and same size of photographs to use in all the pages. Then it will be easy to style the pages.
2. HTML Layout: At first create HTML pages. Put the HTML elements in such a way so that they one after another from top to bottom. Do not write single CSS code untill you finish the HTML coding
3. CSS style sheet: Style the body first then elements, master page, and all other page by page. Insert comment beginning of every page style sheet.

Design: CSS - consideration

• Body:
• background color
• font family
• consider to set the padding & margin. Because some browsers have their own margin & padding settings
• Wrapper div just under body
• set the margin to align content  in the center
• background color
• set padding so that content doest not appear exactly align with border. normally 2%.
• set the width so that it is around a4 size page.
• In order to align all the divs in the center, you have to margin: 0 auto & set the fixed width.
• Elements
• Heading
• align the text to appear in the center
• font size
• font color
• text-decoration
• Paragraph
• consider padding
• Image
• align in the center normally
• max-width set it to be 100% and width & height is normally auto
• Margin & padding:
• In order to reset the default margin and padding of browser, header, navigation, ul, li, both are set to zero.
• Float: In order float to work need to set the width as well otherwise browser set the width 100% and it thinks there is nothing to float. In order to display background color with float, use a clear div after floating div and set width & height both.
• Position:
• Navigation
• background color
• setting the height of navigation is important then it is easy to set the margin and padding.
• round border
• Navigation UL
• change list-style
• make some space in the left with margin
• padding
• Navigation ul li a
• font color
• display type
• normally link float left to each other. 
• consider text decoration
• Hover:
• Background color 
• Active
• Background color

Design: 8 questions to ask a client before designing their website

8 questions to ask a client before designing their website

September 21, 2013

You've beaten off the competition and are ready to start designing a shiny new website for your client. Awesome. But now what? Of course it's tempting to dive straight into the fun part (aka the design process) but first there are a few things it's worthwhile seeking definition on. Here are a few things to put to your new best friend:

1. Why do you want a new website?Before you can understand your client's customers motivations, you need to understand their own.

The funny thing is that clients don't always have an answer to this question. They might want a new site because of a perceived need to keep up with their competitors (who just got an all-singing all-dancing new site), or because someone new in the marketing department is flexing their muscles, or simply because they need to spend a chunk of money they've been allocated before the end of the financial year. 

Whilst we're on the subject of why, there's a technique called "The 5 Whys" (which Toyota created to explore the cause-and-effect relationships underlying a particular problem) which is handy to bear in mind at this stage in the process. Whatever the client's answer to "why do you want a new website" may be, you're probably going to have to ask several more "whys" to get to the root of their motivations.

So, keep asking why. (But not this much).

2. Who is your website trying to reach? Now, some people will advocate taking the answer to this question and creating user personas from it, like "Steve is a stylish city worker in his mid twenties who likes classic cars and browses websites from an Android tablet in his Shoreditch apartment".

Frankly though, I think this is bullshit.

Creating fictional characters isn't going to help you to understand the REAL PEOPLE who are already part of your client's world.

Be all ears when your client is talking about who the new website is for, take notes, identify the types of people who are currently or might be using the site, just don't feel obligated to make new people up along the way. 

3. What do you want these people to do when they get to your website?
Yes, this is about defining calls to action. But it is also much more than this. As Seth Godin puts it:

The goal is to create design that takes the user's long-term needs and desires into account, and helps him focus his attention and goals on accomplishing something worthwhile.

That well-designed prescription bottle, for example, is well-designed because it gets you to take your medicine even when you forget or don't feel like it. If that wasn't the goal, then a cheap Baggie would do the job.
And that well-designed web site doesn't encourage aimless clicking and eventual ennui. Instead, it pushes the user to come face to face with what's on offer and to decide (hopefully) to engage.

What the client wants from their website and what its users want are two different things. Your job is to find the sweet spot in the middle. It might not be a very big one, but it's there... somewhere... 

4. How are you going to promote the new site? There are several reasons to ask this question. But the main one is that it will help you to gauge how serious the client is about the process they are about to undertake. If there are omissions or gaping holes in their plan, it could be an opportunity for you to get more work from them — maybe there's potential to create printed collateral or even an event to mark the launch of the site for example. 

5. How will you know if the new site has been successful? This is another question which can elicit blank stares from a client. If they are not already familiar with the use of analytics platforms like Google Analytics andKISSmetrics, now is your chance to educate them. This is going to boil down to metrics, if not to do with the site itself, then related things like sales targets. If your client isn't measuring these, you won't be able to either. (And the more facts and figures you have to hand, the easier it will be to create a brilliant case study about the website after it goes live).

6. When do you want to launch the new site?Does the client have any specific deadlines? Or maybe an event they want the launch to coincide with? Finding out sooner rather than later will make your job a lot less stressful. And if, on backwards from the deadline, you'll probably find that you needed to start the site a few weeks ago, look at this as an opportunity rather than a problem. You can usually split the project into phases to help you meet the deadlines (And sometimes the things which have to get dropped, which the client thinks are absolutely crucial, never make it back onto the site again. Hallelujah).

7. Do you have a domain name (and hosting) in place yet?If I had a penny for every job which has been held up by hosting or domain problems, I'd be... well... I'd have a pocket full of change. It may seem like a trivial detail but these things almost always take longer to get sorted than you expect. Even with bigger clients who should (in theory) be better placed to make the necessary arrangements, the process can be slowed by the extra bureaucracy involved in getting approval on costs and the like. So, get the hosting requirements out in the open as early as possible.

8. Who is going to populate the new site with content? Do you have a content plan?Whoever this person is that's responsible for this side of things, you want them on your side. And you're probably going to have to teach them how to use the content management system for the site as well. If they don't have a content plan, well, that's something for another article, but in the meantime send them here.

******************

What are your goals?

This is probably the most important question when discussing projects with clients. It’s not about the design or the color scheme and such, it’s about getting to know the company. You want to understand why they went into business and even how they went in business. A deeper connection with your client and with the company make it so much easier to understand what they like and what will fit for them.

At one point, I had a client that was a social media agency — they enjoyed developing strategies for social media campaigns and ways to get social in general. In getting to know them better, I came to understand things, such as, they were interested in doing business with creative businesses rather than corporate ones. I also found out their goals were to create organic connections between businesses and their customers rather than high tech digital ones. I also found out they had a personal affinity for circles, so this became a motif in the creative work. This allowed me to create pieces for them that reflected these goals and likes.

Understanding your client is essential. You do this by listening. Don’t tell your client about what you want to do and what they need to do, but let your client tell you what they have a desire to do. This is often the difference between work that creates conversions and work that just takes up space. You firstly want to make sure the goals of your client are consistent with the goals of the design.

How do you want the design to influence your customers?

This is really just a qualifying question that you can phrase any way you want, and put wherever you want in this sequence of questions. The ideal answer is that your client says something about good design creating value and connections and things of that nature. The ultimate idea is to make sure the client understands the value of design beyond making something look pretty.

You don’t want to ask these questions and create something effective and meaningful that your client can’t necessarily comprehend. You don’t want to waste your time.

I typically treat this question as a meeting of the minds as well. If we’re on the same page, then great! Let’s commence with the designing. But if not, I have to determine whether or not I want to educate my client and hope they see the light, or I have to see if we should just part ways. Either is fine, but again, the purpose is to make sure this project is worthwhile for bothparties.

Conclusion

We touched on it earlier, but asking these questions is really a chance for you to listen. As a designer, you’ll have plenty of time to talk and influence your client as a project is being completed. You need to be able to connect the dots between a client, their offering and their customer. Consistency and simplicity is key in this task and listening is imperative.

These questions also help build a line of communication between yourself and the client. This is also important to a well developed and thought out project because after all, teamwork makes the dream work. Keep an open mind and ear and watch your designs come out amazing and effective.

Design: Website design Advice & Tips

1. Create wireframes
2. Layout the design in HTML
3. After creating HTML pages apply CSS
4. Use the png image which is transparent.

Design: how to design a website 01 - Details

How To Design a Website

By Eric Miller

Research

As with most design projects, the first step when creating a website is to perform research. Some of this research will be done with the client to get an understanding of their needs, and other research will be done to learn more about a specific industry. When meeting with your client, you’ll be looking to discover as much as possible to help you develop an outline for the site and eventually design it. This includes asking about their target audience, goals, creative direction and other variables that may affect what you can offer the client, such as budget and deadline. Most likely before (to be prepared) and after gathering information from the client you will perform some industry or market research. This can be as simple as looking to see what other websites in the field look like to in-depth research with focus groups. The level of research performed will depend on the client’s budget and your existing knowledge of the industry.

Brainstorming

Once you know what the project is all about, it’s time to get some ideas together, and brainstorming is a great start. Rather than looking for the perfect idea to be your first, throw out any and all ideas or concepts for the website as a start. Some websites might call for a standard web interface, with navigation (a button bar) and content areas where users are most likely to expect them. Others may require a unique concept to present the content. In the end the content will drive the design… a news site will have a much different approach than a photographer’s web portfolio.

Decide on Technical Requirements

Early in the process of developing a website, decisions need to be made regarding the technical requirements of the project. Such decisions will affect the budget, time frame and in some cases the overall feel of the site. One of the primary decisions is what the underlying structure of the site should be, which will determine what software is used and what system makes the site “work.” Options include:

·         Basic HTML: A standard HTML site in which each page is edited manually. This may be relatively quick to develop but leaves little flexibility and a lot of ongoing maintenance.

·         Use a Content Management System: Using a CMS generally allows a client to perform regular content updates, while the designer controls the overall look and feel of the site. Some systems may be developed from scratch, others purchased and tailored to the client’s needs, and others available as online systems (sites such as Blogger andWordPress are free and include a basic CMS). 

·         Flash: Flash sites are developed within Adobe Flash and can offer a rich, animated, multimedia experience. While layout work in Flash is often easier than coding a site, Flash development (making the site operate) can be time-consuming and complicated, but rewarding.

Write an Outline

Now that you’ve gathered the necessary information and brainstormed some ideas, it’s a good idea to get it all down on paper. An outline of a website should include a list of each section to be included on the site, with a description of what type of content will be shown on each page. It should also describe in as much detail as possible what features would be on the site, such as user accounts, commenting, social networking functions, video, or a newsletter sign-up. Aside from helping organize the project, the client should be presented with the outline so they can approve it before the project continues. This will allow them to add, remove or adjust any sections or features, and will ultimately help you develop a budget and time frame and build the site. Agreeing on a price for a website project based on an approved outline will help to avoid additional fees or differences in opinion late in the project.

Create Wireframes

Wireframes are simple line drawings of website layouts that allow you (and the client) to focus on placement of elements rather than color and type. This is extremely helpful as it determines what content deserves the most focus and what percentage of the space on the page. Without being distracted by other visual elements, approved wireframes provide a framework for your designs.

Design the Website

Once you and your client are happy with the wireframes, it’s time to start designing the site. Adobe Photoshop is the most common tool for creating the initial designs. The focus of the site design should be to present the content…. while flashy designs and animation have their place, they should not overpower what the user is looking for. Consistent navigation will help your visitors find all your main content areas, while clean use of type (in the case of a text-driven site) will keep them reading and coming back for more. Before you have actual content for a site design, Lorem Ipsum text will help fill spaces without distracting your client.

Build Web Pages

When your design is approved, the pages need to be turned from mockups into actual web pages written in HTML and CSS. Experienced designer/developers may choose to take on all the coding, while someone focused on the design side of the web may work closely with a developer to bring the site to life. If that is the case, the developer should be involved from the start, helping to make sure the design is a realistic and an effective web layout, and that promised features are both possible to execute and beneficial to the site.

Software such as Adobe Dreamweaver can help a designer turn a mockup into a working web page, with drag-and-drop features, pre-built functions and buttons to add links and images. If the site is done in Flash, it will be built within the Flash software rather than in HTML or other languages.

Develop the Website

Once your layout is completed in HTML and CSS, it needs to be integrated with the system you have chosen in order to build a functioning website. This may mean developing templates to be read by a content management system, altering a WordPress template, or using Dreamweaver to create links between pages and more advanced web features. This is again a step that may be left to another member or members of the team.

Promote the Website

With your website online, it’s time to promote it. Driving traffic to a site can include optimizing it for search engines, sending newsletters to highlight new content, advertising with Google or with banner ads on other sites, and more conventional methods such as print advertising and word-of-mouth.

Keep it Fresh

One of the best ways to keep people coming back to your site is to keep the content fresh. With all of the work put into a site, you don’t want it to remain the same for months after the launch. Continue to post new content, photos, videos, or music… whatever the site was built to present. A blog is a great way to keep a site updated, with posts of any length on any topic related to your site.

What to Include in a Website Proposal

By Eric Miller

A website proposal contains many aspects different from other graphic design proposals, in that technical elements must be addressed along with creative ones. While print proposals do address items such as printing procedures, website proposals must specify web hosting, systems for maintaining content, programs or programming languages to be used and other technical specifications.

Outline of Content

A website proposal should clearly spell out what will be included on the site. This can be done in a standard outline format, or visually, to show what sections and features you intend to build for the client. An outline serves to both let the client know your ideas for the site (which should be based on meetings with them) and protect you from rounds of changes and additions not initially planned for. By including the outline in the proposal and eventually the contract, you are making it clear what is included for the price and therefore what additional services can be charged for.

Method of Building Site

It is important to decide at the start of a project what system or method will be used to build the website. Some sites are built in static HTML, meaning each page is created manually, and updates are done manually as well. Other sites are built in HTML but utilize a content management system (CMS) that stores the content in a database and allows for easier updating. Sites like WordPress and Blogger offer a simple CMS included for free with your site, while other CMS packages are installed on web servers and completely customized for the project, offering countless feature options. Another option for building the site is within Flash, allowing for a rich multimedia experience and a lot of development time. Regardless of the method chosen, it should be explained in the proposal so you and your client are in agreement as to the best way to build the website.

Hosting

A web proposal should also include the hosting plan for the site. The client should be assured that the hosting plan would properly support the traffic and content expected. For example, a site with a lot of video content will need sufficient storage and speed. Along with a detailed description of the hosting, expected costs over time and for setup should be included.

Maintenance

Once a website is designed, built and launched, it will need to be maintained. Site maintenance includes both technical up-keep such as server upgrades, and updates to content or design on the site itself. The plan, and costs, for maintenance should be detailed in the proposal. This may include specifying what the client will be able to update on their own (through the use of a CMS), what updates you as the designer/ developer will handle, hourly rates for ongoing work, and any other details concerning keeping the site running and up-to-date.

Time Frame

Most clients will want to work on a deadline. While web projects require many rounds of approvals and changes, include the expected amount of time to complete the project. Depending on the needs of the client, a strict deadline might have to be included.

Estimate

After explaining in writing how you plan to develop the site, what will be on it, how long it will take, and the hosting and maintenance, an estimate of your fees should be included. This is something that should be discussed with the client, ideally before creating a full proposal, so you know what type of budget you are working with. Once you have determined the cost for the project, it can be beneficial to again speak to the client (instead of just sending a number in writing) to get an idea of their reaction and potentially negotiate to land the job.

Going to Contract

Once a proposal is accepted, it should be included as part of the contract with the client. This will again clearly spell out what services are expected for the cost. The contract will also have to specify a payment schedule and legal provisions, for which an attorney should be consulted.

How to Create Website Wireframes

By Eric Miller

1 of 4

Previous Next

The Focus of Website Wireframes

Ad

Design Your Own Websitewww.moonfruit.com/WebsiteDesignBuild Your Own Website In Minutes! Free Professional Designs. Try Now.

Website Wireframe

Website wireframes are simple line drawings that show the placement of elements on a web page. You can save yourself a great deal of time by editing the layout of a simple wireframe at the start of the design process instead of a complex design later.

Using wireframes is a great way to begin a web site project, as it allows you and your client to focus on layout without the distraction of color, type and other design elements. Concentrate on what goes where on your web pages and the percentage of space that each element takes up, which can be determined by your client’s needs.

What to Include in a Website Wireframe

Ad

Design Your Own Websitewww.moonfruit.com/WebsiteDesignBe Up & Running Online In Minutes. No Programming Required - Try Now!

Simple wireframe example

All of the important elements of a web page should be represented in your website wireframe. Use simple shapes instead of actual graphics, and label them. These elements include:

·         Navigation: Buttons for users to visit the main sections of your site.

·         Company logo: Can just be represented by a box.

·         Content areas: Where will your different sections of content appear?

·         Search boxes

·         User login areas

How to Create Website Wireframes

Ad

Design Your Own Websitewww.moonfruit.com/WebsiteDesignBe Up & Running Online In Minutes. No Programming Required - Try Now!

OmniGraffle Screenshot

There are a variety of ways to create a website wireframe. They include:

Drawing it by hand on paper
This method comes in handy when face to face with a client. Sketch out your layout ideas on paper, with a focus on what elements should go where.

Using Adobe Photoshop, Illustrator, or other graphics software
Most graphics software packages come equipped with all of the basic tools necessary to create wireframes. Simple lines, shapes and text (to label your elements) are all you need to create a presentable wireframe.

Using software created for this type of task
While Photoshop and Illustrator can do the trick, some software packages are developed specifically for this type of work. OmniGraffle is a piece of software that simplifies the creation of wireframes by providing shape, line, arrow and text tools to use on a blank canvas. You can even download custom graphics sets (for free) at Graffletopia, which gives you more elements, such as common web buttons, to work with.

How to Create Website Wireframes

By Eric Miller

4 of 4

Previous Next

The Benefits

With website wireframes, you have the benefit of tweaking a simple line drawing to achieve the desired layout. Rather than move complex elements around a page, it can take very little time to drag a couple of boxes into new positions. It is also much more productive for you or your client to focus on the layout first…you won’t start out with comments like “I don’t like that color there!” Instead, you will start with a finalized layout and structure on which to base your design.