When you’re beginning a brand-new design project, you probably start at the same place every time.
- On blank paper and pencil…
- Or maybe a wireframing/mock-up tool
Sketches turn into wireframes. Wireframes turn into prototypes. Prototypes turn into fleshed out designs.
But what happens during that final 10% of the project? The site is working but margins, padding, text alignment, fonts and colors all need bug-fixing and adjusting. It raises a good question.
How do you communicate small design changes to an existing design?
- Do you send screenshots back and forth with arrows?
- Do you start a new Trello card?
- Do you stick yellow sticky notes to a developer’s monitor?
- Do you file a new Github issue?
And let’s be clear: We’re not talking about glamorous, rock-star design changes. These tweaks are the layer of polish that gives a product finished appeal.
- Increase that title bottom margin.
- That H2 is the wrong font.
- Scale up the subheadings to 2em.
They’re all small, but often important bug-fixes and tweaks, and there are often a lot of them. How do they get implemented?
Today we’re going to look at a new tool that takes a very different approach to this challenge.
What is Finch.io?
Finch.io is an app that imports a copy your live page and provides a ‘Sketch-like’ UI for you to make changes to what you see. When you’re done, it then lets you share your changes/edits with your developer/team.
Let’s take it for a quick test-drive.
There isn’t a lot to look at on opening Finch.io. There are no tools and very few UI options to be seen – just a search box and a demo project.
Type a URL into the search bar and you’ll see your website load. So…umm… is this just a web browser?
But start clicking around the page and things get more interesting. All page elements react to your cursor and become clickable. Click on an item and a ‘Sketch-like’ properties editor panel will bounce out of the right of screen.
As you might guess, clicking on a page element makes it editable – either via the properties panel or by directly dragging and resizing the handles. You’re now working with a live visual editor. The UI panel is neatly organized into three main sections: Position, Type, and Box.
Clicking the note icon switches you to comments mode. Clicking any page element allows you (or anyone else signed-in) to attach an explanatory note or instructions to your changes.
Listing your changes
This is the interesting bit. Click on the far-right icon and you’ll see a detailed list of your page edits.
- Click on a list item to jump-to and highlight that change.
- Click on the ‘eye’ icon to toggle between the original element and your change.
Learn PHP for free!
Make the leap into server-side programming with a comprehensive cover of PHP & MySQL.
RRP $11.95 Yours absolutely free
Does it work?
It certainly does for design tweaks. Finch.io is a different kind of application so it took me a little while to get my head around it. It is important to understand Finch is a tool designed to work with your CSS, so I don’t think there’s any way to make design changes that require HTML markup alterations.
Neverthless, I can see it being a very fast, effective way of cataloging and passing on design tweaks in that last stage before a project launch – and even the period just after.
Finch.io is currently in limited beta and is slated for launch in August. It’s a cool concept. Keep an eye out for it.
Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 40+ of SitePoint's book covers.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers