Portfolio Site Amends in Rapidweaver

Since publishing my site I have been experimenting with some add ons. The most effective addition to the site would have been the slideshow. This is a stack from Archetypon but I have been unable to get it working perfectly with the Parallaxis theme. A screen shot below shows the slideshow in action. It works fine until the screen reduces to mobile size at which point clicking on the horizontal lines of the menu bar no longer brings up the navigation dots. After experimenting with numerous different sizes for the slideshow and discussing my problem with the designer of the theme I have been unable to get a satisfactory workaround so far so have decided to jettison this block for now.

Screen Shot 2013-05-22 at 08.26.38

I have also worked out a simple footer. It just features my logo and repeats my social media links and key info on a black background. A good professional footer adds a great deal to any website so I think this is a useful amend.

Screen Shot 2013-05-22 at 08.34.37

 

I have also been working with FontStack to enhance the appearance of the typography on my site. I have not explored all the available options to their fullest yet, and have not been able to embed my preferred font, Brandon Grotesque, so that it appears across all media. I think it does look professional but could benefit with addressing more closely. In tandem, the text is probably a little wordy and is more attuned to a very business-like CV rather than a creative portfolio. Again, however, I think the site works for now and it will be interesting developing it further as my career in design progresses.

Showcase site process

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.

Screen Shot 2013-05-19 at 21.40.22

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:

http://abduzeedo.com/shining-neon-text-effect-photoshop

http://psd.tutsplus.com/tutorials/text-effects-tutorials/neon-text-effect/

http://www.psdstation.com/tutorials/special-effects/learn-how-to-create-neon-text-in-photoshop/

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.

Screen Shot 2013-05-20 at 00.14.32

Screen Shot 2013-05-20 at 00.18.31

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.

Blown to Smithereens Design website

I have finished putting together main structure of my portfolio site. I have taken copyright free images of scenes in Brighton and added textures and pattern overlays to the images. I have removed the colour from them and blurred them to give a subtle contemporary feel. I am still entertaining the idea of bringing in more colour. At the moment colour is revealed when you hover over the images in the portfolio. I like the idea that viewing my work is the moment colour is introduced to the site. A full screen slide show is in development and the footer area will be utilised more effectively. I see the site as one that can be developed and built on as my work develops.

http://www.blowntosmithereens.co.uk/

Screen Shot 2013-05-15 at 13.10.43 Screen Shot 2013-05-15 at 13.11.04 Screen Shot 2013-05-15 at 13.11.20 Screen Shot 2013-05-15 at 13.11.32

iMac-mock-up-Smithereenspage1 iMac-mock-up-Smithereenspage2 iMac-mock-up-Smithereenspage3 iMac-mock-up-Smithereenspage4

Blown To Smithereens logo

Having absorbed a number of minimal portfolio sites mentioned in previous posts, I have resolved my logo design and have finished the main areas of my site. Below are some sketches that led me to my logo. The idea is that these could be molecules bouncing around, fragmented but contained within a shape. By association, I think my brand name implies taking an unusual approach to a brief, absorbing it, deconstructing it and coming up with a workable creative solution.

Inevitably the logo will evolve. I like the minimal approach but may entertain bringing in some autumnal browns or yellows at some point.

smithereens-logo-ideas

Showcase site binder

With the Showcase site almost complete, the binder can be finished off. The cover and spine graphics have been developed to reflect the logo and night time urban cityscape feel. Luna Bar typeface has been used for the A headings as it bears a strong resemblance to many neon signs. It is quite a pulpy and garish font too, so ties in with the visual approach. The cover design will be transposed to the CD packaging and disc label too.

The binder has been broken down into eight sections and the main content can be seen below:

1. Project Scope

2. Our Skills,

3. The Team

4. Schedule

5. Budget (as this may be commercially sensitive and can quickly become out of date I have omitted this section below)

6. Website Development

7. Appendix (containing minutes from our six weekly meetings and also a selection of moodboards)

8. Contact DetailsBinder Content_Page_01  Binder Content_Page_03 Binder Content_Page_04 Binder Content_Page_05 Binder Content_Page_06 Binder Content_Page_07 Binder Content_Page_08 Binder Content_Page_09   Binder Content_Page_12 Binder Content_Page_13

Portfolio Development

In parallel with the work on the showcase site, I have been getting up to speed with the functionality of RapidWeaver and exploring the themes available. Sticking with the Parallaxis theme for my portfolio and also possibly using it for the linking pages on the Showcase site, I have been looking at further effective layouts of both portfolio/agency sites and also sites using the parallaxis function.

Coal / Face is a digital agency in Newcastle and their site is a fine example of simple, modern layout with a nice use of texture, background patterns and minimal colour. They have some eye-catching additional touches using jQuery, to show off their flare without jarring with the functionality of the site. I like the dial in the footer particularly.

Screen Shot 2013-05-02 at 12.09.10 Screen Shot 2013-05-02 at 12.08.41

I have also been inspired by the forward thinking design on Pitchfork’s website which is utilizing very advanced programming to showcase some its features such as key interviews and their Advance service. The current interview with Savages is presented in a stunning format with awe-inspiring parallax scrolling, unusual typography effects, with letters appearing to fall away when scrolling, use of full screen video, all combined with clean typography. I wonder if this style of presentation may be the way more and websites choose to present certain features.

Screen Shot 2013-05-02 at 12.19.13 Screen Shot 2013-05-02 at 12.18.47 Screen Shot 2013-05-02 at 12.18.34 Screen Shot 2013-05-02 at 12.18.16

Showcase Development

We are pressing on now with content for the showcase site. Prime illustrative work has been done by Clare, developing the building and creating a taxi using Adobe Illustrator. Katie has developed some CSS animations for events going on behind the windows and has started laying out the main page of the site. Poli has developed some animated gifs as have I. Linking pages are my responsibility and I have drafted the layout for the About Us page and will use a similar layout for the location and contact us page. I am planning on creating the pages in Rapidweaver and then will hand over the html files for Katie to incorporate into the main site. The binder is in development. I need to develop a more distinctive look for it and augment and expand some of the sections.

Here is an early draft of the building which is the main stage of our site. The neon logo would go in the black space at the top, a helicopter would fly in depositing a man who then appears in the lift and enters the lift. This then appears to go down the building before he exits in a cab. The black spaces will be where neon signs go and the CSS window animations will be incorporate to run on a loop in a staggered set of windows.

Screen Shot 2013-05-02 at 11.48.13

 

I have used Photoshop to create a selection of animated gifs from which the best can be chosen and placed into divs on the building.

Illumina-door_lights_FINAL Illumina-logo-neon-WITH-STARS_FINALBowling lips_neon_sign_110-A06-A neon-cup neon-girlonly-god-forgives-neonposterStar_Neon_Lights_FINAL we're-open-neon