Note to self: ALWAYS fix your fonts for Chrome

Do you use @font-face declarations to serve your own chosen fonts to users?

If not, then really? The days of having 13 fonts to choose from for your designs have long been over. Go to FontSquirrel.

If yes then cool! It’s awesome there’s so much selection these days what with services like Typekit and Google Fonts. You can use the @font-face property to declare your fonts in a CSS file, which then lets you use them throughout the rest of your CSS. There’s a good way to structure the syntax for @font-face declarations and it goes something like this:

@font-face { 
font-family: 'Graublau Web'; 
src: url('GraublauWeb.eot'); 
src: local('☺︎'),  url("GraublauWeb.woff") format("woff"), 
url("GraublauWeb.otf") format("opentype"), 
url("GraublauWeb.svg#grablau") format("svg"); 
}

There are numerous reasons for this syntax and I won’t explain them here, Paul Irish does it better anyway.

Now you’re done right? Well almost, you can go off and use your chosen fonts if you want, but any users on Windows running Chrome are going to be greeted by horrible jagged fonts when they visit your site.

Image

Had to find this on google images because I’m on a mac, but yeah, it is this bad

This happens because Chrome on Windows will grab the WOFF version and use that, and for some reason it just renders WOFFs really, really badly. Now you can ‘fix’ this by putting the SVG line in your declaration above the WOFF, but then Safari will load both, creating an unnecessary HTTP request. So the best way to sort out this issue, (and technique I’ll be using on pretty much every project going forward), is to add a Chrome specific media query after each declaration to force Chrome to load the SVG font.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
      font-family: ‘MyWebFont’;
      src: url(‘webfont.svg#svgFontName’) format(‘svg’);
  }
}

So there you go, @font-face declarations sorted, looking great in all browsers with the minimal amount of requests. I’ll leave you with a before and after picture now.

:)

Image

Look at that g on the g+ icon!

 

How to use SVGs and not worry about IE

Icomoon web app

 

Scalable Vector Graphics

SVGs are an awesome way to use icons and glyphs on a website. They are what they say they are: scalable vectors.

There are so many cool properties of these files:

  • They look crisp at any size, no matter how much they’ve been stretched.
  • Because the image that shows is not actually an image, it’s made up of maths and words, it also has the advantage of tiny file sizes.
  • You can produce SVGs from your already-made files in Adobe Illustrator!
  • You can edit the fill colour using css, or you can edit the colour from within the SVG file itself using a text editor (svgs are basically xml files).
  • You can edit the actual shape from within the xml!

 

 

The inside of an SVG file

The inside of an SVG file

 

 

So…browser support? Kinda. As usual any version of Internet Explorer below 9 lacks SVG support, as do older Android browsers. So as usual having to cater for users of decrepit browsers means many web developers out there will still be using PNG24 files when they need the transparency. But there’s always a fix!

In this case, the simplest fix I could find is called Modernizr.

 

Modernizr

Modernizr feature detection

 

 

Modernizr is a javascript library that detects the feature capabilities of the browser being used to view a website. You can use it to test for all sorts of things like: CSS 3d and 2d transform ability, HTML5 video and audio support, support for newer properties like box-shadow, and of course SVG support.

 

 

Once you put together your own production version of Modernizr using the checkboxes provided at their website, you simply copy the produced javascript code to a new JS file and call the file within the <head> of your HTML. When you’ve done this, go and have a look at your code in firebug or using chrome’s ‘inspect element’ function. Check out the <html> element at the top and you should see some extra class names. These classes demonstrate what is and isn’t supported by the browser you’re using!

So now that you understand what Modernizr does, you should be starting to see how you can use this to provide fallback support for almost any feature out there. In our case, we’re trying to use SVG files now without ruining the experience for users of older browsers, so we can use these classes to make the browser supply the appropriate file to the appropriate browser.

 

Example

Here’s some code:

 

.svg div.logo {
background:url(../images/logo.svg) no-repeat 0 0;
}

.no-svg div.logo {
background:url(../images/logo.png) no-repeat 0 0;
}

 

That’s a simplified example of what you might do here. Modernizr gives <html> a class of ‘svg’ or ‘no-svg’ based on whether SVG is supported, you can then specify:

if the browser supports SVG, use the SVG version of the logo in the ‘logo’ div, but if the browser doesn’t support SVG, use the PNG version of the logo.

So yeah you still have to provide both file types and store them on your server, but only the necessary file type is called when needed so as not to increase loading times.

 

Once you’ve decided that you can now use SVGs and easily provide fallback PNGs for graceful degradation, go and have a look at the Icomoon web app and rejoice!

