Think, write, repeat.

I just created Meering – an HTML/CSS company profile template which contains 4 pages; homepage, studio/about page, works/portfolios page, and work/portfolio detail page. And I’ll tell you the story behind the design.

Homepage

There are 2 main links in this page, they are Studio – which is linked to studio page and Works – which is linked to works page. This page is full screen and there is no more text except you hover Studio or Works. There will be short description about the company and how they work. Then if you want to know more you should click one of them.

I put social media (dribbble and github) and phone link on every page and stick on the top of page. Because now github and dribbble can be the second of our portfolio site. The client can see how we code or how the design process work that we post on dribbble. That’s why I put them stick on the top of page and on every page and this could be the shortcut to go there. The phone link also make the client easier to contact us once they impressed with our work.

Studio Page

Studio page is divided into 5 sections; more detail about company section, team section, services section, testimonial section, and contact section.

Meering doesn’t include main link (Studio and Works) on every page, why? I try the new way to push user read the whole information on the page. That’s why I include link to the next section at the bottom of current section to tell user that there is other section below. And at the bottom of the last section I put one of main link, Studio or Works link.

The other reason why I don’t put main link on every page because basically this template contains 2 pages, Studio and Works page. IMHO it’s not too good to put just 2 links on  the top of the page. At least we need 3 links if we want to put links on the top of the page.

Works Page

Works page is divided into 4 sections; more detail text about how we work, portfolios list sections, client list section, and contact section. The portfolios list section is also able to filter based on the category.

Work Detail Page

On the Work Detail Page you can tell story behind your project. Basically It is divided into 4 sections; project title section, background project section, process section, and contact section. But on process section you can divide into some sections, for example: sketch, design, development, and deliver section (with slider).

That’s the story behind Meering design. Anyway if you interested with Meering, you can get it for FREE from Lieur’s Journal.