Thursday, 27 February 2014

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.

Tuesday, 25 February 2014

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

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
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

1 of 4


Previous Next
The Focus of Website Wireframes
Website Wireframe
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
Simple wireframe example
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
OmniGraffle Screenshot
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

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.


Design: How to create a wireframes

How to Create Website Wireframes

1 of 4


Previous Next
The Focus of Website Wireframes
Website Wireframe
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
Simple wireframe example
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
OmniGraffle Screenshot
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

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.