Yummygum

Apps We Use: Kickoff

Fri, 18 May 2012 17:01:00 +0200

Since we started Yummygum we’ve been searching for the ultimate Getting Things Done (GTD) and project management app. We’ve tried Cultured Code’s Things, Metalab’s Flow, 37 Signal’s Basecamp and so on. All (web)apps had one or two really strong points but seemed to lack other functionalities. None of these apps offer the full range of functionalities we’re looking for in a project management app. Kickoff app seems to be doing a pretty good job at combining to-do lists with project management. Since about six months we’ve been using it, and we really like it. Here’s why.

Using Kickoff for projects
On the Kickoff app website the Kickoff team calls their app a collaboration tool for small groups and says it has the right features for team work. That kind of implies the app is meant/made to be used by people who all contribute to a certain project. In other words the app may not be completely suitable for discussing projects with your client.

However, when working together with a (small) team on a project in which all participants work on a collective goal, Kickoff app is absolutely brilliant. Kickoff lets you:

Create, group or check to-do’s, assign them to a team member and add a due date
Discuss to-do’s by using comments per to-do in conversation style
Have group or individual chats
Upload/attach files to a project
Make notes

It’s required all team members are on Mac OSX though, since Kickoff is a native Mac OSX app.

Possible limitations
There are a few things we think could really add value to this product still. For example; discussions categorized by subject that aren’t bound to to-do’s. At the moment there are a couple of ways you can discuss stuff. However, there isn’t any option to create a discussion categorized by subject without it being linked to a to-do. Obviously not everything you would like to discuss is linked to a to-do.

Another thing we would really love to see added in the future is an option to archive projects. Right now you can either keep a project or delete it. However, sometimes you might wanna get back into a project to grab some files or read some notes. An archive function could be a possible solution.

In conclusion
Is Kickoff App perfect? It’s not ‘perfect’ but it is very close to perfect though. It’s a beautifully designed app and it’s really simple to use. There are still some minor features we’d love to see in an update though. In the meantime we’ll keep happily using it. Get Kickoff app here! and see for yourself

Growl style: David Leatherman

Fri, 11 May 2012 12:12:00 +0200

A couple of weeks ago we blogged about Growl styles and listed 10 beautiful styles that you can download for free. We’ve always wanted to try and see what it would be like designing our own Growl style. We wanted to see if we could make something different than most styles. That’s why we made a textured style. We posted one on Dribbble a while ago, and now thanks to the wonderful Patrick van Marsbergen over at Mimbee who did the coding the Growl Style has now seen the light of day! We shall name it: David Leatherman (a little pun ain’t never hurt nobody)

Download the David Leatherman Growl style here

Sweet16s - our new 16x16 icon set

Fri, 04 May 2012 12:46:57 +0200

It took us some time, but it’s finally here; our new 16x16 icon set called Sweet16s. We’ve started with a ten days introduction sale. This means Sweet16s starts at $24 (instead of it’s normal price which is $39).

Big shoutouts go to Johnathan Croom who did all the cool animation and took our design to the next level.

10 beautiful Growl styles

Wed, 11 Apr 2012 11:31:00 +0200

We don’t have to convince any OSX user to install Growl, I think. What we really like about Growl is that it allows you to select a style (theme) for it’s notifications. It even allows you to create your own styles. Growl comes with about a dozen styles by default. But if you’re looking for more styles, here’s a list of of 10 sweet Growl styles.

1. Framed by Rasmus Nielsen. Get Framed Pixels style here

2. iOS5 by Philipp Rappold. Get iOS5 Pixels style here

3. Morning & Evening by Glenn Hitchcock. Get Morning & Evening Growl style here

4. Premium Pixels by Orman Clark. Get Premium Pixels style here

5. Nucleic by Chris Wallace. Get Nucleic Growl style here

6. Starwl by Szabolcs Sz.. Get Starwl Growl style here

7. Wooded by Derek Briggs. Get Wooded Growl style here

8 Chromic by Drew Smith. Get Chromic Growl style here

9. Black Glass by Ryan Collins. Get Black Glass Growl style here

