<p>SitePoint &raquo; Design &amp; 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% [&hellip;]</p>

Breakdown

SitePoint » Design & UX | Alex Walker

Blank canvasWhen 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?

SitePoint loaded in Finch.io

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.

Finch.io UI
Finch.io UI

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.

Comments
Adding comments

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

Curated

May 4, 7:51 AM

Source

Tags

Tomorrow's news, today

AI-driven updates, curated by humans and hand-edited for the Prototypr community