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)

Getting started, part one

I thought I’d split this post into two parts, one to look at the technical aspects of making the site, and another to list some things I want to think about tonally and visually. I started doodling some logos and looking at typefaces today, but really only at a glance, so I’m going to take a step back and look at the whole project first.

What’s this all about then?

So, I’ve decided to make a site for my own work! It seems daft, but it’s something I’ve not really done before. I’ve had blogs (and blogged on other sites), Facebook pages, Vimeo pages and I’m on twitter a lot, but I’ve never made my own portfolio site. Developing themes for sites at work has spurred me on to make my own, partly because I think it would be a good idea to have a single starting point to present my work, but also because it is a good space to experiment and try new technical and design ideas. That’s why I’ve chosen to start like this, so the process isn’t simply about an end point, and the end point is just a marker to move develop onwards from.

Theming

I’ve decided to start with the basic Twenty Eleven theme that comes ready installed with WordPress. From there, I’ll develop a child theme until eventually I separate it from the original. There are a lot of starter themes available for WordPress, but I think Twenty Eleven is as good a place to start as any. It already has some ready made widget areas made, and built in parameters like the header, so I can use them to build upon. In the theme I am making at work, I have made new widget areas, and widgets, editor shortcodes and buttons and custom galleries using functions php. I’ll introduce some of those techniques here, and document them.

The advantage of using a starter theme makes it simple to work in the browser – even if I am focusing on a particular element of the template, the parent theme will always be delivering content to preview on screen. The category and custom post templates mean I can push ideas around before replacing them with my own, and can even try a number of different post templates within the main theme.

Other things!

There are some other frameworks I’ll be using for my own template design, which include a nice responsive templating framework called Skeleton (www.getskeleton.com). It provides a good starting point, with nicely coded core elements, resets and media queries. I really like the page turning feature in Flipboard, so I’m going to look at introducing some of the functionality into the gallery areas of the site (perhaps for touch devices only). I also want to  use this process as a way to experiment more with LESS and/or SASS/Compass.

Finally, I want to play with the data in the site to make dynamic visualisations, based on visits, keywords, images etc., and output it to screen or cool toys like Arduino.

 

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