10. Palmstyle by Sam Mularczyk. Get Palmstyle Growl style here

ING Redesigned; Round 2

Thu, 05 Apr 2012 16:51:00 +0200

Just a couple weeks after our blogpost about a redesign for ING’s digital appearance, they released an iPhone app. It works pretty good and you can download it for free.

We love mobile banking and our experience with the ING iOS app has been smooth. But of course, there are a few things that we think can be better, especially in the design. Round 2.

General design thoughts
We feel the design was a bit rushed and lacks personality. It’s inline with their color scheme, but it feels corporate and not personal, which we think it needs on your phone. In our design there are a few things we added like subtle textures to make it more soft and personal.

We think the slide-down with options for a Rekening (account number) can definitely use some work. Oh and yes, that’s a big lion in the background.

Side-menu vs Grid menu
The grid menu ING has used has an unnecessary huge amount of text and contains blown up icons as buttons. It’s not flexible and future proof either. What if they want to add a button to this menu? And I hope we can assume they have more plans for the iOS app.

The icons they’ve used to represent the sections are not helping either. Think away the labels and we would have guessed “Creditcards, Settings, Support Chat & Account”, 1 out of 4 :-)

The side-menu we’ve chosen as a way to navigate at a deeper level is by no means unique. It’s seen in popular apps like Facebook, Path and recently released Sparrow. Nonetheless, we feel it’s a great way to navigate if you’re relying on a vertical layout as your main content.

The Account menu
We would love to have the ability to use multiple accounts inside the app. For example, we have our personal accounts but also our business account for Yummygum. Wouldn’t it be great if you can use both on-the-go and perhaps pay a client right there when you’re meeting them?

A designers urge
So there you have it, another round of redesigning an ING product. It’s fun to do, good practice and we hope they hire better designers for ALL their (online) products in the future.

Here are all our designs in full resolution on click.

Thanks to Mikael Eidenberg for his iPhone template and Bjango for Skala Preview.

Social (Photoshop) gradients

Fri, 30 Mar 2012 12:04:00 +0200

We’ve been busy designing quite a few webapps that involve social sharing. Often times we’re asked to design buttons, icons etc. to indicate what social service something is shared through. We all know a social service’s logo triggers recognition to users. Beside’s the logo’s shape, the use of the social service’s brand color helps in this recognition process. Since we found ourself color-picking the right social brand colors frequently we decided to turn these colors into gradients and share them with you!

Download the Photoshop gradients file here.

Apps We Use: NameChanger

Fri, 16 Mar 2012 16:05:00 +0100

In this times Apps We Use post we’re bigging-up a little app called NameChanger. The app does exactly what you think it does; changing file names. Although NameChanger’s UI won’t win any beauty contest, we love it for it’s features.

We’ve used NameChanger a lot during the creation of iconSweets DELUXE, our premium huge icon pack. For iconSweets DELUXE, we had to export lots of layers from a Photoshop file to separate PNG files. Unfortunately the export-script we used added extra characters. So, we used NameChanger to delete some characters and then prepend a few characters instead.

Download NameChanger for free

Using keyboard shortcuts in Photoshop

Fri, 09 Mar 2012 17:12:00 +0100

Whatever business you’re in, productivity can make or break not only your profit but also your morale. In (web)design we’re constantly looking for little productivity boosts. One thing that has proven itself to be a huge productivity boost for us, is assigning keyboard shortcuts to frequently used functions in Photoshop.

Needless to say; adding keyboard shortcuts only helps if you’ll use them often. If you use an action you’ve assigned a keyboard shortcut to so few times you won’t remember it that will work counterproductive.

Logical keyboard shortcuts
We think the key is to keep the keyboard shortcuts rather simple and logical if possible. For example, Clear Layer Style is pretty similar to cutting in a document. Naturally the Copy & Paste Layer Style are similar to copying and pasting any other elements in a document. Therefor we’ve assigned the following keyboard shortcuts to these frequently used actions:

^+⌘+X for Clear Layer Style
^+⌘+C for Copy Layer Style
^+⌘+V for Paste Layer Style
⌥+⌘+§ for opening Blending Options
^+⌘+T for Trim

