Web Design Case Study: adamceleban.com
As is always the sensible approach with portfolio sites, when they're showcasing artwork, illustration or visual design, it's always wise to give the work room to stand on it's own, unencumbered. The difficulty is in not over-designing the website, and turning it into a work of art itself. A portfolio site needs to be neutral so as not to take attention away from the illustration work.
Even though I was my own client for this project, I took much the same approach I would normally. The 'client' wanted a light, bright clean feel to the new website. One that introduced new navigation with categories, making something that was stylish whilst also being incredibly easy to use. Simple and elegant, with a design that reflects an artist that is experienced (and that has a sophisticated, classical worldly feel). There was also the feeling that the site needed a blog-like approach rather than a typical gallery site packed with little other than images, because I want my audience to become involved and get to know the artist behind the works.
The picture frames are clean and sharp in order to give the artwork space to shine on its own. A typical post/article's composition in the browser combines rules from both classical architecture and typography. In designing publications it's been observed that humans feel most comfortable reading lines that are about 12 words long, so I've applied that line-width along with the use of the golden ratio. If you look to classical Greek and Roman architecture, as well as nature, you will find a multitude of examples of this ratio, and I have made this the relationship of the text block to the picture frame.
The wall and floor motifs also borrowed from the real world with the polished floorboard footer at the bottom of the page, and wallpaper that borrows from the kinds of designs that are used in The Louvre. Their combination of wallpaper and ridiculously ornate frames, while over the top, still seems to work. I wanted to borrow slightly with some of that ornate detail, but keep it much more subtle and muted. If you look closely you’ll notice that as the page scrolls, the lighting effect on the wallpaper changes.
Responsive Web Design
In the web's current climate, it seems as though making dedicated versions of your website for different devices is going to be a never ending job. I wanted to make this version of my website truly responsive, and be completely functional, and be specifically fitted for any device you happen to use. To achieve this, on many occasions, instead of defining proportions using pixels, I used percentages. If you’re reading this on a desktop computer, go ahead and resize the window to see how the site adjusts accordingly.
CMS (Content Management System)
One of the biggest motivations to complete this most recent redesign of my website, quite frankly, was being fed up with Wordpress. Wordpress (a CMS) is essentially a blogging framework that lets you maintain all of your posts in a database, with the ability to add or change visual themes. The problem was that it was proving more and more difficult to create seemingly simple functions on my website without massive and cumbersome workarounds. And when something breaks, with Wordpress being so big, it's so incredibly tedious figuring out what went wrong, I thought I might as well make my own. It was a long learning process, but definitely worth the effort, since I can completely understand what's "under the hood", and can now offer the same functionality to my web clients. As you can see in the image above, I can now edit my posts with ease from anywhere – even from my phone.
- Custom Built CMS
- Hand-coded Web Design
- Navigational Icons & Motifs
- Search Engine Optimisation
- Responsive Design
(for all mobile devices)
- Cross-browser Compatible