The reason why I’m asking is because while tools like Photoshop and Sketch are great at building mockups, they are very far from the reality of how the web will look and feel.
The fonts they render are completely different, forms are hard to do as well, you can’t really use things like Bootstrap or Foundation, since you’d have to either use a template (which there aren’t any good ones as far as I can tell), or you’d have to manually duplicate all of the styles to make it look similiar, which would be a huge waste of time.
On the other hand, building everything up from HTML is itself quite slow, even when using the Chrome inspector to tweak the site live.
I know there are tools like Macaw, Avocode, and Adobe Reflow, but based on their reviews, it seems that all of them are pretty bad, and only make for good demos, but I don’t know of anyone using them to actually build stuff faster than using Photoshop/HTML by hand.
So my question is, is there an alternative to the above mentioned? One with which I can accurately design a website, in a way that it reflects how the website will actually look, while still being able to do design-ish stuff, like moving things around visually.
I don’t really care about exporting HTML/CSS, since that’d be easy to code once the design is done. I only care about the best possible design experience.
Answer
The reality is that most “user friendly” tools you are gonna find are too limited to live in the jungle of modern webapp craft. You cannot drag N drop your way to an asset-rich and use-case finished product.
So the solution is to DiY it up using an accurate [shadow]DOM: Chrome Inspector, often called DevTools https://developer.chrome.com/devtools. It has abilities such as on-the-fly drag and drop elements, pseudo-live stylesheets, JS ran from console, colorpicker with eyedropper, css autocomplete, rulers, element search, mobile emulation, throttling, etc. You can even inject a photoshop “template” as a higher z-index so you can throw a mask on the page, grab colors/proportions/etc from it, using absolute positioning and display:none on demand to enable/disable the “layer(s)”. There are many Chrome apps too that can help streamline the process — many of them integrate with Inspector (DevTools).
Another thing that may help is Notepad++ using its FTP plugin http://notepad-plus-plus.org/. This means you can live edit files after they pass Inspector validation. When youre ready to push there is no more going back and forth to upload the file(s), check changes, back to edit, repeat. Just save the file in Notepad++, the FTP plugin uploads it immediately, easy peasy. Considering you can have multiple tabs open, with all your assets handy, this def makes the live changes significantly faster and easier.
As an opinionated note: Honestly don’t even bother with the Photoshop template (you should be using Illustrator/vector anyways for that). Its a waste of time, you can code it up faster with HTML/CSS/JS then go back to Adobe for granular assets like graphics certain regions. Live view will always be more accurate, Photoshop will always be a “suggested look” that must be “bent” to fit web.
Attribution
Source : Link , Question Author : Jakub Arnold , Answer Author : dhaupin