Applying a keyboard shortcut to a predefined Layer Style
But these aren’t the only actions where we use keyboard shortcuts. One layer style we find ourself using a lot is a 1px white dropshadow. We used to set the color to white, uncheck the Use Global Light checkbox, set the blending mode to Normal, reset the Distance and Size. In our case we first recorded an action that sets this specific Layer Style and then assigned a keyboard shortcut to this action. A downside of this specific action is that -when applied- it disregards any Layer Style you had before. That means you would have to first apply the predefined Layer Style and after that add other layers styles.

Naturally these keyboard shortcuts are a set of shortcuts that work best for us. If you use different aspects of Photoshop they won’t boost your productivity.

Start using your own keyboard shortcuts
We assume you know your way around Photoshop’s settings, but to be sure: hit ⌥+⇧+⌘+K to go the Keyboard Shortcuts and Menus settings window. Then go nuts! If you like to the keyboard shortcuts we mentioned above feel free to download our settings here

The keyboard image used at the top of this post is made by the skilled Swedish designer Joachim Löfstedt.

Proper layer naming in Photoshop

Fri, 17 Feb 2012 15:30:00 +0100

Now we know there are already numerous blog posts on organizing your Photoshop layers. Most of these tutorial/blog posts talk about the need for using layer groups and how the layer structure should match the visual structure in your Photoshop file. What we like to point out in this post is the future comfort of proper layer naming on a micro level.

When we say ‘future comfort’ we’re talking about that spark of joy you (or a front-end developer that’ll code your design) gets when opening a Photoshop file with properly labeled layers. There are few things more annoying than being confronted with a unorganized Photoshop file that requires hours to understand. It’s a small investment to name your layers properly and you’ll work more efficiently in the long run.

If you haven’t yet read any of the tutorials on graphic design file organization, you should definitely check out: How to Effectively Organize your Photoshop Layers (on Webdesigner Depot), and The Photoshop Etiquette Manifesto for Web Designers.

On a micro level it can be really useful to name layers after both their element type and their specific name. This makes it easy to find elements within a Photoshop file. In the images in this post there are two examples of how we usually name our buttons and form elements. For organization purposes, we think it’s really useful to name an element by both it’s generic name (‘btn’) and it’s specific name (Close). Also, the generic element name should go first as this is taxonomy 101. You’ll see there are a lot of group/generic elements which this principle can be applied to, like: ‘icon’, ‘logo’.

A couple of our favorite labels for layers:

btn (Buttons)
bg (Backgrounds)
— (Dividers)
input & form (Input fields)
shadow & glow (Layers that show only that)
→ (Arrows)

Again, naming your layers properly is at first time consuming but will help you be a) more efficient b) a nicer person to work with for others that’ll open your graphic design file.

Apps We Use: Coda

Wed, 01 Feb 2012 13:53:00 +0100

Panic’s Coda, our favorite code editor
Since 2010 we’ve been focussing more on designing and front end development. And although we haven’t been doing a lot of back end development we still find ourself using Coda almost daily.

We have tried alternatives like CSSEdit, Textmate and Espresso and they all worked nicely. There are however two features in Coda we think are pretttty, pretttttyy, prettyy nice that makes it a winner for us.

Project thumbnails
It’s those little things that are great. Coda shows your sites/projects as little thumbnails which is automatically generated based on the base url you set as remote. It also allows for customization. So if you’d rather have, let’s say a client’s logo on the thumbnail, that’s also possible.

Live team work
In Coda you’re able to ‘invite’ other team members to work in the same file at the same time. It’s also possible to work in the same file together with someone who isn’t on the same network. That makes it super easy to work with someone (e.g. a developer) who’s located somewhere else in the world.

One thing that could use some improvement however is the permissions part of the ‘work as a team’ feature. By default the inviter is always the owner of the open file which leads to the invitee being unable to save the file. The invitee has to depend on the owner to save the file.

Coda obviously has the abilities to set both remote and local settings and the option to upload to FTP, a code snippet library and a browser to show a preview of your work.

Download the free trial and see for yourself.

iconSweets DELUXE, only $8

Thu, 19 Jan 2012 15:33:00 +0100

