SitePoint » Design & UX | Alex Walker

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:

• Adjust that margin
• That’s H2 is the wrong font
• Scale up the subheadings

They’re all small, but often important bug-fixes and there are often a lot of them.

Finch.io is a 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.

Getting Started

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.

Finch project view[/caption]

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.

Making Edits

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.

Adding Comments

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.

Continue reading %Finch.io: A Visual Tool for Finding and Fixing Design Bugs%