Literally thousands of commonly used icons and glyphs at your disposal. It can build a custom icon font for you out of only the icons you choose, it can give you those icons as individual PNGs and/or SVGs, and it can automatically create an SVG sprite for you!

Now you have the ability to use scalable vectors anywhere, without worrying about IE and you’ve also got all the glyphs you’ll ever need in SVG and PNG format. It’s a powerful combination.

 

So there it is. Go ahead and start using scalable vectors today. Remember your last client’s website with the header logo that gets slightly fuzzy when viewed on an iPhone? Open up Illustrator, hit ‘Save as > SVG’ and fix that problem!

 

 

Extra Resources

http://www.hongkiat.com/blog/scalable-vector-graphic/

http://icomoon.io/

http://modernizr.com/docs/

http://css-tricks.com/using-svg/

Mobile MyColorScreen

Once again it’s been a while since I’ve written anything, I think saying to myself that I’m gonna write a post every week or something is just pointless. I’ve decided to call this what it is. It’s a place where I store projects and posts when I feel it’s worthwhile to write something about them. Generally speaking I’ll play around with some design projects in my spare time, usually evenings and/or weekends so it can be quite some time between having an idea and producing the finished result.

Today I’ve got something to write a post about. I want to go into some detail about the design of a concept I’ve been messing around with for the past week or so. The concept is a MyColorScreen app.

MyColorScreen is a website where people can create a profile and showcase their android/ios homescreen designs. It’s got a pretty strong social element to it with people commenting, providing tutorials, ‘loving’ screens to show their admiration of particular designs etc as well as forums (which tbh I rarely actually use). Oh yeah its also made and run by the same people who created Themer, the hugely popular and successful one-click homescreen replacement launcher.

So MyColorScreen built and released Themer as an open beta, and its great fun to use and design for, I totally get why that’s where they’re focusing their efforts at the moment, but I can’t help but feel they’ve missed a trick with MyColorScreen. This awesome social site based entirely around mobile customization is a broken experience when viewed on a mobile device!

OK, Perhaps ‘broken’ is a little strong. You can get to the content, but it’s not fun.

This is what I see when I go to a homescreen page on my Nexus 5:

Mycolorscreen viewed from a mobile device

Mycolorscreen viewed from a mobile device

Needless to say, I never go to MCS if I’m on a mobile.

So for a while I’ve been toying with an idea in my head of an app that can allow users to access the content on the MCS website in a way that’s really enjoyable and that also harnesses the social aspect that’s integral to the experience of the site. It’s still kind of unfinished and not totally polished yet, but I’m going to post it now since it might be a while before I have time to give it the attention it needs.

Layer 1 – Login

First I figured you need login screens, this is the top layer of the app.

 

image of Login screens

Login screens – Click for a nice big super hi-res version!

 

As you can see here, there is the default screen with an anonymous profile icon, input fields for Username and Password, a nice big Login button as well as options for remembering login details and a link for recovering your password. The idea here is that you can choose to remember details for the future, in which case you are presented with your profile image when logging in.

There are some problems that I can see with this layer so far:

  • You’ll only be presented with the second screen after logging out intentionally by hitting ‘Log Out’ in menus. If this is the case, what’s the point of logging out at all?
  • If your phone is stolen you’ll have to change your login details to prevent access via the app.
  • The hamburger menu icon in the action bar seems redundant, I don’t think there would need to be a menu at this point.

Onto the next layer then!

Layer 2 – The Content

This is the juiciest, most important and social part of the app. It’s where you can browse other people’s screens, leave comments and find out more info about your own profile.

 

The Good stuff

The good stuff, you should click on this one to see more detail ;)

 

So this is where it’s all going on.

The middle screen would be the default landing screen after logging in. It’s got tabs for ‘Screen of the day’, ‘Recent’ and ‘Following’ categories. It’s got the screens of the chosen category displayed on a card with a little section at the bottom showing the number of ‘loves’, views and comments, as well as an icon on the right indicating the OS.  There’s also a search icon at the right end of the action bar. One thing I should mention is about the holo blue indicator bar. I did consider using the modern, less abrasive colours that Google have implemented in KitKat, but the blue actually worked really well in terms giving the options some visual emphasis. Basically it helps make it obvious that the options are there.

Main page

Main page

The left screen is the menu that is revealed when the hamburger icon in the action bar is pressed. It gives you the ability to access areas of the MCS site that aren’t accessible via the tabs on the main screen, it’s also where you can get to the app settings and allows you to log out. At the top is a little area that displays your important profile information in a nice succinct way. You can see your profile picture, no. of followers, no. of screens and the number of people you have followed. The background of this area is a texture with teeny tiny grey squares that I found on ‘Subtle Patterns‘ which is an amazing resource if you’re a web designer, can’t recommend it enough. I think if I had an issue with this menu it’s that it’s perhaps a bit ‘over designed’. A simpler solution might work better here.