We released iconSweets DELUXE this week. As you might know we designed iconSweets1 and iconSweets2 earlier. Both are huge minimalist glyph icon sets available for free. The free icon sets both excisted of psd files that contained all the icons. We had taken note of some people’s preference to have the icons available as separate PNG files, Photoshop Custom Shapes (csh) and as a font. That’s why we released iconSweets DELUXE.

Desktop font & @font-face web font
It’s a paid package that contains *all of iconSweets1 & iconSweets2’s icons in quick-n-easy to use file formats. The icons are available as a desktop font and as a @font-face web font. The web font makes it really easy to. It also helps your webapp or website (wherever you’ll be using the font) load faster because there are less HTTP requests. Read more about using icons with @font-face font on Net Tuts+

PNG’s in three styles
The icons in the iconSweets DELUXE pack are also available in png’s. Of each icons, there are three predefined styles to fit your design need. If you can’t find the style you’re looking for, just open up the PSD file in the original iconSweets2 package and style the icons yourself! All PNG’s are organized neatly in well structured folders and subfolders.

CSH
Photoshop Custom Shapes are included as well and they’re really easy to use. The .csh files are the same as the categories used elsewhere in iconSweets resources. That way you don’t have to load the entire set. You can just load the category you need and get started.

Get iconSweets DELUXE now for just $8 !

* We decided not to include brand-depicting icons in iconSweets DELUXE

Scaling Down UI's

Fri, 06 Jan 2012 15:44:00 +0100

In our new portfolio you’ll find lots of scaled down UI elements. We chose to work with scaled down UI elements for various reasons. For instance; we think it allows us to let the visitor get drawn to that specific element e.g. when the original size is just too big to fit a small resolution screen. We wanted to share a couple of things we’ve learned through trial and error that could save you some time scaling down your own UI elements. In these cases we assume that you’ll be scaling your UI element down to about 50% of the original element in Photoshop.

Textures
If the original (100%) UI element contains textures, keep them as big as in the original design (exceptions aside, you don’t want it to look ridiculous). Nine out of ten times a scaled down texture just won’t look as nice as the 100% version of the texture especially when it’s based on a micro texture. We usually make our own patterns in Photoshop and apply those to a vector shaped layer. The less productive way to go about shrinking your textures is by resizing the ‘images size’ from the ‘Image’ menu. Either just transform (⌘ T) the shape and make it snap to the pixel or move the shapes anchor points to reposition them.

Border radius
If you have any shapes (e.g. buttons) in your UI that have a small border radius (3px or les) they’ll probably look just like square buttons when you scale ‘em down. What we like to do is not use transform (cmd T) but actually select the vector anchor points and bring them closer together.

1px Lines
Make sure all your 1px lines are snapped to the pixel grid or it will look blurry. Since your scaled UI element is much smaller than the original 1px lines look relatively bigger than in the original size. A blurry line that’s not snapped to the pixel grid will be an eyesore. Also, make sure you keep your contrasty strokes (a 1px dark line just above 1px light line ) intact.

Text
The only advice here is to snap the px number of text size to exact number (e.g. change 4,35px to 4px or 5px). Even though you probably won’t be able to read what the text says, it just looks crispier and more like actual text rather than a fruit fly smeared across your monitor.

Icons
If possible, try to snap the shapes and their edge to the pixel, especially minimalist icons (like IconSweets icons) are likely to loose their entire context in a scaled down version that isn’t snapped to the pixel grid. Remove little details in icons that are not visible anyway and isn’t a recognizable shape.

If you’re into making pixel perfect design, we suggest you read the following posts on Bjango as well: Pixel perfect vector pasting, Pixel perfect vector nudging and
Pixel perfect rotation.

Feature in Advanced Photoshop

Tue, 27 Dec 2011 11:12:00 +0100

Some time ago we received an email from Adam Smith from Advanced Photoshop, from the same guys who created Webdesigner Magazine that did an article on how to achieve a letter pressed effect like we have on iconSweets.com. This time we were asked for a spread dedicated to a studio profile on Yummygum.

