speccing out a website for Dummies
June 15, 2016 7:39 AM Subscribe
I need to put together some kind of document outlining how my smallish company would like our new website to be laid out.
It doesn't have to include the design aesthetic but it needs to function as a place to pull together all our ideas and make sure we (the management team) agree on the basic functions and layout of our site. We will then pass it onto the various web design companies we're talking to about working with, and choose one from there.
Are there any resources online that I can have a look at while I work out how to do this? Should it be just a word doc? Any thoughts or pointers useful.
Thank you in advance
It doesn't have to include the design aesthetic but it needs to function as a place to pull together all our ideas and make sure we (the management team) agree on the basic functions and layout of our site. We will then pass it onto the various web design companies we're talking to about working with, and choose one from there.
Are there any resources online that I can have a look at while I work out how to do this? Should it be just a word doc? Any thoughts or pointers useful.
Thank you in advance
Best answer: So, you should be working with a web designer for this. This is actually part their job. That said, a word document is fine. Just sit down together and identify things you want in your website. Make sure to mention any branding colors or fonts that are important to the identity of your company. Search high and low for a vector version (.svg, .eps, .ai) of your logo.
Most websites come in very predictable patterns now (listed from top to bottom):
[Brand/Logo, search bar if applicable]
[Navigation/Menu/buttons to browse your page]
[Imagery, tagline, or sliding gallery with company news/product sales]
[service your company provides #1] [service your company provides #2] [service your company provides #3]
Make sure whomever you work with is familiar with responsive design (or uses bootstrap) - you want your new website to look good on mobile devices.
posted by INFJ at 8:01 AM on June 15, 2016
Most websites come in very predictable patterns now (listed from top to bottom):
[Brand/Logo, search bar if applicable]
[Navigation/Menu/buttons to browse your page]
[Imagery, tagline, or sliding gallery with company news/product sales]
[service your company provides #1] [service your company provides #2] [service your company provides #3]
Make sure whomever you work with is familiar with responsive design (or uses bootstrap) - you want your new website to look good on mobile devices.
posted by INFJ at 8:01 AM on June 15, 2016
Best answer: This paragraph only applies if you are looking for web DEVELOPERS as well as designers: A word doc with requirements is good. It helps to be precise, as that will help you get a more accurate quote. Instead of "contact form," consider saying "the form should have some way of protecting it from spambots. The form must be re-usable on any page. The form will have 5 fields: Name, Subject, Email, Product Code, Text of query. The Email and Text of Query fields will be required. Upon submission, the submission should be accessible in the back-end of the website AND emailed to the following three emails: email1, email2, email3. We should be able to change the people who are sent, via email, the form submissions at any time."
I also strongly recommend an Information Architecture, which is a full list of every page on the website based on parent/child relationships (PDFs are often listed separately). That can help; if the vendor is expected to migrate your content for you, this helps them quote; if they aren't, it helps designers figure out how much content they need to account for in their designs (and make sure you choose a design which can handle more content than you currently have; things shouldn't just barely fit). For IA, you can use colour-coded Excel sheets, where each 'column' is one major section and each cell a page, and different 'levels' are coloured differently. I don't recommended nested Word bullets for your IA, because those get confusing really quickly. (Oh, it LOOKED like it was level 3 but actually it was level 4, with the slightly smaller bullet style.)
If you want to document "layout", common programs are Omnigraffle, Balsamiq, and Axure, which produces wireframes. But your wireframe can be as simple as a series of hand-drawn sketches, with an understanding that the vendor is to provide you with a detailed (Omnigraffle, Balsamiq, Axure, complete with semi-accurate dummy content) wireframes of a certain number of pages before proceeding to design phase. You also likely want them to provide mobile wireframes to make sure you like how it will look at mobile. This is because your vendor may have good ideas for how to lay out your content and you want this to be collaborative. You also want to make sure you're both on the same page, and hashing out wireframes together helps.
posted by flibbertigibbet at 8:06 AM on June 15, 2016 [1 favorite]
I also strongly recommend an Information Architecture, which is a full list of every page on the website based on parent/child relationships (PDFs are often listed separately). That can help; if the vendor is expected to migrate your content for you, this helps them quote; if they aren't, it helps designers figure out how much content they need to account for in their designs (and make sure you choose a design which can handle more content than you currently have; things shouldn't just barely fit). For IA, you can use colour-coded Excel sheets, where each 'column' is one major section and each cell a page, and different 'levels' are coloured differently. I don't recommended nested Word bullets for your IA, because those get confusing really quickly. (Oh, it LOOKED like it was level 3 but actually it was level 4, with the slightly smaller bullet style.)
If you want to document "layout", common programs are Omnigraffle, Balsamiq, and Axure, which produces wireframes. But your wireframe can be as simple as a series of hand-drawn sketches, with an understanding that the vendor is to provide you with a detailed (Omnigraffle, Balsamiq, Axure, complete with semi-accurate dummy content) wireframes of a certain number of pages before proceeding to design phase. You also likely want them to provide mobile wireframes to make sure you like how it will look at mobile. This is because your vendor may have good ideas for how to lay out your content and you want this to be collaborative. You also want to make sure you're both on the same page, and hashing out wireframes together helps.
posted by flibbertigibbet at 8:06 AM on June 15, 2016 [1 favorite]
Best answer: I am a biz dev guy for web shops. The following will make you somebody the "good" web shops want to work with.
The RFP should cover the following.
1. Goals. Are you trying to move sales online, reduce customer service calls to the call center, draw people to your physical store, look big and corporate even though you are small, etc.?
2. Budget - a lot of smart web shops won't even propose without a budget. See The Secret to Receiving Great Web Design Proposals for more info.
3. General overview / outline of your ideas, stuff that is important, etc. Don't try to design / architect the site in the RFP - you are hiring a design firm to do that.
4. Approximate timeline. If there is a drop dead date like "has to launch in time for annual customer retreat on Aug. 1" make sure that is noted.
I would do the above and let anybody interested respond - limit responses to 10 pages to keep your sanity. Then invite your favorite three in for meetings, allow them to revise their proposals based on what comes out of those conversations, then pick the winner and go.
posted by COD at 9:48 AM on June 15, 2016 [3 favorites]
The RFP should cover the following.
1. Goals. Are you trying to move sales online, reduce customer service calls to the call center, draw people to your physical store, look big and corporate even though you are small, etc.?
2. Budget - a lot of smart web shops won't even propose without a budget. See The Secret to Receiving Great Web Design Proposals for more info.
3. General overview / outline of your ideas, stuff that is important, etc. Don't try to design / architect the site in the RFP - you are hiring a design firm to do that.
4. Approximate timeline. If there is a drop dead date like "has to launch in time for annual customer retreat on Aug. 1" make sure that is noted.
I would do the above and let anybody interested respond - limit responses to 10 pages to keep your sanity. Then invite your favorite three in for meetings, allow them to revise their proposals based on what comes out of those conversations, then pick the winner and go.
posted by COD at 9:48 AM on June 15, 2016 [3 favorites]
Best answer: +1 balsamiq. if used as initially intended (monochrome, bad fonts), it completely abstracts the aesthetic from the page behavior (shut it, designers). ok, it abstracts it *enough* that you can focus a management/high-level team discussion on function and behavior and keep the meeting from becoming a bike-shed discussion about the blue 'next' button.
posted by j_curiouser at 9:59 AM on June 15, 2016
posted by j_curiouser at 9:59 AM on June 15, 2016
Best answer: +1 about not trying to do the layout or organization yourselves. You're likely to design it for your view and vocabulary but a decent designer will design it for the use of the site's users.
posted by chesty_a_arthur at 12:54 PM on June 15, 2016 [2 favorites]
posted by chesty_a_arthur at 12:54 PM on June 15, 2016 [2 favorites]
Best answer: Try this:
Website planning for small business
posted by 4midori at 2:00 PM on June 17, 2016
Website planning for small business
posted by 4midori at 2:00 PM on June 17, 2016
Response by poster: Hello everyone
Thanks a million for your very useful answers. It was also super useful for me to just have the correct terminology to be able to research methods.
posted by stevedawg at 10:55 AM on July 13, 2016
Thanks a million for your very useful answers. It was also super useful for me to just have the correct terminology to be able to research methods.
posted by stevedawg at 10:55 AM on July 13, 2016
« Older Solutions to this particular driving visibility... | Tattoo artist in NY in the Mo Ganji style Newer »
This thread is closed to new comments.
posted by oh pollo! at 7:59 AM on June 15, 2016 [5 favorites]