Identity and logo
Website
I wanted the website to be a creative showcase where I can display all different types of creative work that I do. I designed a fully responsive website based on a grid system with fixed-width columns and 4 main breakpoints for smart phones, tablets and desktops.
Mobile-first approach
Starting with a 4 columns grid for portrait and 6 column grid for landscape orientation for smart phones. The main menu is collapsed and can be toggled using the icon in the top-right corner.
Tablets
Having more screen real-estate, the navigation is now fully expanded with a grid of 8 columns in portrait and 12 columns in landscape orientation. Also, the main header on the welcome page is expanded to feature 3D renders of low-poly models of animals to compliment the theme for the whole project.
Desktops
I used two grids for the desktop version of the website. The first one is the classic 12 column grid for smaller reoslutions, and the second one is a 16 column grid for large resolutions. On large screens, the font size is also increased to improve the readability on large displays.
Home
The home page features a large header with short introduction of the website with links for the different types of work I do. Clicking on the links in the text will filter and re-order the block items in the grid below.
The grid shows the latest featured work of mine as it tries to mix all different types of work, where all items are ordered by the date of the project (from newer to older). There are two different sizes for the blocks, the big ones are used to emphasize on certain projects
Design
Listing of all design-related projects such as websites, logos & corporate identity and print.
Design / Project view
The page where all project-related images along with short descriptions are displayed. On the right is the project information and description along with different sharing options.
Photography
Using the same layout and logic as in the Design page, the photography projects are listed using large thumbnails.
Photography / Project view
Each photo has additional description such as optional title and EXIF information about the camera model, settings and lens used.
The description on the right shows the places where the photos are takend together with a map.
Photography / Location
All locations where I have taken the photos are displayed on a map with additional info for each location.
Photography / Tags
Sorting the grid items by clicking on each individual tag from the tag cloud.
Video
The same design, layout and functionality is used for displaying the video projects.
Blog
In order to better utilize the space and keep the design logic of the other parts of the website, the blog articles are displayed in 2 columns.
Blog / Article view
The current article is the main focus of the page, while related posts are displayed on the right.
About
All additional information about me is displayed here along with a contact form and several other related bits of info and resources.
Headers
I've used Cinema 4D to create several different headers that are randomly displayed on each page load to compliment the site theme.
Thanks for watching!
Check out the website on www.balinov.com
I still have more ideas about functionalities and content for the website and I'll keep on developing and updating it frequently. Also keep an eye on my blog for some interesting articles and tutorials about different creative topics.
