#soon (at Yummygum)
Being an agency that deals solely with digital products, it’s quite odd that we haven’t converted our paperwork and finances to the digital world earlier. Read along for a little insight in our process and how it saves us money.
Our paperwork has increased exponentially over the last 3 years, sending and receiving invoices, signed estimates, paying employees, etc. Organizing this paperwork neatly and making sure you’re on top of your finances became a weekly task, even with a regular trip to our accountant.
Along came a post by @MacStories about Hazel, a small plugin for Mac OS X that automatically organizes your files and folders based on a set of rules. We’ve experimented with the plugin in our personal lives (like photo organization) and quickly figured this could be huge to manage our paper work. But, how do you get your paperwork on your Mac in the first place?
Hazel App gives you peace of mind.
Tip 1: Scanbot + Dropbox to digitize and cloudify paperwork
To get your paperwork into the digitial world you need to scan your documents. You can use an actual scanner device, but using your phone is much more efficient. The app we prefer to use as a scanner is Scanbot. It has a pretty interface and all the features we require for our workflow like Auto Dropbox Sync, Auto Scan and Multiple Pages.
Give your scanned documents a suitable name like Invoice - Company. We can use the filename later to categorize accordingly.
Once you’ve setup Scanbot to sync with Dropbox, you can start using Hazel.
Create premium quality scans. Easy. Fast. Upload them to your favorite cloud.
Tip 2: Hazel for auto organization
Each year we used to buy a folder with tabs to embed and categorize our paperwork. It’s easy to convert that setup to the skeuomorphic OS that also has folders. Create a folder for the current year and a folder inside for each category like Expenses, Invoices, Estimates, Misc, etc. Make sure you have this setup right and you don’t have to look at it again for quite a while.
Now you’re ready to create rules with Hazel. Hazel can Move, Rename and Tag any file or folder. When your scanned document is synced with Dropbox, Hazel will detect it and applies your rules. Here is our basic setup of rules:
- Move file from Scanbot folder to Paperwork → Current Year → Category → Current Quarter
- Apply a Tag
- Rename to ScanDate - Filename.ext
Our Hazel setup
As we now have all our paperwork digital and organized, we don’t have to visit our accountant in person but just send him a (automatically) well-organized zip file. This approach has saved us tons of time and headaches.
Photoshop CC introduced the Linked Smart Object. Linked Smart Objects kind of behave like what you would’ve wanted Smart Objects to behave; keep the host PSD small in file size and serve as a representation instead of a duplicate.
For those not familiar, Smart Objects are non-destructive files imported into a host PSD. The file imported becomes a Smart Object and is basically a duplicate of its original, yet taking in one single row in your Layers Panel. You can open the Smart Object to make edits, save it and the edits would show in the host PSD. We use this technique regularly for something like a Footer on a Website, or a NavBar in an app.
It all sounds awesome, yet there are two main downsides to using Smart Objects.
1) It’s a duplicate
You’d expect edits to the opened Smart Object to affect the original file. Fact is; this doesn’t happen. The edited Smart Object is duplicate embedded in the host PSD which means it looses its link to the original. Ideally you would want the Smart Object to be a true reference to its file, just like how a PHP include works.
2) Cumulative file size
The second big downside of using Smart Objects is their file size adding up to the file size of the host PSD. Unlike putting a Flattened version of the file you want to use in the host PSD, Smart Objects are full-blown duplicated.
Smart Objects work great with elements you use in different PSD files.
Linked Layers to the rescue
Apparently Adobe became aware of these downsides of Smart Objects and created Linked Smart Objects. Using these actually have the pro’s of regular Smart Objects but no longer any of the downsides.
1) It’s the actual file
Placing a Linked Smart Object is an actual representation of the original file. The Linked Smart Object is seemingly flattened, yet still allows you to open it, do edits and overwrite the original.
2) Small file size of host file
Because the placed Linked Smart Object is not a duplicate and just representation of the original file, the host PSD is much smaller.
Place your Linked Layer, save it and your host PSD will automatically update.
Notes regarding Linked Smart Objects
Even though we really love Linked Layers, there are also a couple of things to keep in mind.
1) Update Modified Content
Linked Smart Objects are automatically updated to its latest version in a host PSD if you have the host PSD opened and save changes to your Linked Smart Object.
If you don’t have the Host PSD opened, Photoshop will show a triangle shaped badge with an exclamation mark. You have to manually update the Linked Smart Object and can do so by right mouse clicking the Linked Smart Object in your Layer Panel and you can choose
Update Modified Content.
2) Keep an eye on the original file
Although it’s pretty nice a Linked Smart Objects is merely a representation of its original, this does mean you have to be careful not to delete the original. Without the original the image will still be visible within the host PSD but you won’t be able to transform it. You can re-locate and update the link to the original by double-clicking the Linked Smart Object.
Pro Tip #1: Keyboard Shortcuts
To embrace the usage of Linked Smart Objects as a part of our workflow we have created keyboard shortcuts for the two most used actions regarding Linked Smart Objects: a) Place Linked… b) Update All Modified Content. We like using keys that include the initial of the action name. We use ⌘⇧L for
Place Linked… and to quickly update the content in your host PSD, we use ⌘⇧U for
Update All Modified Content.
Pro Tip #2: Drag with Alt
Drag your files inside a Photoshop Document while holding ⌥ and it will be pasted as a Linked Layer.
Drag + Drop while holding alt to paste as a Linked Layer.
Read more on the Linked Smart Objects
Love to read more on the subject, check out these links Linked smart objects, How to link Smart Objects and Smart Objects and Layer Comps in Photoshop CC 2014.
Playing around with this navigation drop down. Thoughts? (at Yummygum)
Building the right environment to work in has always been important to us. Hiring more people meant we needed more space. Read along to see how we went from a 2-person office to a 4-person office.
Since 2011 we’ve been actively expanding our workforce by hiring freelancers. We noticed a lot of efficiency can be gained by actually working together in the same room, and so we decided to look for Junior Designers and Interns to join our team.
Our old setup was perfect for two people.
Our previous setup was purely built for a 2-man show, however nowadays working with 4 people in the office is not exception. To create more room, but use the same beloved space, we had to do some rebuilding and reorganzing.
More People In The Same Space
Late 2013 we decided to expand the office with another room where we can lounge, have meetings and do some sketching together. It’s the perfect space to step away from your computer and think freely.
We often meet with fellow designers to share a cup of coffee or talk about new ideas. Clients from overseas also love to stop by and discuss the future.
To Lounge Or Not To Lounge?
Our lounge area was an obvious cadidate for more color and a less clinic vibe. Adding some great illustrations by Nick Slater makes it feel more alive and inspiring for less focused tasks.
Beautiful Photography By Leon
Be sure to check out a beautiful Exposure post by Leon with the photos of our office.
Working on some icons for an awesome new project. Nice to use a style we haven’t used before. Sometimes it’s good to break out of your comfort zone and push yourself to try new things in design. (at Yummygum)
We love using Fitbit trackers and apps, but to be honest the webapp could do with an update both UX and UI wise. We took the liberty and tried to reimagine the Food Logging section of the webapp.
This is merely an unsolicited concept redesign we’ve made because we’re big Fitbit fans and designers with a critical eye.
In case you don’t know, Fitbit is a company that produces nifty gadgets and software to track and log your activities, sleep and food. While Fitbit’s iPhone app has been updated to match Fitbit’s latest visual branding style, the webapp’s still looks like an old fart. It feels like a lot of functionality has been added throughout the years, without revising the experience. Something that’s completely understandable for a service which has gained popularity amongst a large user base. We decided to redesign the section we use most frequently; the food logging page.
Our objective for this redesign was to make a less box-y design that eliminates as much hurdles that keep you from logging food. One the left: the current look of the food logging page. On the right: the redesign
Cleaning up the navigation
One thing that causes the current logging pages to look cluttered is the layers of navigation. First there’s the main navigation which is mostly marketing driven, allowing you to instantly go to the premium page and the store etc. This navigation also holds ‘log’ of which the Food Logging page is a child. Then there’s the guiding bar that suggests you need to learn more about the new dashboard, even when you’ve visited this dashboard and understand what it does. Then below the guiding bar there’s the subnavigation which shows all trackable and logable categories. Still following? Us neither.
This is why we wanted to tame the navigation. We did so by harboring the tracking pages in a separate navigation that is only available if you would hover or click the ‘log’ item in the main navigation. Assuming the marketing driven main navigation holds a lot of value to Fitbit for their conversion rates, we decided to keep that main navigation available at all times.
Yet another part of the page that’s probably important to Fitbit, and what would be too easy to just get rid of in a redesign. We felt like this is a part of the page that’s perfectly suitable for selling a user the great products Fitbit offers. Distinguishing layers of navigation within a footer probably has a smaller negative impact on the usability than in a header of a page as it’s a secondary navigation that isn’t in the way of a user achieving his main goal (logging food).
Redesign footer with a cleaner look
In a perfect world the autosuggest feature -while typing your foods when logging food- would separate your own foods from everyone else’s food. Although Fitbit’s food database is made to function as a collectively accessible library, we’d like to see a self-added ‘hamburger’ before someone else’s ‘hamburger’ in the autosuggest dropdown.
Our autosuggest dropdown shows matching favorite foods first
Collective foods library vs custom added foods
One thing that’s super powerful about Fitbit is the huge database of foods and their nutritional values. If User A creates a food and adds nutritional values, this food becomes automatically available for User B to log. That’s probably the reason the library of available foods is really big. This all works fine if you put your trust in an other user’s accuracy. However, there’s no way you can be a 100% sure all details are correct. The best way to deal with this in Fitbit is to ‘favorite’ foods you’ve added to Fitbit yourself. However this leads to a humongous list of Favorites in case you take food loggin serious.
We figured there wouldn’t be any need for the Favorites to show the entire list as picking foods from your Favorites is now mostly covered by the new Autosuggest dropdown (and the ‘Most logged foods’ option). That’s why there’s no longer any need to show the entire list of Favorites. Displaying the entire list would still be possible by clicking ‘load more’. Also, adding a search field above the list would make it much easier to quickly find what you’re looking for within your Favorite Foods or Meals. (Meals are custom made groups of foods).
Another thing to make adding foods easier is something we would call ‘daily templates’. Although Fitbit allows users to create meals, these meals still have to be entered daily at a nutrition moment. But what if you eat the same breakfast every day? That’s where the daily templates would come into play. A food would either be added automically on a set nutrion moment daily, or you would simply click on a template and it would get added to the set nutrition moment.
What the design of Daily Templates could look like
When you currently log food you need to set the nutrition moment by choosing it from a dropdown list. It would be super useful if this dropdown would be set to the nutritional moment that’s closest to the time of entering a food, based on your time zone. So if you were to enter your food somewhere around 1pm the dropdown would be set to ‘lunch’ by default. However, there are of course people who’ll enter all of their foods at the end of the day. They’d still be able to change the nutrition moment per food entry.
The ‘Daily Calorie Composition’ as Fitbit calls it is the percentual share macro’s have within total of the nutritional values. In the current design the amount of absolute units (grams) is displayed larger than the percentage. To us, this doesn’t make sense as there isn’t a total of grams you’ve eaten for a day. That’s why we figured it’d be nice to see clear visualization of these percentages.
A visual representation of your daily macros
Download our free CSS user style!
We’ve been using custom CSS to spice the food logging page up a little. While only so little is possible using custom CSS, we did manage to tweak the food loggin page to match Fitbit’s iPhone app. You can use the CSS with Stylebot (Chrome) or User CSS (Safari).
A screenshot of the food loggin page with our custom CSS applied
You can find our free download of the custom CSS here.
A peek at a new app we’re working on, at Yummygum
Working on some document icons. Too Dropbox-y? (at Yummygum)
Not all of our work makes it to our website or Dribbble, often due restrictions from clients pre-launch. However, as soon as an app is released we can and eagerly spread the word to show off our design.
Today is one of those days! We’re excited to share with your Preso.tv for iPhone and iPad. We’ve helped Rutger from Decos with designing the web-app before and are now happy to see the iOS apps live as well.
Preso.tv allows you to easily share your presentations with your viewers. Your viewers can access and view your presentation on any smart-device, super neat! Jord ‘Larkef' Riekwel helped us with the branding for Preso.tv.
The app is free, so please don’t hesitate to download it now.