Being featured is a big honor for us given that Advanced Photoshop is one of the best magazines for Photoshop Professionals out there.

Go ahead and get Advanced Photoshop [Issue 91] at your local newspaper stand
or get it online ! You’ll find our Studio Profile on page 8.

One PSD in multiple windows

Mon, 12 Dec 2011 10:00:00 +0100

Dutch designer Jonno Riekwel once tweeted a great tip for working in Photoshop regarding designing detailed UI elements. He pointed out the option to open one Photoshop document and displaying it in multiple separate windows. This means you can align multiple windows next to each other (or above/beneath one another for that matter).

Here’s an example of how we use it. Obviously the top window and the bottom window both show the same document; the map you’ll find on our website’s Contact page. In the bottom window the zoom is set to 2000% while the top window shows the document at it’s original (100%) zoom. Before we worked with this ‘trick’ we were constantly zooming in and out.

Another tiny extra advantage of working this way; being able to select anchor points in one window (say a 800% zoomed one), switch to the other window in which the same anchor points will be selected and to move those pixels around. Vice versa this works great too.

New Yummygum website

Fri, 09 Dec 2011 14:22:00 +0100

A couple days ago we launched our brand new website. At first glance there might not be a huge difference compared to our old website. That is probably because we’ve worked really hard to maintain the clean and minimalist look we had going on before. Truth is, there are a lot of tiny things that have changed. In this post we want to give you some insights on what and why stuff have changed.

The biggest change we’ve tried to make is a focus shift while keeping the website very ‘Yummygum-ish’. The past year and a half we’ve been trying to actively position Yummygum as a Graphical User Interface (GUI) design company whereas our old website portrayed us as a company that just ‘makes websites or logos’. The shift in focus comes to show in both the text copy and the time spend on showing visitors our love for detail. After all, what good are our words saying ‘we care about details’ if we don’t show it.

Increased grid width
The first thing we did was increasing the width of our website. Stats for our old website showed there was a negligible percentage of people who visited yummygum.com with a small resolution last year. And even though our new slider images on the homepage may come across overwhelming for tiny resolution screens, they don’t exceed a width of 940 pixels.

Ditching Dutch copy
Although only people with a Dutch IP number got to see the Dutch version of our previous website, we did in fact have one. Since we’ve been primarily aiming at international clients (or internationally minded clients/businesses if you will), we decided to get rid of the Dutch version.

Displaying images
We used to have a soft dropshadow on images whereas they have more subtle effects applied to them on the new website.

Work by project
One thing that’s undergone some major changes is our Work (aka portfolio) section. On our previous website we used to categorize our work while on our new website we want keep the amount of work down to a maximum of about 6 items; quality over quantity. That maximum also meant there was no more need for categorization. Also, for the new website, if we were to do multiple things for a client (eg. an app icon, a webapp UI and a promotional website) we can show all of those products within one portfolio item.

One thing you’ll notice about the single item pages are animations based on scrollposition (thanks to our good friend Tom Arnfeld). We think it just makes everything look a little more special.

Footer with navigation
Some portfolio items got really long so we put in a footer on the bottom of each page. That way the visitor wouldn’t have to scroll all the way back to the top to navigate to different pages. Also, we felt that the navigation and it’s page titles could be shorter and catchier. That’s why we replaced ‘portfolio’ with the more fun word ‘work’. ‘About us’ has become ‘About’.

Photography on the About page
We received a lot of positive feedback on our office pictures we posted on our (old) blog. We figured the new website would need some fresh portrait pictures as well as new pictures of our office. The office represents a big part of who we are and what we’re about, so you can now find pictures of our office on the About page.

Other changes
Besides the above there’s a long list of minor changes. For example, we got rid of the ‘request-a-quote’ form and the options for clients to log in on our Customer Relationship Management webapp through our website. Oh, and we now have our address on our Contact page. We increased the size of our logo on the top left of the page and used a soft blue-ish grey instead of a desaturated grey for body text. The buttons are done with CSS3 and don’t rely on a fall back image for non-modern browsers. Last but not least, our new blog is powered by Tumblr and English only!

We think it’d be cool to go through the pages on our new website and pay attention to all of the changes we’ve made, now that you know about them.

