Web Design by Kraggy Krag

“DESIGN IS EASY. ALL YOU DO IS STARE AT THE SCREEN UNTIL DROPS OF BLOOD FORM ON YOUR FOREHEAD.” - MARTY NEUMIER

MIXED SPECIAL At the very start of the BA 3rd year there were meetings about planning our external degree show and people were needed to volunteer for specific roles within the show committee. When the issue of the website arose I agreed to help, as no one else wanted to take the roll and over the summer I had started to create a site for Cut Me Up zine. The illustrator I collaborate with for Cut Me Up zine, iamanoctopus (Erd Yakingun), is also a very skilled web designer. Over the summer before starting the BA, Erd and myself were working on creating a new website for our collaborative project. I knew a bit about making websites but it was only at a basic level, and only ever used it to customise themes on blogs. However working with Erd had introduced me to a higher level of web coding and new resources. Through him I discovered several new techniques but the most influential skills I picked up from him were how to use a javascript called jQuery, and using Wordpress as a platform to build websites. Originally when I had agreed to help with the website I assumed I would just be making suggestions and helping someone else with the coding input as it can be quite tedious. Then I discovered that no one else had come forward for the job, and that the website planning and creation would be solely my responsibilty. So I quickly checked out previous show websites to see the task I had undertaken. They were very large sites, the best ones included a gallery and blog together, and some were just premium templates.

CAMBERWELL ILLUSTRATION EXTERNAL DEGREE SHOW 2012

I was determined not to just buy a premium template as I saw this as a waste of the show funds, it wouldnâ&#x20AC;&#x2122;t be personal to the show and a lot of time would still be needed to alter it. In order to create a new website I needed time to learn how to use Wordpress and generally improve my web design skills. So in the meantime it was decided a holding site should be made giving people any information about the show that we had finalised. To create a simple design I teamed up with Dan Clarke who was on the design group, but also a close friend of mine. We have worked on projects together before and have a similar taste in design work.

With a Twitter Feed and Emailing List sign up form embedded on the holding sight, people were able to keep up to date with any news we had about the show. There was also an information and contact pop up that used jQuery to appear. At the time not much was confirmed for the show so that was about all the content we could put up. In the meantime I was practicing creating site features and learning how to use PHP. Every so often I also had meetings with the design team to show them new features I had learnt, go through ideas and create basic templates of how the final website could look.

To help me learn about creating a website that ran a blog and galleries I worked through several jQuery, PHP, Wordpress and general HTML & CSS tutorials online. I found that the answer to most of my problems was normally answered in walkthroughs or forums such as Stackflow. These sites had people posting their coding problems and then the online community would try to solve them, for free. All of the coding was open source and people very willing to share their scripts. To build the basic blog layout I studied a very simple wordpress template from â&#x20AC;&#x2DC;wpshowerâ&#x20AC;&#x2122; that was basic enough for me to use as a skeleton and start working from. We had made rough sketches of the site elements we wanted to include, such as slideshows and menus. So I started trying to drop these in but leave the colours and sizes editable for when we finalized an identity for the show.

As developments were made to the show design I had to update these to the holding site. A new logo was added with the correct kerning, the show dates and location were confirmed and the colours had changed to match the teal and burgundy risographs that Ditto Press were printing for us. For the press packs we were sending out many people had created designs to be on the reverse as a poster. Because there were was not a lot of visual content on the holding site before, I suggested that we upload the press pack designs as examples of illustrations from the course. This would then give any possible sponsors an idea of what we had to offer and would allow everyoneâ&#x20AC;&#x2122;s designs, even if they werenâ&#x20AC;&#x2122;t selected to be printed, to still be seen. To create a viewing gallery for the poster images I decided to use a javascript plug-in called LightBox. This allows you to click on an image to view it full screen and dim the background. Dan and I decided it would be nice to have thumbnails of each image, and then once clicked on, you could view the whole gallery. This meant it was easy to update with new posters. We also created custom navigation buttons using the identity colours.

