Featured

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Hi, thanks for visiting my site. I am a web designer and developer based in Nottingham, UK. I work at the National Space Centre in Leicester, as part of NSC Creative, and I also make my own projects for clients or for myself. You can read more about my work over at the ‘Sample Page‘.

I decided to make a new website to show off some of my work, and to start blogging some tutorials, mainly about projects I’ve made with Google Maps, and some other things too like Zoetropes.

Hang on a mo, this is just another WordPress site!

It’s just the ready loaded template, with the sample page and blog post edited a bit. It’s even got the comment from Mr. WordPress on it!

I know, but there’s a reason for that!

At work, we’ve been working on a multisite project with a client, and we are using WordPress, for ease of creating a network of sites and ‘broadcasting’ pages from a main site to the sub-sites (I’ll blog about it down the line). I’ve been making themes and templates for the sites, and wanted to bring some of that into this new site.

I decided it would be interesting to build the site live, and to blog the process as I go, from site-mapping and UI, to content development, branding and imagery. I love looking at beautifully made websites, but I sometimes want to see the working out, the paths taken and not taken. So, this is deliberately a work in progress, and will develop as I make changes. I’ve launched it from almost the point it is installed, so that new design, content and structure are visible, to hopefully shine a light on the process of making the finished site. Eventually, the site will have its own theme, alongside my own content.

I’ll keep the blog posts up once the site is live, and continue to document changes, new things and ideas. Hopefully some of the posts will be useful as tutorials, or just as ways to get some info about the process.

Thanks for visiting,

Gareth x

Making Mayhem!

I’ve been away from the blog for a few days, but desperate to write about the work I’ve been doing on the new Mayhem Festival site!

I’ve used the site as a way to test my adaptation of the skeleton theme for responsive devices, which was pretty nerve-wracking as we needed to get the site and the programme out.

It actually turned out really well, and I’ve learned a lot about responsive images and video and about structuring pages for fully responsive design. I spent a lot of time making custom wordpress category layouts and page layouts, and created a switch between a horizontal menu and mobile menu.

Below are some views from the site on desktop, tablet portrait and phone.

Desktop:

Mayhem Site

Mayhem Site

Mayhem Site

Tablet Portrait: In this version, the right hand sidebar moves under the content, allowing the film page to be the full width of the screen. The ads in the sidebar are made to be 50% of the screen width, otherwise the images are massive and blown up beyond their original pixel size.

Mayhem Site

Mayhem Site

Mayhem Site

Phone Portrait: Site is reduced to a single column. The three column block in the desktop and tablet version are now single column and full width, and the horizontal menu is switched to a drop down version. The images are quite big, but are easy to scroll through, as I was trying to avoid the need to zoom the screen.

Mayhem Site

Mayhem Site

Mayhem Site

Let me know what you think, and if you have any problems with the site (I used a jQuery plugin for a bit which crashed IE instantly!).

I’m really pleased with it, and excited about the festival! Please do check out the site, and more importantly come along!

In other news, I’ve been trying out Balsamiq Mockups to quickly layout page designs at work. It uses doodly, sketchy objects to make clear that the layouts are not finished design, just rough working out of key page placements and elements. It’s great to use, and really useful. I love the scribbly feel!

ATTP

Responsive Design Experiments 2

I’ve been working some more on the responsive template I’m building. I’ve introduced a menu switch with a bit of JQuery to make a drop down menu replace the main horizontal one for viewing in mobile devices. I’ve also added image styles for the sidebar and in content blocks. I’m ready now to make it into a child template of Twenty Eleven, and begin to integrate it with wordpress content and categories. Have a look here. If you want to see the styles change, drag the bottom right corner of your browser around to see the switching between states.

Screengrab of Responsive 1.1

I’ll be installing a few plugins, including one to enable contextual displaying of menus and widgets, and this responsive slider http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380. I like the facility to overlay video and text on an image, and I think it will be a good way to present video content.

I’m going to install the new test template in a sub folder of here, and will post the url as soon as it works!

A brief history of dressing up!

We’ve been doing a photo shoot for Mayhem Festival today, the horror and cult film and television festival I co-direct with Steven Sheil and Chris Cooke.

This year’s festival will be our fifth full weekend. I’m going to be working  a lot on the website for this year’s festival this week, and getting the brochure ready for print. The website and full programme will be live next weekend, with the print following soon after. Each year, we have had a new site for the festival, but this year, I will be making the site bigger to support an archive of previous festivals and guests.

Since 2009, we’ve made a different visual theme every year, featuring the three of us as sinister characters. We’ve been zombies, Lovecraftian monster hunters and creatures from fevered dreamscapes. Here are some of our previous incarnations;

Mayhem Flyer 2009

Mayhem 2009: We Only Come Out at Night