Darn you, iOS auto-correction!

Wed, 30 Nov 2011 16:42:00 +0100

This blog post is based solely on frustration from working with iOS’ Auto-Correction. We’ve been been fans of iOS and it’s features since it first launched, however we’ve always found the Auto-Correction in it’s current state holding us back from being productive.

Although Auto-Correction is meant to boost productivity, it’s just not working out like that… at least for us. The main reason for this is that 99% of the time a suggested word pops up, it’s not at all the word we we’re trying to type. That would be a problem if it wasn’t for the fact that iOS inserts the suggested word/spelling if no action is taken. That just doesn’t make a whole lot of sense to us as we end up hitting backspace to delete the correction after all.

How about flipping the thing around and have iOS insert the suggested spelling when you actively choose that suggestion over your own mistakes by tapping on the suggested spelling. In other words not be bothered by an inserted Auto-Correction unless action is taken by the user. Or even better; have the user choose what happens when a spelling is suggested.

SuperSlicr: Ditch the Slice Tool

Mon, 21 Nov 2011 14:08:00 +0100

A superhandy action for Adobe Photoshop we’ve recently come across. Select the layers you wish to export (as a transparent PNG or JPG), use ⇧+F8 and you’re done.

Extremely sweet when exporting graphics for iOS apps. Get it at James Brocklehurst’s MightyMeta.co.uk and download it for free.

Pretty Terminal

Tue, 15 Nov 2011 15:39:00 +0100

We rarely use OS X’s Terminal app, but we were recently forced to use it as we are working on a project that uses Ruby on Rails.

To make the experience a little prettier, we are now using Jeroen Seeger’s skin for Terminal. Download it here.

Using Apple's Trackpad

Wed, 09 Nov 2011 13:07:00 +0100

Since September 14th, 2011 we’ve been using Apple’s Trackpads at the office. When Apple first released the Trackpad we were slightly sceptic but with the launch of Lion a lot of situations emerged in which the Trackpad would come in handy. As you probably know, in OSX Lion a lot of things are inspired by iOS. This shows in the ‘new’ inverted scrolling, Launchpad and the auto-hiding scrollbars. All of these new features just have Trackpad written all over ‘em.

Another advantage is having to learn just one set of gestures when you use multiple Macs and at least one is a laptop. At Yummygum we’re now using the same Trackpad gestures as we do on our MacBook Air’s trackpads which makes us more productive.

We’ve been using the Trackpads for quite some time now and it’s save to say that the Trackpads are indeed a great addition to our wireless keyboard and Magic Mouse. Every now and then we still reach for our trusty Magic Mouse. The most important action that’s still kind of lacking is the combination of clicking and dragging (like when you’re selecting text or when we’re working with vector shapes’ anchor points in Photoshop).

Our good friend Patrick van Marsbergen pointed us to a nifty app called Better Touch Tool. It’s free and what it does is let you set all kinds of gestured to trigger actions. E.g. we’ve used it to set a four finger (left and right) swipe to play a (previous and next) track in iTunes, waawaaweewoww! Another cool feature of Better Touch Tool is that it let’s you drag a window to the OSX menu bar which then makes that dragged window full screen.

Download Better Touch Tool here!

ING Internet Banking; Redesigned

Thu, 27 Oct 2011 17:16:00 +0200

We’re both long time customers of the DutchING bank (previously Postbank) and in general we like all their services. However, one of their services always kept bugging us; their web app for internet banking. It hasn’t changed much in the past couple years and we were constantly irritated by the terrible user experience and the outdated design. We decided to work on a redesign and perhaps create some attention that they need to refresh. Not everything is fully finished, but let’s just say this is a much needed improvement already.

Also, we live in a mobile age now guys, create an iPhone app already!

If you’re not an ING customer these designs will probably don’t say much, but you can enjoy them nonetheless. Be sure to click the images to see the full version.

Please like this post on Facebook or Tweet it to create a buzz, and they might be open to our suggested changes.

Home/dashboard - Full version

Money transfer - Full version

iPhone app - Credit - Full version

iPhone app - Money transfer - Full version