answered question
2
Votes
Votes
4
Answers
Answers
M$1.00
How do you plan and design a website layout?
What methods would you recommend to plan and design a website? Do you initially formulate a layout on paper and then translate it to Photoshop, Illustrator, Fireworks, or some other graphical application? If so, what is the best program to use? Do you layout the graphics and then cut them into individual pieces to work with for the coding of the site?
|
Report
answers (4)
First, do some research into exactly WHAT you want your site to do. Find out if you need a catalog, multimedia, payment system, blog, etc.
Then, find someone with design sense. This can either be a friends WHO IS A DESIGNER (not just a friend who wants to help), or hire someone.
Thievery is alive and well on the web. Now, don't outright steal content and designs, but I suggest hitting the web to have a look at whats out there, noting what you like, and formulating an idea based on that. You're not limited to websites either. Don't be tacky about it, but you can get a lot of great ideas from the meatspace, like business cards, poster ads, etc. Some places to start for design inspiration are
http://csszengarden.com
http://webdesignledger.com/category/inspiration
http://www.webdesignerdepot.com/
http://www.webcreme.com/
http://sixrevisions.com/web_design/16_sites_web_design_inspiratio/
http://www.asiteaday.org/
Once you have an idea of what elements you want on your page, STOP THINKING ABOUT THE DESIGN.
WORK. ON. CONTENT. Seriously. A great, killer design means precisely squat without content to sustain it. Plan out content. Write some stuff. Hire a copywriter if you need to. Just don't try to design a container (website) for an unknown volume (content).
Now that that's out of the way, back to the design.
My advice is wireframing. You can do this in almost any graphics editor, or you can do it with construction paper and scissors. Your choice (the construction paper is more fin, though :) )
Some wireframing resources:
http://www.boagworld.com/usability/quick_and_dirty_wireframes/
http://www.sitepoint.com/article/wire-frame-your-site/
There should be a bunch of info in here about selecting/building a CMS, using frameworks, etc: but that's beyond the scope.
What should be said is to remember that there is a tool for every job.
CONTENT = HTML.
PRESENTATION = CSS.
BEHAVIOR = JAVASCRIPT.
*Inset web standards lecture here*
Then, find someone with design sense. This can either be a friends WHO IS A DESIGNER (not just a friend who wants to help), or hire someone.
Thievery is alive and well on the web. Now, don't outright steal content and designs, but I suggest hitting the web to have a look at whats out there, noting what you like, and formulating an idea based on that. You're not limited to websites either. Don't be tacky about it, but you can get a lot of great ideas from the meatspace, like business cards, poster ads, etc. Some places to start for design inspiration are
http://csszengarden.com
http://webdesignledger.com/category/inspiration
http://www.webdesignerdepot.com/
http://www.webcreme.com/
http://sixrevisions.com/web_design/16_sites_web_design_inspiratio/
http://www.asiteaday.org/
Once you have an idea of what elements you want on your page, STOP THINKING ABOUT THE DESIGN.
WORK. ON. CONTENT. Seriously. A great, killer design means precisely squat without content to sustain it. Plan out content. Write some stuff. Hire a copywriter if you need to. Just don't try to design a container (website) for an unknown volume (content).
Now that that's out of the way, back to the design.
My advice is wireframing. You can do this in almost any graphics editor, or you can do it with construction paper and scissors. Your choice (the construction paper is more fin, though :) )
Some wireframing resources:
http://www.boagworld.com/usability/quick_and_dirty_wireframes/
http://www.sitepoint.com/article/wire-frame-your-site/
There should be a bunch of info in here about selecting/building a CMS, using frameworks, etc: but that's beyond the scope.
What should be said is to remember that there is a tool for every job.
CONTENT = HTML.
PRESENTATION = CSS.
BEHAVIOR = JAVASCRIPT.
*Inset web standards lecture here*
source(s):
http://csszengarden.com
http://webdesignledger.com/category/inspiration
http://www.webdesignerdepot.com/
http://www.webcreme.com/
http://sixrevisions.com/web_design/16_sites_web_design_inspiratio/
http://www.asiteaday.org/
http://www.boagworld.com/usability/quick_and_dirty_wireframes/
http://www.sitepoint.com/article/wire-frame-your-site/
http://csszengarden.com
http://webdesignledger.com/category/inspiration
http://www.webdesignerdepot.com/
http://www.webcreme.com/
http://sixrevisions.com/web_design/16_sites_web_design_inspiratio/
http://www.asiteaday.org/
http://www.boagworld.com/usability/quick_and_dirty_wireframes/
http://www.sitepoint.com/article/wire-frame-your-site/
| Asker's rating: |
Find several sites you like in your niche and then combine the best features of each. Software tools are a secondary consideration.
source(s):
Personal experience.
Personal experience.
First, I draw the layout in a piece of paper then transfer the drawing to Adobe Photoshop. Do not use table when creating websites because it will ruin your page rank. Instead, use CSS. Cut the pieces through Adobe Image Ready and code the CSS to your favorite text editor.
Start with the end users of your site. What are the most important tasks that your most valued users want to do when visiting you site?
- compare prices?
- compare features?
- find out about features and benefits?
- learn how to use your products and services more effectively?
- get support?
- check project status?
- buy things?
- find out where to buy things?
- communicate with your staff?
- evaluate your expertise?
Once you have a prioritized list of tasks and users, work out the type of site that can best matches those tasks - blogs, e-commerce, project, portfolio etc.
Depending on how standard or unique your site is you might want to get straight on with building something, or go through a couple of prototyping phases. Ideally involve end users in building and evaluating your prototypes.
Unless your site is a unique technical innovation, build it using some standard, robust systems or frameworks. If you have competent IT staff host it yourself. If you don't, run with a hosting service that updates and maintains your cms/blog or use a product/framework that has commercial support available. (Wordpress, Concrete5, Acquia Drupal).
At all times keep a focus on the end user whilst balancing aesthetic and functional designs.
- compare prices?
- compare features?
- find out about features and benefits?
- learn how to use your products and services more effectively?
- get support?
- check project status?
- buy things?
- find out where to buy things?
- communicate with your staff?
- evaluate your expertise?
Once you have a prioritized list of tasks and users, work out the type of site that can best matches those tasks - blogs, e-commerce, project, portfolio etc.
Depending on how standard or unique your site is you might want to get straight on with building something, or go through a couple of prototyping phases. Ideally involve end users in building and evaluating your prototypes.
Unless your site is a unique technical innovation, build it using some standard, robust systems or frameworks. If you have competent IT staff host it yourself. If you don't, run with a hosting service that updates and maintains your cms/blog or use a product/framework that has commercial support available. (Wordpress, Concrete5, Acquia Drupal).
At all times keep a focus on the end user whilst balancing aesthetic and functional designs.
source(s):
http://www.useit.com/alertbox/20030414.html
https://gettingreal.37signals.com
http://savethepixel.org
http://www.balsamiq.com
http://www.useit.com/alertbox/20030414.html
https://gettingreal.37signals.com
http://savethepixel.org
http://www.balsamiq.com
Related questions
140 characters left
ask any question
I'm redesigning a company website which will basically just communicate the services we provide, testimonials/case studies, etc. - fairly basic stuff. I have most of the actually written content created. I plan to build the site using xhtml and css.
I'll read up on how to create a wireframe and piece one together once I've drawn inspiration from other well designed sites.