Designers love subtle cues, because subtlety is one of the traits of sophisticated design. But web users are in a hurry and don’t care too much for subtlety.
Previously we were able to design and hand over wireframes, but now with heightened interactivity in the mix, that’s no longer effective. Wireframing is dying – Prototyping is the way forward. Handing off design specs as a wireframe just isn’t enough anymore.
My first ever appearance on a podcast, Code Optional – the trials and tribulations of building software. Hugely embarrassing but a lot of fun. Episode 7: Our first ever guest, designing remotely – Oct 27, 2014.
We’ve recently discovered two new design prototyping tools – Marvel and Invision. Both offer similar functionality and make it super simple to create interactive prototypes, ready to share and gather feedback.
Doing my best to Learn Sketch 3. We created Sketch specifically for designing interfaces, websites, icons …
A bootstrapped WordPress project framework. The aim was to create a simple, re-useable WordPress theme. Bootstrapped LESS integrated stylesheets – commented, variables, mixins, retina ready, minified. Typekit fonts. Mobile friendly design. View on GitHub Please feel free to download and use in your own projects.
The first time experience with an interface is crucial. The state in which nothing yet has occurred should not be a blank canvas, it should provide the user with direction and guidance to get up to speed. http://emptystat.es/
Project 14: Rochen Hosting
Archiving another super old project that never really saw the light of day.
Project 13: Flagship Housing
Archiving another very old project. View Dribbble project
A simple, tiled wallboard framework. A basic one-page tiled wallboard framework, ideal for showcasing thumbnail images with underbar menu. View live website View on GitHub
Project 12: CPD Store
Archiving another very old project.
Project 10: ChapterOne
An old branding and web project that I wanted to share before archiving forever.
Continuing my New year tidy up. Archive all old projects before the end of January – job done.
Project 09: karstenrowe.com logo wallboard
The brief was to create a scaleable, responsive platform to showcase recent branding projects. A bootstrapped solution can be found here: http://karstenrowe.com/projects/logo-wallboard/. Visit the website
Working hard archiving old projects.
Improving www.nutshell.com experience – a fixed header on a longer page makes sense.
Trying to get organised – found some very old work.
It’s a little rough round the edges, but I’ve posted some new logo design work. http://karstenrowe.com/projects/logo-wallboard/
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.
Fine-tuning the mobile layout for www.karstenrowe.com.
A one-page web project framework. A simple aim; create a one page web project template – an easily customisable, flexible platform to showcase your latest work. 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 04”
Gmail is renowned for its minimal UI. An example of removing surplus pixels, where possible.
A simple website to showcase new design work. View work sample By no means a ground-breaking or innovative design and very much a work in progress, but having a point of reference is important.
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.
Project 07: karstenrowe.com
A brief insight into karstenrowe.com re-branding and website project. Browse the design project
GitHub – making intelligent version control less painful for design folk like me.
[youtube=http://www.youtube.com/watch?v=1A9AoCJTuVU&w=480&h=360] An incremental improvement – a quick demonstration of keyboard navigation and tab :focus on www.karstenrowe.com.
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.
Adding a few snaps to the NJS Equine Therapy logo & web design project.
Project 06: NJS Equine Therapy
A brief insight into the NJS Equine Therapy branding and website project. Visit the website Browse the design project
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
Collaborative sketching with clients is fun – found these very old comps this morning.
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
Bold, bright and brilliant.
Project 05: Harrogate Health & Beauty Cosmetic Clinic
Logo & print design Signage Web design & build
[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.
I still believe that strong stationery will get you noticed – need to up my own game.
A compilation of Dropbox illustrations.
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.