Over the past 6 weeks the team has worked together to create a showcase site which leads to our separate portfolios. Comprising Clare Halden, Katie Waldock, Poli Fowdrey and myself, we initially discussed what we wanted to see in the site and what areas of design we needed to master to be able to achieve a satisfying outcome.
Initial discussions, as shown in the meeting minutes, covered discussion of a suitable name and ways we could create a site that would lure in the viewer, creating interest, intrigue and doing it with a sense of humour. We chose Illumina as a team name as it brings a sense of mystery as well as suggesting we would light up the world of design! Initial conversations covered Victoriana, curiosities, Steampunk, circus acts and lighting effects. I explored some of these areas with image research putting together basic mood boards for inspiration. We also shared websites we liked and interesting effects we discovered in a group set up on Facebook. This allowed dialogue to continue out of class. The team found common ground after studying the Ben the Bodyguard website. This site had a neat flow, featured a grungy aesthetic we all appreciated. It’s use of scrolling was smart and it incorporated HTML5 and CSS effects that dazzle.
Taking our cues from this site we looked at ways of achieving a site that worked in a similar way while allowing the team members time to develop areas they wanted to work in while being mindful of the deadline. We chose a skyscraper as the key setting for our site which would be covered in neon lighting as if in downtown Tokyo. A descending elevator (matching the natural scrolling movement) would contain a man who would arrive by helicopter and leave by taxi.
We agreed on the following roles and responsibilities:
Clare: With her proven expertise in Illustrator would develop the building. Each week, Clare presented each version as it developed. We would look at the textures, number of windows and ways of using it technically and thematically.
Katie: Was very keen to develop her skills in HTML5 and CSS3 and was prepared to do research and work on tutorials while the building was being illustrated. She could animate certain scenes and layout the overall site.
Poli: Would develop the animated gifs which would link out to the separate content.
Mark: I would develop a series of animated gifs to dress up the building, create the separate pages to be linked to, and put together the binder.
Having never put together an animated gif before this was an entertaining skill to learn. Just by using the animation tool in Photoshop and building up the frames in layers I could create some good looking neon flashing signs. The animated gifs were very straightforward to make, what was more difficult was creating the neon effect. I followed a number of tutorials, each with a different set of challenges. Some took longer than others and often the effect wasn’t quite right. I ended up merging certain tricks I took from each. In the set of gifs, covered in a previous post, you can see the different styles. Some were initiated in Illustrator, others in Photoshop. Some royalty-free images were amended in Illustrator then deconstructed in Photoshop. One of the key aspects to making a sign look more realistic was having the sign when it was off just visible as well as having certain shadows and glows.
Some of the tutorials I followed, with the PSD Tuts guide being the most realistic:
I explored Adobe Edge initially as I was keen to learn more about web animation but my experiments were very basic and only involved moving text around a page. I am keen to explore this more as well as doing some work with the animation using HTML5 and CSS3 code.
Katie produced some great effects in code with two excellent animations for scenes taking place behind the windows of the skyscraper – a house party and a man being shot. Ideally, we would have produced many such scenes but there was a lot to learn in putting these together and it was necessary to keep a realistic workload for each of us.
We checked in each week looking at individual team members’ progress and referred back to our goals for that week and where we needed to take things for the next session. Fortunately, we were all able to keep things moving throughout.
Having provided my gifs to Katie and then resized them to the spaces allocated on the building I then set to work on the linked pages. I was already working on my portfolio site in Rapidweaver and was convinced that I could also create our linking pages in this way. While I couldn’t use the building image for the pages as this was still in development I could come up with a design that matched the tone. I found a royalty-free illustrated skyline and moved the buildings around, deleting some, increasing the size of others. I then combined this with a vectorized image of a purple sky at dusk. The content would then appear on black underneath this skyline and this is where I created neon signs for each of our names sitting on a portion of a brick wall.
Using the parallaxis theme that I’m using for my portfolio site, outlined in earlier posts, allowed me to bring in parallax scrolling to move down to each named profile. I created the contact and location pages in the same way. I created three separate sites for the pages then exported them to pass to Katie to incorporate into the site. I had prepared four different skylines for each of us but the scrolling meant that the ‘blocks’ for each team member had to look right when rolled out of the previous one. To do this I set up black backgrounds with a portion of a brick wall to give the grungy texture that I thought was similar to the main building and setting.
I experimented with making my own site, using a skyscraper with neons on either side positioned in divs linking out to my pages. After checking each page and making some minor adjustments to the code, such as increasing the side menu, Katie linked the pages from the main building. Unfortunately, the scrolling movement is a little erratic on the contact and location pages since being incorporated to the site. I am not entirely sure what may be causing the issue, but there may be some CSS conflicts happening.
We were able to utilize the talents and resources of the team well. We identified the key challenges early on and came up with a workable solution.