Mayhem Flyer 2010

Mayhem 2010: At the Mountains of Madness

Mayhem Flyer 2011

Mayhem 2011: Where The Weird Things Are. I’m the owl in this one.
Gareth ‘Owl’, geddit? Ahem.

And what for this year? Well, that would be telling! But here’s a clue;

Hands of Blue

Two by two, hands of blue…

Responsive Design Experiments 1

I’ve been playing with creating responsive layouts for my template. I want to ensure that my theme is available and adaptable across a range of devices, and to ensure that it is flexible enough to cope with different device resolutions, now and in the future. I like the skeleton framework, which uses media queries to adapt to four sizes – 960px wide (desktop), 768px wide (tablet portrait), 480px wide (phone landscape), and  320px wide (phone portrait). It uses fixed widths, with the pages being delivered to output based on device detection.

I decided to adapt the  template to a percentage based fluid layout, with a maximum 960px width layout. I’m still sticking to the four key layouts, but with percentage spacing between. This ensures that I can define specific ‘looks’ to the four states, but am able to cope with non-standard resolutions. I’ve made a start on the adaptations, defining the columns (skeleton uses a 16 column grid) and gutters as percentages, and typography as ems rather than pixels. The next step is to work into images, making auto resizing images, and looking at how to code a swap, so WordPress loads resolution-sized images, to reduce filesize on mobile devices.

Below are the wireframes for the device states, and you can see it in action here (if you drag the bottom right corner of your browser and manually resize it, you’ll see the layout change). These aren’t the finished layouts, but demonstrate the principle;

Desktop
Desktop/Tablet Landscape
Tablet Portrait
Tablet Portrait
Phone Landscape
Phone Landscape
Phone Portrait
Phone Portrait

Clearly, it is very unpretty at the moment, but it does give me an opportunity to test that fluid resizing is happening, and that my breakpoints are happening where I want them to. I can confidently start to layout pages, and begin to look at responsive layouts for specific post types, such as video pages and image galleries. w00t!

Meet the 2.0s

During my time working at the National Space Centre, I’ve been developing these little characters to accompany pages and events.

The 2.0s (two point ohs) were created by NSC Creative, as the stars of their award winning full-dome film ‘We Are Astronomers’. The 2.0s are mini, orange versions of us, intrepidly scanning the skies for distant galaxies and undiscovered planets, in a never ending search for the origins of the Universe. Their newest adventure sees them embarking on a search for intelligent life, in their forthcoming film ‘We Are Aliens’.

Before I arrived at the National Space Centre, they had developed a 2.0 character called ‘Brock Anchorson’ as part of the interactive Weather Pod exhibit, as a news anchor introducing weather reports presented by visitors. When we redeveloped the site for the National Space Centre, they were keen to use the characters across the site, and so we started to work with the 2.0s to become site guides, asides and to accompany pages.

I’ve really enjoyed making the illustrations. I’ve enjoyed adapting them to different aspects of space culture, history and geek culture. I’ve mixed flat 2D vector graphics with the 3D models of the 2.0s, and textured and shaded them in Photoshop.  One of the concerns the Space Centre had with the initial brief is the worry that the 2.0s are too childish, and would alienate adult visitors. I hope instead that they have a more contemporary illustration feel, and will appeal to adults as well (To be honest, I don’t really get the doodles for kids vs. doodles for grown ups thing!).

Here are some of the 2.0s in various states of fancy dress. You can also find a lot more over on the National Space Centre website.

Iron Man

May the Fourth

All star

Batgirl

Mary Poppins

a thousand (fifteen) tiny fonts

Some experiments with different fonts. I’ve been playing with more delicate fonts, and serif fonts, and the idea of using a single letter for icons and favicons. I really like the second one, but I’m not sure how it will hold up with the spotty background. I also like number five, the curly single ‘t’ works really nicely. I’m going to work into these six, adding spots to see which works best. What I’m trying to find is a font which feels ‘natural’ and can sit well with the sketchy illustration ideas I’m keen to develop, but to not use a strictly comic or hand drawn font.


Here are a selection of some other fonts I tried too. Some of them are effective, but similar to the others. I like the fourth one in this set, but the single letter/icon looks like a crucifix! Let me know what you think!

National Space Academy

This is a slight diversion from the site building posts I’ve been focusing on. Today, we (NSC Creative) launched the new website for the National Space Academy, a UK wide network of educators and scientists managed by a team at the National Space Centre.

It’s been a really enjoyable project to work on, as it had to be engaging and inspiring, but with (as the brief said) “no aliens or spaceships”, so it was a challenge to find the right tone and feel. Luckily, some of the space imagery we had available was stunning, and it’s not hard to inspire awe with images like the International Space Station, the satellite imagery of Saudi Arabia, and the Sea Surface Temperature visualisations which appear on the home page. The galaxy logo and title were made by Leicester design agency Motion, who also made the Space Centre logos.

