how-to

I will be writing about the familiar part of the flow, the process of starting to build the website from scratch to launch, which comes at a stage after you have validated and ensured that you’d be working on getting the website up.

1. Get the idea right detailed in a 1 pager. Detail in what the service does and what its not supposed to do. StackExchange has a great example - Area51 (The Staging Zone) go through an elaborate process of where users define what are considered good & bad questions so that it clearly defines the scope
2. Find and Analyse the competition. You should think about complementing the existing services or do much better than them to avoid people saying “another e-commerce website”. Companies with deep pockets spend money in capturing users and new companies without funding can drain faster trying to keep up with competition.
3. The process for getting the site out live - I have seen many websites in this phase which I can explain well (both the good and the bad parts). Skipping (1) & (2) might cost you a visible hole in the financials if realised after the fact.

Since you have the functionality listed now, you’d need a lot of other things to get over.

Step 1 - Company and Domain Name:

Determining the name of the company is a challenge since you’d want the search result on Google to get your name rather than somebody else’s. Having the same domain name and company name helps for referencing (startups usually do, others do not).

This is the toughest one if you are looking for dotCom domain since most of the names you can think of are parked or already been setup, especially if you are starting another cloud based product. If you are looking for a local websites using ccTLDs (has impact on SEO), you might be in a better position to get the name you want.

Step 2 - WireFraming:

WireFraming helps you understand the essential items in each and every page that are listed along with the basic user experience of the website.

If you want a different layout for phones, ensure you cover them as well. (The wireframes would be different for phones based on the resolution).

Popular choice of tools: Balsamiq, Pen & Paper

Step 3 - UI Design:

The aesthetics and colours are decided here with dimensions of the components in each of the pages. The non-web designers who do not deal with interactions in the rich-web space do not care about hovers, dynamic content, screens when loading content, image aspect ratios, several font