One of the updated features on the second version of the holding site was the web font. The catalogue designers had decided to use a font called Nobel, and so I looked into putting this on the site too. This could have cost a lot to be able to do, but after investing some more time into web font tutorials I discovered that there was a way to do it through the CSS and creating specific file formats. Other than this the holding site coding was relatively simple, unlike the blog. The blog would use a lot of scripts and PHP to keep it clean. From a design point of view it made sense to be using a grid too, so sketches of the layout were also made.

One of the most important features of the website is the way in which we display each artist’s work. It was always planned so that each person would have their own gallery of images, but how to design and display this was part of my job, as well as coding it. To find a suitable way of doing the galleries, I looked at how some of the more successful websites had managed it. The best examples came from websites that had single pages with multiple images to flick through, such as online shops or other exhibition sites. I chose a few different sites as my main influences, such as the Just Us collective website, It’s Nice That blog and Peepshow’s Museum project. I was familiar with creating basic slideshows using a jQuery plug-in called Cycle, but never one that had a navigation or caption feature. I started by sketching out the possible design the slideshow page could take and the dimensions that would suite single page viewing. I knew the press packs were using the shapes in the logo, so I wanted to carry this feature into my navigation designs. When creating the gallery I had to refer to tutorials and set up test documents in Dreamweaver so I could keep experimenting with creating the separate elements and positioning them.

After numerous failed attempts I started to become aware of the mistakes I was making in coding. Eventually I would create a pretty solid element that worked when placed in the rough site I was creating. The next task was to figure out a fairly quick way of making these pages for about 60 people without writing each one out individually. The way I did this was to set all the gallery pages to a custom template I had made, and then have them as posts. This way you could browse to the next and previous exhibitor and I could drop in some HTML for each post by simply changing the root names. It still took a long time but was fairly easy.

One of the biggest tasks that Dan and I had design wise, was creating the exhibitors navigation page. We looked at how previous exhibitions had managed this and the results were often similar, either a grid of names with rollover effects (such as the CSM Work In Progress show) or thumbnails for each person (like the Just Us Collective). The challenge for us was having to deal with a much larger amount of people, around 60. The Tshirt Store website had managed to have a large amount of links and still keep it interesting by breaking up the sizes of the thumbnails. The problem for us was that this wouldnt really be fair to the rest of the year group if only a select few had larger thumbnails. In the end we decided that thumbnails were the right choice, seeing as we are an illustration course it would be good to have as examples of work where we can. After trying a few different shapes and spacings we chose the diamond element as a larger box for the press pack images. Unfortunately for us our number of exhibitors suddenly went up from 62 to 63 which upset our perfect grid, so we had to split the box to allow for a new link.

Creating the thumbnails and the rollover images for everyone was a long task and we had to write actions in Photoshop to speed up the process. For each person we needed 2 images; the background name and the chosen thumbnail of work. We created these in black and white to begin with as each person needed alternating colours assigned to them, and in case there were any more changes to the amount of people it wouldnâ&#x20AC;&#x2122;t be too hard to change in the thumbnails. We actually went through several versions of the thumbnails and changed them last minute on the day of the launch. Screening the colours in Photoshop and writing actions meant I could alter these fairly quickly to upload via Filezilla. As an extra touch I decided to add a fade rollover effect rather than a static switch since jQuery was running on the site anyway. The exhibitors navigation is an example of a very obvious design alteration, but some of the smaller ones still took a long time to get correct. For example the left side bar with the twitter update style went through many different colour and size combinations before we settled for one that worked with the rest of the site. Sometimes these small changes are what can determine a sites overall feel.

Notes I shared with the design team so they could think about elements that needed making for our next meeting.

From the start I had always planned to have a ‘sliding div’ at the top of the page. When I first showed it to the committee they were all impressed at the concept of it. So rather than just have static information there, I decided to make a fully functional custom Google Map. To do this I had to learn how to alter Google’s script and then iframe it from my own site.

