As I mentioned in the previous post, I decided to take inspiration from Farmville and started building out my own city.
Phase 1
One cold-Canadian Saturday morning, I sat down and started laying down the ground for my town, literally, well on Photoshop! I decided to create a map with multiple clickable objects which when clicked, will give you more information about that event associated with my life. After hours and hours, I finally had something planned out.
Friendly note: Please remember to save your Photoshop files at fixed intervals, randomly my laptop decided to die and Photoshop's autosaved feature bailed on me!
Phase 2
After adding 100s of layers on photoshop for individual map objects, I felt accomplished. I could see my vision of the town coming to life. My first thoughts were to ensure the town covers the entire visible screen of the webpage. While that looked good, I gave myself a couple of days to try to think if I can come up with something else; something even better. I took some time to view further design sources until I stumbled on the idea of a floating island.
What if my entire webpage is covered with an end-to-end image of my town, but it contains a floating island with my town on it? I thought to give it a shot. So, I designed a floating island.
Phase 3
Now, it was time to take the town created in Phase 1, to be put on to this island. This seemed simple at first, but it took me some time to weed out the unnecessary layers I had and add minor adjustments to mark it complete.
Phase 4
Lastly, I needed to highlight the items that would be clickable by the user. I came back to this after I had started working on the development of the webpage. I initially had thought of adding an animation around the building, but because a responsive webpage makes it tough, a lot tougher, to handle image resizing, I decided to have a static glow around these items on the map. Finally, I had this:
Phase 5 (Let's keep it a secret, for now)
I hope this post gives you a sneak peek into my island-town, but you may ask, how does the final website look? There's some more design to it, but I'll save the final sauce for the submission post. 😉
See you soon!
Top comments (0)