[Wireframing, Copywriting, Design](https://docs.google.com/file/d/0B8KSMAVGQMrtU0p1Nm5iN0ZnTFk/edit?usp=sharing)
================================
Wireframing
-----------
Once you feel that you have a market, you should design a mockup of your product’s website, also known as a wireframe. **Your main goal is to produce sitemaps and detailed user flows.**
Here's an example of wireframing a crowdfunding page.
Our crowdfunding site will use this basic layout.
Which can be made with the following HTML (which uses Bootstrap).
And it looks like this (not the final product of course).
Copywriting
-----------
High-level principles:
- Homepage message
- Don’t expect visitors to figure out what the product is about on the third page in;
your enemy is the back button. Go to a cafe and test your homepage message on people with the 5-10 sec rule.
Only spend energy on the homepage if it’s a significant source of customers.
If it isn’t (e.g. if your sales come through a salesforce),
you can leave the homepage alone for a surprisingly long time.
- Testimonials and customers
- People feel more at ease when they see other real people and companies using the product and recommending it.
- Work backwards from the press release
- Amazon writes the press release before they build the product.
Doing this, you will find yourself figuring out what features are news and which ones are noise.
- Someone is wrong on the internet
- Get a friend to pull up as many competitor webpages as possible.
Write down your immediate gut reaction as to why those companies are terrible and your company and product is different.
Put this into a feature matrix
and then determine whether your new features really differentiate your product substantially.
- Simple and factual
- Do your best to turn vague features (“PageRank provides better search quality”) into concrete facts and statistics
(“85% of searchers who used both Blekko and Google preferred Blekko. Find out why.”).
Use Oracle style marketing:
less is more, hammering one point above the fold (i.e. above the scroll line) and keeping the rest in the secondary copy.
Alternatively, use a carousel
to neatly hammer out multiple points above the fold (but not too many).
Check out Dropbox's minimalist landing page.
- Call to action
- You want someone to do something when they come to your page, like buy something or sign up on an email form.
Make sure you reiterate this “call to action” many times (at least at the top and bottom of page).
Make the call to action button cartoonishly large and in a different font.
Take a look at the landing pages of some of the current top startups for inspiration (for both what and what not to do).
Design
------
Wireframe goals:
1. Functionality and semantic meaning: what does the product do?
2. Marketing copy: how do we explain what the product does in words?
Consider [using comics](http://www.flickr.com/photos/rosenfeldmedia/sets/72157631874695422/)!
3. Design: how do we make the site and product look beautiful and function beautifully?
High-level principles:
- Vector and Raster Graphics
- Understand the distinction between vector (dynamic resolution) and raster (fixed resolution) graphics.
Whenever possible, work with vector images as they will scale well and are amenable to later manipulation.
Raster images are unavoidable if you truly need photos on your site, but strive to minimize them for your MVP.
- Contrast, Repetition, Alignment, Proximity
- Become familiar with the four principles,
CRAP,
as mentioned in the
Non-Designer’s Design Book.
A good strategy is to look at the examples, create your design without thinking too much about them,
and then re-apply them over the design at the end.
- Fonts and Icons
- Stock Photos, Videos, Animations
- Use Bootstrap, Themeforest, 99Designs, Dribbble