Throughout the creation of the Mixed Special site I was constantly taking note of any websites that I felt had particularly good design, and interesting features or new interactive scripts that I could then use. These are all listed on my blog â&#x20AC;&#x2DC;SilverPocketsâ&#x20AC;&#x2122; or are included in the web based research book. One of the smaller features we added to the site was a slight texture. I thought that since our press packs were all being risographed it might be nice to add a slight riso tone to the site. I asked Grace to send me some blank scans of the texture and then made a repeating pattern that could then be placed in the backgrounds. Some of the hardest coding was still not finished at this point. Working with the blog coding was particularly hard. To understand this I had to refer to the Wordpress help centre and view source coding of other sites.

I decided it would be a nice feature to have a ‘News’ section on the front, but also an open ‘Blog’ on its own page. In order to do this I had to figure out how to keep the summarised section on the home page and create an expanded version on a stand alone page. In order to do this I found the script for a regular blog layout and placed it in a paged that I then made linked as a template. It was confusing to say the least but works. All that was left to do to complete this task was get rid of the navigation numbers on the home page, replacing them with a link to the blog, and then applying the same stylesheet to the new open ‘Blog’ template I had created. To keep the site tidy I had to create a new pagination style which used the shapes from the logo, hid certain categories, and set the thumbnail sizes to prevent stretched images. The site was almost ready; most of the backend coding work was done and we could start uploading people’s work and blog posts. The front-end design still needed a tidy up, it felt too busy. Taking inspiration from sites like ‘Form Us With Love’ I went through the side bar images and menu changing them to create more white space. A site with so much information was very hard to layout evenly.

During the production of the website many files had to be used by myself and the rest of the design team. In order to keep up to date with any changes someone made we set up a shared Dropbox folder, that auto updated whenever new files were added. It was particularly useful when doing long tasks like resizing everyoneâ&#x20AC;&#x2122;s images or putting their biography in a post. One of the areas it was useful for was creating the sponsors logos. For each logo we needed a black and white version to keep in line with our colour palette, which wasnâ&#x20AC;&#x2122;t always provided.

Although in this book the majority of the images have been of the sites visual design, and I did spend a great amount of time creating that, the majority of my time was spent looking at coding like this. From the “back-end”, as it’s known, is how the site is put together and runs. Here is where the separate HTML, CSS and Javascript documents can be edited. I used Dreamweaver the majority of the time to edit when I was running a Localhost. But once it was live everything had to be relinked through Wordpress. I tried to keep it as tidy as possible so that eventually it could become a design I adapt for a different project.

I know that at the start of this journey I would have just not understood it at all.

OUTCOME & EVALUATION

Working on this project has definitely added to my skills. When I first volunteered to be a part of the committee and help with the website, I never imagined that I would be building a website on this scale by myself. However I wasn’t really alone in creating this, Erd Yakingun from cut me up zine had helped introduce me to so many features that I used in the final site. Dan Clarke and Josh Checkley helped with the smaller design elements and a lot of the tedious tasks of copying and pasting code. Dan in particular was the person I worked with most on this project and he was constantly a good person to bounce ideas off of or give constructive feedback to the possibilities I presented. Building the website had undeniably improved my coding and web design capabilities. At the start of the project I was at a very basic level, and didn’t understand what making the site would entail. When I look at some of the coding and design I have produced now,

Apart from improving my understanding of web design, Dreamweaver and Wordpress software, this project has also taught me about working in a team of creative people. The meetings we held as the show committee were very informative. It was nice to be able to make suggestions, present ideas to the group and have feedback or advice from fellow designers and illustrators. Outside of the show committee, working with Dan and Josh also reminded me how much I prefer working in the company of other artists. Myself and Dan often joked about how we should set up a studio or business creating site like this for people for money, and although we were joking, something along those lines is a real possibility. I have often said that I wanted to work with others either as a collective or run a shop / studio as a side project. After creating the Mixed Special site, I think I now have the ability to set up an online gallery and shop for a loose ‘collective’ that I may set up after university. This project also made me realise that i do not want to solely do web design or coding as a career. I was craving image making after a long session of site building and found the experience pretty hard to stick by at times. There is a very high level of frustration when things don’t work and you have no idea why. This is experienced mostly at the end with cross browser testing, which I have now fixed, and set up a mobile option.