NSA Home

The site also uses a map to locate the educators and scientists. The Academy offer masterclasses in schools and at the National Space Centre, so the map gives an indication of which classes are able to be delivered in your area.

NSA Map

The glowing ‘clusters’ group teachers together enabling the visitor to focus in on areas to reveal more specific data. Each member has their own page, outlining the work they do, and links to projects they are involved in or the school where they are based. I wanted to ensure the profiles added credibility to the site and the project, so these pages mimic University site researcher pages, offering a richer profile of the individual.

I’ve included this particular profile as, when I was reading through the site, I saw the link to the Malcolm Parry Observatory. It is a massive observatory built at a school near Nottingham! I was amazed, and wished my school had had something as cool as that. Check it out at http://mpole2011.wordpress.com/. If we’d have had that at school, I’d be a boffin by now!

tiny

I started playing around with logo ideas today. I wanted to make something that was easily scalable and worked in black and white and a range of colours. ‘A Thousand Tiny Pieces’ is quite a long title, so I wanted to play with something a bit more abstract.

I decided to take the word ‘tiny’ as the main word, and surround it with loads (not quite a thousand!) tiny circles, so the word is visible in the negative space. I also constrained the pattern in a circle, so it would make a good icon, and would look ace on a badge!

Here it is, in a bunch of of different colour contrasts and on a vintagey sunburst background;

Tiny 1tiny 2

tiny3

tiny 4

It reminds me of colour perception tests, or bubbles, and in the orange and brown version of a giraffe! I’m not totally sure about the font, I think I’d like to try something more delicate, perhaps handwritten, but I think the idea works well. I’m using web fonts for the logo, so I can reuse them in the headers and body of the site. Let me know what you think!

Getting started, part two (music and comics)

I thought I’d start to put down some ideas about things I like and potential styles and inspirations for designing the site. Sorry if this post is a bit wooly, but I wanted to just get some ideas down to start me off.

a thousand tiny pieces

I got the name for my site from the song ‘A Thousand Tiny PIeces’, which I first heard as a cover by the Be Good Tanyas. Aside from being a beautiful song, I think it’s a fitting name for a portfolio or a blog, and I like the idea of a whole being made up of thousands of tiny bits. Here’s the Be Good Tanyas performing the song;

*sigh*, it’s just lovely

The Doodling

I love illustration, and I want it to feature throughout the site. So I’m thinking about types of drawing and sketching and the idea of using sketch fonts of headers and titles. I’m not sure quite how hand-drawn I want the site to be yet, but I think some spot illustrations would be good to illustrate pages and projects. A while ago, I got a nice app called Paper, and did some doodles to try it out, some with fingers and some with an iPad pen, here’s a selection;

Tentheadband

I know they are very doodley, but I like the uneven line and the watercolour brush in the app. I think I may use something like this for page footers, making a doodle for each project to underline the page.

Last summer, I read a great comic book called Baby’s in Black by Arne Bellstorf. It’s the story of the relationship between The Beatles’ original bassist Stu Sutcliffe and Astrid Kirchherr. It’s a lovely, sad book, and the artwork suits it perfectly. I love the sketchy feel, and the charcoal swathes of shading. I think I’d like to do something similar, with a nice fluid and loose style.

I’ve also recently read Gingerbread Girl by Colleen Coover and Paul Tobin, and Anya’s Ghost by Vera Brogsol. Both books are fantastic, and the drawing is great, with a real sense of movement and character. What I like about both books is the shading, using single colours to block midtones. It’s really effective. I’m going to try out accent blocks (maybe different throughout the site?) in the page illustrations.

Gingerbread Girl

I can’t blog about illustration without mentioning these two artists;

Charles M Schulz

I love the Peanuts cartoons, for both their artwork and the characters and stories. I think the animated versions are amazing too, with Bill Melendez’ animation and Vince Guaraldi’s music complementing the stories and characters wonderfully. Recently, I’ve been reading some really early Peanuts comics, and I really like the inky, more fluid style. Here’s the first ever Peanuts strip;

Peanuts

Jaime Hernandez

Jaime Hernandez is one of Los Bros Hernandez, writers/artists of Love and Rockets. I love his stories and characters, and his use of black and white. I think it’s a perfect companion to Peanuts in a weird way. I like the idea that the Peanuts gang might have grown up to be punks, wrestlers and pro-solar mechanics.

Art of Jaime Hernandez

I’ll probably post more of this type of post as I develop the site, and start to try out the designs I want to use, looking more closely at digital design, film and animation. I hope you don’t mind!

(By the way, if you like the look of any of these books, check out (and buy them from)  Page 45, Nottingham’s brilliant independent comic shop)