Brand Identity Designer Mark McCorkell » Portfolio

The Tweet Moods aggregator

Mark McCorkell — Sun, 30 May 2010 12:55:13 +0000

Recently I had this idea for a little pet project – to create a tweet aggregator site with a novelty theme. One of my main motivations for wanting to build this site was to have a chance to experiment with some CSS3 sorcery. When you make a website for yourself you have more freedom to be bold and experiment further than you would on a website for someone else.

Tweet Moods was built with the Monitter framework – a jQuery aggregator that pulls in tweets from the twitter API using JSON. On it’s own the framework isn’t anything exciting, but that gave me an idea to take it and see what could be done with it to make it more interesting.

Why Tweet Moods? A lot of people tweet their moods on a given day of the week, and there are the obvious trends of happy tweets on Fridays, and depressed tweets on Mondays. I thought it would be interesting to have a site that would let me see what people are saying. Once someone mentions a day of the week and the word “mood” then their tweet will appear in the tweet feed for that day.

For the look and feel of the site I wanted to apply some colour theory to my pages – associating different colours with the moods and days of the week. The most obvious one being the Monday blues. As you move through the week days the colours change, getting more vibrant towards the happier end of the week. And once we hit Friday it’s red “danger” time for the weekend.

The typeface used throughout the site is the stunning Franchise Bold from Derek Weathersbee. “Franchise is a powerful new display typeface meant to communicate your message quickly and with power.”

If you are a type lover, then you will love Franchise bold. And best of all… it is totally free, which meant that I could use this to embedd in the website using the CSS @font-face property. The typeface is in .ttf format by default, but I converted it to a .eot format to serve to IE users. Web font embedding is the way forward.

When you view the site in Chrome or Safari you will see the lovely CSS3 transitions in the site, but if you view it in Firefox you will see some of the CSS3 features, but not all. And if you stroll onto the website in IE then you will see the lovely Franchise Bold typeface, and some of the site loveliness, but none of the fancy interaction features. Afterall, it is an experiment and aimed to target the best browsers using the best current technologies.

A few code samples…

Some CSS code to do the left menu transitions:

	text-shadow: 0px 0px 10px #FFF;

	-o-transform:rotate(6deg);

	-webkit-transform:rotate(6deg);

And to do the sleek colour fade in-out on the links:

a  {

	-webkit-transition-duration: .33s;

	-webkit-transition-property: color, background, text-shadow;

	-moz-transition-duration: .33s;

	-moz-transition-property: color, background, text-shadow;

	transition-duration: .33s;

	transition-property: color, background, text-shadow;

}

a:hover {

	-webkit-transition-timing-function: ease-out;

}

Smooth internal page scroll to hashlinks:

jQuery(function( $ ){

	$.localScroll({

		duration:900,

		hash:true,

	});

});

The feedback has generally been really good, and I haven’t really got any negative responses about the site bar a few people commenting on my use of the CSS3 effects. But the whole point of the site was to test how far I could push it visually, and to test the limits of the browsers with these new technologies.

I did actually push it too far at one stage and Chrome and Safari couldn’t handle some of the CSS3 div rotate transitions when using a fixed position so I had to adjust a few things before launching. So I certainly learned a few things along the way, and had some fun while I was at it. So in that sense, I guess it’s a mission accomplished.

VISIT TWEET MOODS

What are your thoughts on the site? Have you played about with any CSS3 transitions yet?

New website launched

New website launched

Mark McCorkell — Sun, 25 Apr 2010 17:58:34 +0000

This has been a long time coming! I have been planning to re-design my website for months (since the start of the new year). But, being so busy it is hard to do everything, and especially hard to find time to work on your own website. In general, there wasn’t anything wrong with my previous site… but being the extreme perfectionist that I am, I was never really happy with it. I wanted to design something that better reflected who I am as a Designer.

I needed to go back to my minimalist roots – where I was always most comfortable.

