SitePoint » Design & UX | Alex Walker
When you’re beginning a brand-new design project, you probably start at the same place every time.
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.
And let’s be clear: We’re not talking about glamorous, rock star design changes:
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.
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.
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.
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.
Continue reading %Finch.io: A Visual Tool for Finding and Fixing Design Bugs%
AI-driven updates, curated by humans and hand-edited for the Prototypr community
