Personal Portfolio - Umbraco ยป User Interface


When I started porting my static portfolio to Umbraco, the web design was already in place. Based on existent organization I started my analysis.

Umbraco has the concept of Templates to build reusable layouts. Templates basically binds to .NET Master Pages and can be used to compose complete pages with similar layouts but different content.

Main Layout

All pages in this portfolio have common elements that appears with few changes. These common elements were all put in the Main Layout.

Main Layout Screenshot

Wireframes for this page - with emphasis in the parts and reusable elements - can be seen below.

Click the image to see it bigger

Main Layout

This wireframe also shows two reusable controls - Left Menu and Top Navigation. Different from normal static controls, these are dynamic in the sense their content depends on the page you're browsing or data saved on database.

These controls were implemented as what in Umbraco are called Macros, binding directly to .NET UserControls.

RichText Page

RichText

Project Page

Project Page 

Contact Form

Contact Form