Over time, my previous site started to get a bit cluttered – my own fault really. But the more things I discovered about WordPress, the more things I wanted to include in my site – big mistake. One major concern of mine was that the non-web savvy visitors may not fully appreciate the new minimal design. But then I asked myself… do I care if they don’t? And in short, my answer was no.

The goal of this re-design was for me to develop something minimalist, technically solid, and beautiful to give my blog readers a much better experience on the site.

Not everybody views source code, but I know there are a lot of people that visit my site that do. I am a Designer that can code, but in my last site the markup was starting to get untidy. But now, under the hood the code is valid, and as pretty as possible. I spent a lot of time handcrafting this site. If you take your time to explore the design you will find the little bits of jQuery and CSS3 loveliness that make the user experience that little bit better.

If you are viewing this site in Chrome or Safari you will be seeing the loveliness of the CSS3 transitions on the navigation in the header and footer. And if you are viewing this site in Firefox, you will see most of the CSS3 loveliness including rounded corners, but not the CSS3 transitions. But… if you are unfortunate enough to be viewing this site in Internet Explorer, you will be seeing things a little less refined, but it will work nonetheless. I’m all about progressive enhancement – my sites will always work in all browsers, but the better browsers will show the fancy interface enhancements.

I love typography. And I spent a lot of time working on the site typography getting it just right. On any website, the typography is one of the key things that can have a real impact on the way the users perceive your site (even though they may not be conscious of it). I’m using Typekit to serve up the gorgeous heading fonts, which are Proxima Nova, and Gesta (for navigation).

I could probably write all evening about this (I may blog about this again and go into more detail about the technical side of things), but I wanted to keep it short and sweet – I have about another 10 blog posts in the pipeline to write, so I wanted to just get this one out there!

I know I’m a lot happier with it, but what are your thoughts?

Designer Vs Client Typographic Poster Designs

Mark McCorkell — Mon, 08 Feb 2010 17:48:02 +0000

Following on from my previous article, these typographic posters were inspired by the Designer-Client relationship. These posters are motivational based (well, except the first one), as opposed to my previous designs that had undertones of sarcasm.

I think that every Designer has some responsibility to educate clients. If you have spent years learning a profession, then be assertive, and if you are asked to do something that you know is wrong… then take the time to teach the client about the right way. If they don’t go for it (which often happens)… then at least you still done your job right.

Enjoy the posters, and as always… feedback welcome!

Web Inspired Typographic Poster Designs

Mark McCorkell — Mon, 01 Feb 2010 17:45:49 +0000

When an artist has something to say… they paint, and similarly, when a writer has something to say… they write. So I figured I’d design some funky typographic posters based around current inspirations and hot topics on the web that are relevant to me and what I’m doing at the moment. These designs were inspired Sam Brown’s blog articles.

New Year… New Logo

Mark McCorkell — Tue, 19 Jan 2010 16:51:58 +0000

With the arrival of the new year, I thought it was time to give my blog a fresh look, and more importantly… a fresh logo. My new logo was the final result of about a week of work. I know… I probably should have spent the remainder of my Christmas holidays eating left over Turkey, and chocolate, but I wanted to do something productive with my time.

I was never totally happy with my last logo, because “Mark McCorkell Design” was in many ways a bit ambiguous! What type of design did I do? It was probably clear enough that I was a designer, but the logo didn’t say much about what type of designer I was. This new logo – I can say with absolute certainty that I am happy with it, and it does say on a few different levels, exactly what I want it to say, visually and typographically.

Once the new logo was established, I decided to re-work my blog header and take things back a lot more minimal, which is what I had initially intended for this blog. The phrase “less is more” was always something on the tip of my tongue, so I thought I’d drop that in there to bring some character to the negative white space on the top right.

I used 3 beautiful fonts for my logo. The “mark” bit uses BaronLightDB, the “mccorkell” part of my name uses Aeroportal, and the title line below uses Quicksand. When I was working on the logotype I discovered elements of each of the fonts that I liked, so the best solution was to combine them together, which turned out to be exactly what I wanted. Never be scared to mix it up – if you like different elements of different fonts then try them out together… experimentation is key to lot of great designs.

