Archives for May 2018

29th May 2018 - No Comments!

Accidentally designing a typeface.

 

typeface image

Designing a typeface by accident??

So. Have you ever started creating a bespoke wordmark... and before you know it you've created the good part of a typeface?

Well, I was working on a branding project where the client wanted to see 2 different concepts, and before I knew it 'Concept 1' started to look like a typography project!

typeface image

Concept stage.

Depending on the style of wordmark, and what letters the word contains it can get quite easy to design individual letters from eachother.

For example, if you make an 'I' you can start to make a 'T', or part of a 'H' from one-another. Create an 'E' and you practically have an 'F' – that sort of thing!

So before I knew it, I had the start of a pretty sick typeface.

typeface image

So, in context it didn't look too bad. I mean... it wasn't perfect, but it had the makings of a potentially nice visual identity!

typeface image

So the client thought it was shit!

Yeah ok, so the client didn't like this concept in the end. But it was worth the experimentation and time, for the start of a typeface alone.

typeface image typeface image typeface image

How did the branding look in the end?

Well, for those interested in which direction the branding went in, follow this link to the full project! Worthington's Project.

Whats next?

Finish it off!

What a lot of designers do, including myself is make a typeface in Adobe Illustrator, then import it into a piece of software specific for making a typeface. This could pose a few issues, like having to redraw/tweak designs... This sounds a lot of work!

There are easier ways these days to make your own typeface, straight from an illustrator file. Some examples basically work on a drag-and-drop system! We all love the sound of that right.

Fontself is great example of this!

I've never actually used Fontself myself yet. If any of you folk have, let me know how it was, either in the comments section below, or via email!

Below you'll also see a few examples of how I see the typeface being used! Again, if you have any comments, make them below! 🙂

typeface image
typeface image

29th May 2018 - No Comments!

Creating web buttons that don’t suck.

Web Buttons!

Firstly, I should probably just mention... this isn't a tutorial! But - If you'd like to see one just leave a comment below and I could probably, possibly, maybe make that happen?!

I just wanted to make some creative examples of how I jazz-up a few web buttons.

Firstly, I guess you'd need to know a little about code to probably understand the construction of the following examples! But, for those who don't understand - don't stress! I stressed and once looked at a simple hover-state like it must take as much code to make that button, as it did to send a shuttle into space!!

Trust me, it doesn't!

Lucky for you guys who want to see the code I wrote to make these examples... there's a link to my Codepen profile at the bottom of the post! Look, copy, add, make love, adjust or steal to your hearts content 🙂

Blog image

Adding ease with SCSS.

Once you have your HTML markup for your button - add some CSS jazz using 'ease'! Ease can be used in a variety of ways... best way to see which setting looks best is to experiment with them all.

Here's a pretty tasty example of the different kind of ease you can apply. Click this. Wish I'd of found this link months ago!

Blog image

Create a mood.

Cool as f*ck! We have our transitions. Looks pretty sick right?

Your button may require a little extra spice though??

Lets create a 'mood'! In the example above I just made something that reflected my mood at the time. (It was a great night before - but hangovers suck right!!)

Your website probably doesn't need to look like it's recovering from a hangover... but that would probably explain some of the sites I've seen in the past!??

Anyway, I guess its about context. What the design of the site is like? Placement of the button? Functionality?

Create a 'mood' that compliments those things.

Blog image

Surprise!!

I get bored of using websites sometimes! The same user interactions, the same predictable functions.

So add something a little different! Create surprise. Make the user take a second to appreciate the design (or button in this example). In my opinion, those people who need to 'get there' as fast as possible, with the least amount of distractions, just need to slow the hell down!! So much time, love and attention goes into what we do, it's a shame to think they get over-looked sometimes.

Anyway, enough rambling! Find the link to my Codepen profile below to see how I made these buttons.

 

Link Link Link
Codepen

Don't forget to see examples in my project work
View work