[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
- In terms of getting something reasonably nice together quickly, you should make heavy use of fonts and icons.
Because fonts are vector graphics specified by mathematical equations, they are infinitely manipulable with CSS transforms
built into every browser. The FontAwesome library also gives scalable vector icons, which are often useful for quick
mockups when enlarged in size. Also consider using Unicode characters for icons.
- Photos, Videos, Animations
- Often the key to a good presentation or webpage is to put an abstract concept into visual form.
Stock photographers have actually thought about these issues.
Don’t use stock photos in which people are looking at the camera!
That’s what makes a stock photo look cheap.
A good signal of a lower quality site is that it has inconsistent padding, doesn’t use https properly for checkout,
and/or uses stock photos of this kind. You might also consider reshooting a stock photo with your product so that
it looks custom.
- Use Bootstrap, Themeforest, 99Designs, Dribbble
- When it comes to turning your wireframes into HTML/CSS/JS, don’t reinvent the wheel.
Design is information and is becoming commoditized. Use Bootstrap + Jetstrap.
Themeforest is a set of slightly more expensive ($9-12) templates.
99Designs is a few hundred to a few thousand bucks for a logo or webpage revision.
Dribbble is an excellent resource for finding a contract or full time designer.