I welcome all feedback on the logo, so don’t be shy… if you read this drop me a comment below!

Typographic Helvetica Posters

Mark McCorkell — Sun, 16 Aug 2009 18:34:39 +0000

Not so many moons ago I was once a student, and in my final year there was a class project set to design posters celebrating 50 years of the Helvetica typeface. Well, at the time I chose to do the other project, which was logo design, but… I always wanted to have a go at the Helvetica one. I decided to have a go at this for fun, and just as an exercise in creativity!

I had a few different ideas and concepts, some typographic, some experimental with lots of color, ink splashes and randomness, and even a t-shirt design one! My posters were all based around the theme of “1957″, the year the font was created. You will see a famous Rock Star in one of the posters below… this was a play on the theme of defining moments of 1957, and in this case I chose to use Elvis buying Graceland.

So, here before you now are “the posters that never were”, so to speak.

These can also be viewed on my Graphic Portfolio. And don’t by shy, if you like any of my work, or want to just say hello, you can always drop me an email.

Logo design and Flyer Artwork for Three

Mark McCorkell — Sat, 18 Jul 2009 15:33:51 +0000

Three is Derry City’s newest club night. I was asked to design a logo and flyer artwork to promote the launch of the new club. Have a nosy, and don’t be shy… it’s ok to leave comments!

NEW Visual Identity for moi

Mark McCorkell — Sat, 18 Apr 2009 09:06:56 +0000

I see a visual identity, or logo as something that needs to be re-developed ongoing, it is not something that is done once, set in stone and never touched again! It has been about a year since I designed my previous logo, and it was indeed time for a change. The first image below is my previous logo, and until recently I was quite happy with it. I got a bit bored with it, and as my blog is starting to evolve I felt that my identity should too. I was also starting to think that the “markmccorkelldesign” type was a bit long for a logo. But… maybe that was just me trying to give myself a reason to re-design it?

I wanted to design an identity that better represented the style of design I like now, and one that took a bit more interpretation that being just bang, right on front of you as “markmccorkelldesign”! The new identity is “mdm design”, which is my initials (Mark David McCorkell) and if you’re clever enough to work it out… it is also a simple anagram of “mark mccorkell design”, so it can read two ways.

I like to leave some things open to interpretation, so this is as far as I will delve into the thought process behind my visual identity. Clearly, there are reasons why I use Black and Magenta (that’s right, it’s not Pink, it’s Magenta) as my colours – but perhaps you, the readers may care to have a guess what I’m trying to convey with the colours and the paint splash?

The Audiotherapist at Jika Jika Poster design

Mark McCorkell — Sat, 28 Feb 2009 08:13:09 +0000

As always, I like to give clients some options when I’m producing designs. Below are two poster designs I did for Jika Jika recently (also designed the Jika Jika logo many moons ago).

Padraig Ó Mianáin CD Artwork and Photography

Mark McCorkell — Tue, 24 Feb 2009 16:33:14 +0000

Surprisingly, I’m only getting around to putting online some of my Final Year design work, well, my Major Project in particular. For my Major Project I undertook a project for the University of Ulster to design a CD Cover and booklet for Padraig Ó Mianáin, a traditional irish music composer. The CD was released in July 2008. I had full creative control and layed out the art direction for the project, and with the assistance of Barry McGilloway, we got some pretty cool photos taken for the CD booklet.

I would not consider myself to be a U2 fan by any standards, but I am a fan of the photography style on their Rattle and Hum album (1988). This album was the inspiration for the art direction of my Major Project. The photography style played a lot on the lighting and the artist created very high-contrast black and white photos, which i think looked stunning and worked well for their album mood and style.

Press release article from University of Ulster: http://news.ulster.ac.uk/releases/2008/3922.html