Menu

Menu

The right screen is the page for individual themes. It displays the same info you get on the image card, as well as a bar showing the designer of the screen, date posted and a button to follow the designer. Underneath this is the comments section. It’s pretty simple, just the pic and name of the commenter and their comment. The action bar on this page displays the themes title.

single page

Single page with comments

 

Layer 3 – The Uploads

The third and final layer I’m really not sure about, but here it is anyway:

The uploads

The uploads

As you can see this part is still more of a wireframe than a finished design. The idea behind it is to allow users to upload new screens to their MCS profile directly through the app, so they can do it without needing to be at home or with a computer.

The left screen is simply where you specify your OS, the middle screen is where you pick your device and upload your images, and the final screen is where you add the information, wallpapers, etc.

The action bar includes an indicator to show what stage of the upload process you are at.

I’m not sure about the idea of uploading new themes from the app. There’s quite a lot of information that you often want to include with a new theme and it might not be ideal to do it from your phone. But then again I suppose it could be an option to just upload from your phone with the minimal amount of required information and add more when you get to a computer.

 

So anyway there it is. This is in no way a dig at the people at MyColorScreen, I love their website and I know they’re (rightfully) hard at work with Themer at the moment.

Hope you like, leave a comment with your thoughts! Any constructive criticism is greatly appreciated, you can also find me on Google+ or Twitter, but I mainly use G+ ;)

 

 

 

 

Do I still need Photoshop?

Made this today using an app for Mac called Sketch (click on it to see it at full size):Chromebook Illustration made with Sketch

I don’t need to use design programs much at work at the moment. The designing that I do starts with drawing layout ideas and ends with developing responsive wireframes. So I spend most of my time using a code editor. However at home it’s generally a different story.

At home I’d rather open up Photoshop and try to make something that looks pretty than open up Brackets and try to build something from code. Perhaps this is because I’m not quite good enough at code yet to realise my ideas without a lot of hard work and time, but I can’t help thinking it’s also just a lot of fun to open up a graphics app and make something just for the hell of it. In fact that’s what I do most nights and it’s pretty much how I’ve learned what little I know about design.

Sketch 2

This product is something I’ve used before. There is a 2 week free trial then you have to buy it to keep using it. It’s only available on OS X. I always liked using it, but I never decided to pay for it over just using Photoshop…until today.

I went ahead and bought the app and had a go at making something with it. The result is the Chromebook illustration above.

Everything about the program’s user interface seems very well thought out and caters perfectly to the needs of the average UI designer, so much so that it really makes everything feel like child’s play.

I’ve found several features that are extremely useful for web/UI/icon design already so I’m going to go through just a few of them here.

Grids

If you design websites or icons or pretty much anything, then you probably use grids in one way or another. I usually would just get a calculator out and make a basic grid of guides in Photoshop based on divisions of the area size I’m working in. But Sketch provides a really incredible grid system you can use.

Here’s the basic unedited grid:

Image

Now I can take that grid and edit it so that the grid blocks are whatever size I want. I can also edit the size of the thicker grid blocks so if I (for some unknown reason) want a grid made up of blocks 17px wide with thicker lines every 13 blocks, it’s just a couple of clicks and its right there!

There’s also another type of grid we can use here:

Image

If you design websites then you already know just how useful this is. It’s all editable of course, you can change the width of columns, the height of rows, you can have either rows, columns, or both. You can fully edit the gutters, you can basically get it all set up with the perfect guides and start designing with more confidence about your accuracy.

Very useful stuff indeed.

Colours, shadows and everything else

One of my favourite things about Sketch is the way that you edit colours, shadows, inner-shadows, reflections, blurs, strokes, border radius, opacity, width and height. If you’re designing a UI element, this list covers almost everything you really need and it’s right there in a side-menu to the right. On the left you’ve got your list of layers.

This is kind of what I mean when I say it’s like child’s play using Sketch. In Photoshop I’d find myself going through menu’s, clicking on tiny little tick boxes and traversing a vast quantity of different options designed for tasks ranging from photo manipulation to 3D modelling, whereas now I hardly have to go into a menu at all to get to what I want. It’s all right where I want it.

For example I’m going to create a rectangle with rounded corners:

Image

Now I want the border radius to be a bit higher:

Image

Make it green!

Image

Maybe a light inner shadow?

Image

Give it some drop shadow:

Image

Everything I need is right there.

Exporting files

