Dribbble stats for the last 30 days.
Continuing my New year tidy up. Archive all old projects before the end of January – job done.
Improving www.nutshell.com experience – a fixed header on a longer page makes sense.
Trying to get organised – found some very old work.
Continuously striving for improvement – check out @Nutshell progress: www.dribbble.com/karstenrowe/projects/nutshell.
Why we’re currently implementing a more responsive design at Nutshell. Poor use of space on a large monitor: The content is hidden on a small monitor Tiny text size, zooming, panning on a mobile device: View a one minute demo on YouTube.
Three blogs that I regularly visit: Creative Review Advertising, design and visual culture. Little Big Details Your daily dose of design inspiration. Signal vs. Noise A publication about the web by 37signals.
For design inspiration, I regularly turn to Dribbble – the slightly exclusive “show and tell” site for designers. A short list of notable designers to follow on Dribbble: Ryan Putnam Kerem Suer Henning Gjerde Jonas Söder Geri Coady
Fine-tuning the mobile layout for www.karstenrowe.com.
A Google Maps tooltip that made me smile. “This map is built for you”. Software for humans.
A lovely use of color – TriplAgent for iPhone.
Gmail is renowned for its minimal UI. An example of removing surplus pixels, where possible.
Currently admiring the simplicity of the Google Drive UI.
Feedly have a new underbar design.
An example of a good welcome email – Slack.
Square Space on dribbble. I’m not sure what else to say but a showcase of inspiring work.
Do you label a button Submit or Save or Update or New or Create? That’s copywriting. Do you write three sentences or five? Do you explain with general examples or with details? Do you label content New or Updated or Recently Updated or Modified? All of this matters.
Think about your customers and think about what those buttons and words mean to them. Don’t use acronyms or words that most people don’t understand. Don’t use internal lingo. Don’t sound like an engineer talking to another engineer. Keep it short and sweet. Say what you need to and no more.
Build predictable websites. Design what the user expects. Do not try to build the next big web feature unless its absolutely a better, more intuitive way to complete an old task.
Always anticipate that a user may not use your website the way you intend. Predict how they might misuse the website, and don’t let the consequences of misuse be undesirable.
Good writing is good design. It’s a rare exception where words don’t accompany design. Icons with names, form fields with examples, buttons with labels, step by step instructions in a process, a clear explanation of your refund policy. These are all interface design.
Users should never have to guess if something is clickable or not.
A multi-page skeleton web project framework. A simple aim; create a basic, yet expansive web project template that you can download, use and deploy quickly. Bootstrapped LESS integrated stylesheets – commented, variables, mixins, retina ready, minified. jQuery & Google Web fonts ready. Mobile friendly design. View live website View on GitHub Please feel free to download and use in yourContinue reading “Resource 03”
At Nutshell we use HipChat daily, resulting in CloudApp becoming a fundamental tool. The Auto-upload screenshot preference which I initially found frustrating has become a convenient way to quickly share content – visuals & text. It also serves as a running history of UI inspiration.
A brief endorsement of Bootstrap – a mobile first framework for faster and easier web development. Yes, I know I am very late into the game. I eventually got onboard – very impressed.
Google being helpful again. Intuitive, easy yet descriptive – helping users along their way with minimum fuss.
A iOS 7 GUI template – a lightweight Photoshop document, containing all the major iOS elements to help you design your app. It’s a well organised, labeled and layered PSD of the latest version of iOS. Preview Download
A browser chrome template – a simple way to showcase your screenshots. An organised and editable Photoshop document; masked screenshot area, vector objects, editable text, colors & layer effects. Preview Download
[youtube=http://www.youtube.com/watch?v=_tn0ELTO_CI&w=640&h=360] GuideGuide – the efficient way to set up a grid in Photoshop. Enter in a few numbers… magic… columns, rows, midpoints, and baselines – done.
Project 04: Nutshell Inc.
Logo design & brand guidelines Web design & build iOS & Android UI design Web app UI design & development Check out the Nutshell dribbble project to see what we’ve been working on.
MailBox iOS App downloaded – impressed. The intro wizard is super helpful in terms of discovering the more advanced gestures.
The subtle design update made to the WordPress sidebar works for me.
I’m a sucker for a brand mascot, especially when the illustration is as charming as this – Polar – a super-fast way to create great-looking polls.
Project 03: Gignite
Posted another web design project to dribbble… Gignite Project.
Project 02: SoundCloud
A little rough and ready… A project I worked on sometime ago, never really saw the light of day. Posted the project to @dribbble.