63

I’m building a Mac app for pixel pushing on any live website

6 years ago from , UX designer

Hey DN folks,

When I was working for a digital agency I always feared those last 10% of every web project that took 90% of the time. I’m talking about the moment when the website was almost done, but there were lots of small design details that drove me crazy. You know the story – spacing between the elements, font sizes, line heights, responsive designs etc.

So I’m building Finch Mac app that allows designers to tweak and edit any website’s design just like they would do it in Photoshop or Sketch. You can alter the page and see the effect directly on the website in real–time, on any device. The changes you make can be exported as CSS code or pushed to the live website.

My goal is to kill screenshots with red arrows that say “move this heading 4px up on mobile” and improve the communication about design changes.

So my question is – could this tool improve your current workflow? If yes – what features would you expect from it?

At this point I’m looking for designers that see any value in this app. It's still in early stage, but it’s available for download for a closed group of people. Let me know if you want to get early access. You can also leave your email on the landing page, but be aware that invitations are sent in random order.

60 comments

  • Colm TuiteColm Tuite, 6 years ago

    Applying changes to isolated elements like this creates more problems than it solves. Tweaking styles sporadically will result in a very inconsistent design.

    Do you have any plans to integrate a systematic approach at some point? I'd be much more interested if Finch recognised components across pages/platforms.

    7 points
    • Janis VegisJanis Vegis, 6 years ago

      Finch analyses and works with the existing code in the page and tries really hard to make the new changes as close to the original code. New code is added only in the cases where there was none before. For example, if you add/change some style to a button that is defined in your CSS, the properties will be changed/added to the button's CSS class. If you want to change a unique button in a unique page, then a new selector and code will be added.

      0 points
  • Cory MalnarickCory Malnarick, 6 years ago

    1a. one thing that stands out right away is some attached page of the specs that list out all of the changes made, explicitly, line by line, with links to said changes. FROM X TO Y sort of thing.

    1b. Might be ideal to also include each list item here with snippits of the before and after, then, with a link to where it is on the page.

    2 points
  • Bevan StephensBevan Stephens, 6 years ago

    As you may know Safari already has a visual editor for CSS tweaking:

    Safari CSS visual editor

    1 point
    • Rihards GravisRihards Gravis, 6 years ago

      That's the best tool for power users that understand the code and work alone. When you work in a team and even manage to teach your designer to use this, the change transfer to the original code is still manual and a mess :/

      2 points
    • David ThornDavid Thorn, 6 years ago

      I forgot Safari existed.

      0 points
  • Tom ReinertTom Reinert, 6 years ago

    Not only is this super useful, but the first impression of the landingpage and product is really good. Feels smooth – good work!

    I'd love to try it out.

    1 point
  • Pierre GouthéraudPierre Gouthéraud, 6 years ago

    What do you exactly mean by "pushed to the live website" ?

    0 points
    • Janis VegisJanis Vegis, 6 years ago

      If you install Finch code snippet or Finch Wordpress plugin, with just few clicks you can set any of your versions as "live" – all website visitors will see the website with the changes you made.

      0 points
  • Christian Krammer, 6 years ago

    This looks great, and it could be definitely useful in my workflow. Signed up for the beta.

    0 points
  • Stefano Vitagliano, 6 years ago

    I've just found a tool mentioned in a comment on the Smashing Magazine redesign news that sounds similar. Snapx. Similar goal but less visual. Or am I completely confused? https://app.snapx.io

    0 points
  • Derrick GriggDerrick Grigg, 6 years ago

    Interesting idea. I'm 100% with you on the idea of killing screenshots and marked up docs to tell designs/developers what is wrong with a web page. I'm not sure it helps though when the person who spots the issue has no idea how to fix.

    I attacked that same problem for a different angle. I developed an app that gets embedded on a website and allows people to add "sticky notes" when they spot a problem right on the page. Other users get notified instantly about the issue so they can fix it and important info about browser/screen size/device gets added to the note. The notes are pinned to specific page elements so they move as the element moves on the page (great for responsive websites). Checkout https://pageproofer.com to see how it works.

    0 points
  • Rob Dewey, 6 years ago

    Great stuff. Signed up for the beta...

    0 points
  • tim hickstim hicks, 6 years ago

    Sounds like a great idea and looks promising. Signed up for the beta and looking forward to an invite :D

    One question that comes to mind is: how is this different than workspaces you can define in Chrome dev tools? They allow you to link project files so have the changes you make in the dev tools translated to the actual files. Is this just a more user friendly version of that functionality?

    Either way, excited to give it a try!

    0 points
    • Janis VegisJanis Vegis, 6 years ago

      Thanks, Tim!

      Yes, Finch is more user friendly, plus, we're also tackling the collaboration issues at the last steps of web development process.

      0 points
  • Goodenough Johnson, 6 years ago

    How are you planning to to fill the promise of 'Any website'? I did see a very similar product posted before by taking snapshot and they work in your browser directly. I think it's called Huula? How will you differentiate your product with it?

    0 points
    • Janis VegisJanis Vegis, 6 years ago

      A little history: last year we launched our first version – a web application that just didn't work as we expected – the loading was slow, we couldn't load 3rd party fonts or images etc. We chose to rebuild the product as a Mac app and now we can directly load any website, even local development environments and the loading time is the same as in regular browser. Sure, there are edge cases, but that's why we're in beta, right? :)

      I didn't know Huula before, but for me it looks more like a "design websites without coding" tool. In our case, we focus on pros that design and develop custom solutions. We don't aim to become another website builder.

      0 points
  • Ben Prudden, 6 years ago

    This is a great idea! Signed up for the beta.

    How does this work with things like animation?

    0 points
    • Janis VegisJanis Vegis, 6 years ago

      It doesn't work with animations, not yet. But who knows what the future will bring... :)

      0 points
  • Greg CorbyGreg Corby, 6 years ago

    Huh. I've been thinking about trying to build a few different products that are quite similar/could work well in tandem with Finch. I'd love to check it out and discuss!

    0 points
  • Mark O'NeillMark O'Neill, 6 years ago

    This look great. I have often thought that something like this could be easily added to Chrome Inspector, but this interface makes it much more straight forward than that would be. Lovely. Invite requested :)

    0 points
  • Jesse MartinJesse Martin, 6 years ago

    This is seriously about 75% of my day job. Things I would love to see:

    • Popout editor
    • EXCELLENT screenshot support, and not just hosting it to a cloud bucket somewhere
    • Versioning
    • Shareable is obviously a must.
    • Preset "styleguide" imports? Like being able to apply the same color repeatedly or even a smart detection that let's you replace "globally" for all instances or just the one at hand.

    Looking forward to trying it out!

    0 points
    • Janis VegisJanis Vegis, 6 years ago

      Jesse, this is gold!

      At the moment we got versioning covered, plus, you can share each version by just sending it's URL address. By the way, all changes are applied in real time without page refresh so basically you could send a version's link to your client and live edit the page while talking with the client over the phone :)

      About styleguides – we're exploring different solutions for this feature, so stay tuned!

      0 points
  • Thanasis RigThanasis Rig, 6 years ago

    This is so cool, i would love to test it! Would you be kind enough to sent an invite my way?

    0 points
  • Okan Düngel, 6 years ago

    Hi Janis, great tool! Can i take an invite code. Thanks.

    0 points
  • Nirajan Basnet, 6 years ago

    This might be an interesting thing to end the project perfectly.Would love an invite to try it out!. Thankyou !!

    0 points
  • Suraj kc, 6 years ago

    Would love to try out. Invite please :)

    0 points
  • Saul SutcherSaul Sutcher, 6 years ago

    This changes everything! Awesome work Janis!! Would love an invite if they are still available!

    0 points
  • Matt RintoulMatt Rintoul, 6 years ago

    Great idea, signed up for the beta and looking forward to giving it a try!

    0 points
  • Jay OByrne, 6 years ago

    Would really love to get my hands on this. Can't think of how many screenshots i've shared with devs that this would eliminate. Looking great Janis!

    0 points
  • René Vlugt, 6 years ago

    I'm currently closing in on the end of a project I'm working on that might seriously benefit from this. Would love an invite to try it out!

    0 points
  • Robert BulloughRobert Bullough, 6 years ago

    Great idea.

    The killer feature here would be if your code recognises that the page is using Source Maps (and therefore generated CSS) and the edits you make can be factored into LESS/SCSS etc

    0 points
  • Peter Vogt, 6 years ago

    I do a lot of small iterative work on a large production platform, and think this could be super helpful. Would love an invite.

    0 points
  • Vu Nguyen, 6 years ago

    This sounds awesome,would definitely fit in my workflow today. I would love an invite!

    0 points
  • Andriy Dyadyura, 6 years ago

    Hey Janis do you still have the invite?

    0 points
  • Andrew CiobanasiuAndrew Ciobanasiu, 6 years ago

    Yep. I need this in my life. Signed up for beta access. Excited to try it out.

    0 points
  • Rob MasefieldRob Masefield, 6 years ago

    Hey Janis - I'd be happy to take a look for you!

    0 points
  • Jan Willem Kolkman, 6 years ago

    Oh man, yes! I'm a freelance webdeveloper working with freelance designers. This tool would help me a lot! An invite would be amazing!

    What pricing options are you thinking about in the feature? I don't really like high recurring payments. But if this brings the value I think it will I'd easily pay around 100 bucks one-time to use this.

    (just as a side-note. Nothing against subscription models. Just kinda hitting my limit on those)

    0 points
    • Janis VegisJanis Vegis, 6 years ago

      Yeah, I hear many designers saying that they just can't afford to jump on another subscription, because there are so many services at the moment. But it's great to hear your opinion about this, because we're still trying to figure out the right pricing model.

      P.s. Invite sent :)

      0 points
      • Jan Willem Kolkman, 6 years ago

        Hey Janis,

        Thanks for the invite! (as you said in another comment) I think a Sketch approach to pricing would be great!

        Recurring payment doesn't feel like so much of a burden when it's optional and it doesn't lock you out of the service after the period is over. So a year of updates seems really fair.

        1 point
  • Ankit JoshiAnkit Joshi, 6 years ago

    Signed up, just a got a beta build back from dev I could test drive it.

    Although, I didn't get an email confirmation.. now, not sure If I actually sign up

    0 points
  • Jeff ReinerJeff Reiner, 6 years ago

    This is great! :D Amazing work!

    0 points