The final thing I’m going to mention is the exporting of files. When I was making my icon pack I would make an icon, export it and move on to the next one. However Sketch gives you the option of exporting in slices, allowing you to build several things on the artboard at once, then export them all at the same time as different files. This, coupled with the use of the grids can be a very powerful feature.

I can now perhaps make 25 icons in a grid, allowing me to compare them and ensure that they’re all in keeping with the same style and colour palette etc. I can look at them as a package rather than just individual icons, then export them all at the same time, as different files.

Here’s a basic example to show you what I’m talking about:

Image

Those of you who make icon packs should really be considering this application right now. I’m switching from Photoshop to Sketch for my icon pack updates today, and the exporting options are one of the main reasons for that.

Tell me

What do you think?

I feel like since this is an app made by UI designers, for UI designers, that it’s no surprise really that I’m falling in love with it’s simplicity and ease of use.

BUT

I’m sure there are probably people out there who thought the same at first, but eventually made the move back to their previous software of choice.

If that’s you then tell me why. I’d love to hear from you!

Redesign Time!

A Redesign of the National Rail app (UK)

The UK National Rail app is (in my point of view) pretty ugly and ignores most of the conventions of Android app design. I don’t like the strength of the gradients they use and I feel like there’s a sense of ‘information overload’ whenever I first open the app.

So here I’ve tried to redo their UI, using a simplified layout, bringing the app closer to the look of stock android apps.
I’ve moved the weird arc style menu at the bottom to a simple sidebar menu and removed gradients.

I hope that this has resulted in a user interface that gives you the options you really need on the main screen, without unnecessary options confusing the user AND an app that looks more uniform to the important android apps that people enjoy using.

This is the second time I’ve tried something like this and since I posted it a couple of people messaged me with their own versions, all of which actually look much nicer than the original app.

The first time I tried a redesign resulted in this:

Weather.com current siteMy redesign of their site

My version wasn’t something I toiled over for hours and when I made this weather.com looked quite different which is why a lot of the branding is missing. This was more of a quick self-test to see if I could create something more relevant to potential users.

Once again, the idea here was to simplify the existing site. I rarely go to weather sites for the news so I shifted the overall focus to the actual weather and weather information.

However I couldn’t remove all the news stories from the site as some people obviously do use weather.com to keep up to date with weather related news, so I simply moved the news stories to a section below the weather, in a grid-like section that is 90% below the fold. This way people can quickly access the current weather, as well as select forecasts and other menu option immediately, and if they want news they can scroll down and have a page full of it!

I feel like I’m starting to get to grips with the central concepts behind design. I no longer feel that I can just open up Photoshop when I have an idea and start working, I need to take some time to think about the problem, and the solution. Generally with these redesigns I’ll find the site/app I’m hoping to work on and sit down with a piece of paper and a pen and I’ll list the content in order of importance to the user. This is a good starting point which helps me decide where the main focus of the site/app should be and seems to be a good tactic to combat that blank page creative block that can sometimes be an issue.

What thought processes do you go through when redesigning something? How do you battle creative blocks? Leave any answers to these questions in the comments and as usual feedback about my work is greatly appreciated!

Published – Flat Candy Icons hit the Play Store!

Finally!

After a lot of hard work climbing up some serious learning curves, I have finally published Flat Candy Icons to the Google Play Store. It’s actually been a couple of days since I published the icon pack and so far I’m pretty happy with the results I’m seeing! People are downloading the app at the rate of about 100 people a day, and the reviews are overwhelmingly positive! (I’m sure I’ll get the obligatory 1 star review soon with a comment from someone moaning about how they look ‘ios’).

So yeah a big thank you to everyone who has downloaded Flat Candy Icons so far and an even bigger thank you to anyone who’s left me a 5 star review!

It’s been a long and, at times, arduous process making this app. In the end I managed to get it to work with a dashboard app that can theme the icons in most launchers with the touch of a button, a button that links to the Google+ community, a button that links to the Play Store screen where you can give the app a rating AND a button that links to another app. This other app is quite cool, another developer turned me onto it.

When you open the Flat Candy Requests app, you are given a screen with a list of all your installed apps, you can then choose the apps that haven’t been themed in the icon pack yet and email me the necessary bits of code to theme them quickly and easily. So if anyone reading this has the icon pack and wants to make requests, use the feature included in the app itself. It will ensure that I can theme your requested icons quicker!

If you’re interested and would like to use these icons on your phone, then go to the Play Store page and check em out!

So I’ll leave it there and just mention that I’m starting work on the first update which should include over 50 new icons and a bunch of activity fixes.

Here are some pretty pictures:

Image

Image

Image

Image