In development of a website, front end has become very important as it is the first area where client can see what the developer are thinking. Unfortunately, it is also the most time-sucking area as graphic is much easier to be commented and discussed upon by non-designer, thus creating an unending loop of show design > customer ask for adjustment > show again > more adjustment > repeat till budget gone kaput.
If, by merlins beard the customer has progress beyond that, then comes the challenge of preparing the foundation of the front end code.
These foundation has move further from basic design features such as color, typography, all those subjective 'feeling' that client talk about into more concrete territory such as elements of the website in particular.
Such elements that has become my must-get-it-right-first-before-start-backend are:
- Header + Menu
- Footer + Menu
- Sidebar + Menu
- How do error notification shown?
- How do success notification shown?
- How and what icon sets will be using?
- Form inputs
- Standard grid: colum based
- Standard grid: line based
After confirmed such elements then we move to the bigger picture which are:
- Layout 1: Home
- Layout 2: Dashboard after login
- Layout 3: List Page
- Layout 4: Login/register
- Layout 5: Object details page
- Layout 6: Object details form
What can be considered an Object? Simple: if such 'features' need to have a form, most likely it will involve a database. If it is, then most likely it is an Object. Thus, each object have form and each form need to show details. Hence: each object will got its detail page.
Only after all these was done can we move to more hig fidelity wireframe that will be shown to client once more, and get adjusted one more.
And the cycle repeats untill budget dried up.