Job Animation, Art Direction, Design, Front End
Award Golden Spider 2017 Personal Blog
We delve into Göktuğ's workspace and witness his broad range of works, his thoughts and journeys in life.
Göktuğ Canbaba is an Author, Photography Artist and a Traveller.
I had known Göktuğ for a long time. When he asked me to make a website for him, I knew that I cant make something akin to any other.
It would be challanging, it would be time consuming but worth it in the end.
I’ve always loved and cherrished the old one paged websites with incredible pixel animated menus. You had to explore through these amazing animated gifs and select menu icons to other pages.
Its been a while since I saw that, and then I thought maybe I can make something similar. After several sketches and checking if I got what it takes to create what I imagine, I’ve started exploring my drafts.
I decided to model Göktuğ as a 3d Character and animate him in his imaginary office space. This office would be the center of the website which would connect all the pages together
Animations for Websites?
What could go wrong? Right?
While planning, I realize that making animations and playing them as videos would be problematic for cross device/resolution. Meaning people with smaller or bigger screens would have problems selecting and interacting with the site.
So I decided to divide the animations to individual objects and place them according to their responsive spaces. There fore any screen ratio would sort themselves out without a problem. Also I can discard any unnecessary objects if on smaller screens while add more objects on larger screens.
Also in my first drafts I went with gif animations but realize I don’t need to go that back in time. Instead I’ve divided animations in to sprites and “Tween” them as frame animations through GreenSocks JS library.
Fast as lightning!
As the project progressed, I started to worry whether if I'm over doing this
Thanks to modern compression technologies and caching services, I was able to overcome most of my problems.
The website is fully responsive, great on google speed checks and animations slide as smooth as butter.
Navigation is the KEY
Obviously before any animation or polishing takes place, I planned what would be included in the site and how can I implement them in to the navigation. I didnt want to put things in randomness where the user had to mouse search/guess icons. They should be attention graphing and obvious.
So I placed his books on the library and his photos on the small coffe table front of the office table. Then went on and placed his News and Events on the corkboard and his blog at his computer. I also wanted to let people contact him and made it so he has some sort of a letter bin. And lastly, when you click him , you would get the About page.
Keeping things intresting.
Let Göktuğ show you whats going on!
So we made a great looking menu. Thats great and all but, aside from the animations, isnt it a bit too static? How would any one know whether he has something coming up or whats current in the first glance?
Thats where additional icons come in.
I’ve created a section on the wall where he can show his latest pictures on the wall. Also added as so he can change the seasons thats on the window.
Placed papers on the desk to indicate if he is working on a new book. If you click these papers, a new page appears, showing the name and any info he has about his new project.
Placed a sıitcase, in front of the desk, which also has the name of the event he is attending. If clicked on, we come to another part of the corkboard where he has pinned the details of this event.
And lastly, I’ve placed Boxes to show when a new book came out. Since in sie,the cover and the backcovers of the books are loaded separetly, I was able to make a 3d looking mockup near the boxes as well (so they change automaticly when a new book is announced in site). If clicked on, we would peek in to the boxes and see a note giving links to online retailers where people can order them.
Send Post Card!
You can click on contact page and send a post card with ever changing post stamps
The Cork Board
One of the most important piece of an office
I ve designed this section as such that, as if all the news and events Göktuğ shares, are just notes on his cork board at his office. And just like any other corkboard, there are random pictures here and there and “postit” stickers on pages.
These postits divide the pages of his notebook between news and events. Clicking either one would open the respective selection
See these images directly from its source
I wanted to create some sort of a semi personal connection with the visitors. And how else but to let Göktuğ show you his new photos directly from the visor of the very camera he took them?
I believe that, it also strenghtens the “looking through his office” type of feel I wanted to give.
Looking through his books, directly from his library
I wanted to continue with the feel of “looking through his office” feeling. So you can select books through clicking on their backs which causes them to turn their covers on you. Just like looking through a real library.
After selecting the book, you can turn pages (yes really) one by one.
I also went and designed some of the characters from his books and made small toys that would occupy his library board randomly. Sometimes its his Cat in Suitcase , sometimes its his characters car in Pissing Hawk or “Bambuka” (a fantastic mandolin from one of his book).