How can I quickly design websites without being too detached from the actual web platform?

Question

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 1

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.

Answer 2

HTML is itself quite slow

That's debatable. I'd say production-ready presentation layer code takes longer to create than a quick sketch in Illustrator, but you don't necessarily need production-ready code to design in HTML, either.

There really is no alternative between static mock-up tools like Illustrator and Photoshop and actual markup.

There are tools like Axure and such, that claim to allow interaction design to take place, but like you say, it's still quite detached from the actual final product and, IMHO, can cause more problems than it solves.

So my question is, is there an alternative to the above mentioned?

No. Not really.

If you want to design web interactions, you need to be working in HTML, CSS and JS.

Tools like Axure or AfterEffects, while impressive in their own right, can be used to communicate concepts, but all come with their own baggage in terms of interpreting interactions. What you can make in a non-HTML based tool is not necessarily what you can make with HTML.

Answer 3

I don't "design" in any application. I design on paper with a pen/pencil.

I will then use Illustrator to create cleaner wireframes for presentations.

I then move to using Foundation directly when starting the visual build stage. I dislike Bootstrap for the very reasons you point out -- you have to remove too much to start with a clean slate.

By using a base version of Foundation, I can incorporate all of the responsiveness without any visuals. That is the sweet spot for me. I start with the Foundation Core, then modify the core to my standards (call out base button styles, web fonts, add standard jquery functions, add common base CSS I use that Foundation may not have, etc.) Then save that core as a starting web dev template. Then I merely copy that core and start coding. I could do this with Bootstrap, but due to the nature of Bootstrap it would be a far more time-intensive task and require much more care in naming conventions.

I disagree that designing in a browser is slower, I don't think it is. The visual choices regarding sizes and placement should have all be ironed out before I launch a text editor for coding and by that time it should be a matter of dropping elements into their locations. I also find it much faster to jump back and forth between and image app and the code to create assets rather than spending a great deal of time getting everything looking perfect in the image app, only to have to address differences when made live in the code.

I find designing in browser based on a solid wireframe eliminates much of the issues with non-organic display which happens when trying to do too thorough of a mock up in some image editing application.

Related: Is there an advantage to doing a full image mock-up versus diving straight into writing the HTML/CSS?

Answer 4

To create the best possible design experience, design in the browser itself. And not just one browser - all of them across all devices.

There is no better way to determine how something will look or function than actually testing it in that browser. By doing your design and development in the browser itself, you're doing this throughout the entire process.

This means you use a text editor (like Sublime or Atom) to manipulate code directly. With time and practice, you'll get faster and faster at this. Using libraries and frameworks built by others can help improve efficiency by preventing you from starting with nothing each time if used correctly. After you have made some projects, you'll then have a repository of older projects that you can also pull from.

But, of course, you can't write it using all browsers on all devices on the same time. So, at the beginning, decide what devices and browsers you choose to support (most the time these days you can support most all devices down to IE9 fairly easily) and write it using one of those. I recommend Chrome, but Firefox is a close second. Then, periodically through development, test using other browsers and devices - all of them that you own - and make sure that it still works correctly. By doing this periodically, it keeps the possible issues localized and gives you the ability to more quickly find the issue than if you waited until the end to do so.

As for how to design in the browser, the best way is to start rough and dirty. Don't make it pixel perfect. Get what you think the basic layout will be working (not pretty) and see if it actually works. If it doesn't work, scrap it and move on to your next idea. Once you know that it works and that it's the best way, then move onto making it look prettier and functional across all platforms. Using this method can save you a lot of time and heartbreak down the road due to cross browser issues.

I highly recommend using a mobile-first design approach, where you focus on the mobile version prior to the main version. That is not to say that it is more important than the full desktop version, just that designing the mobile version first makes the entire process easier because you don't have to worry about what parts to remove, you can just make use of the larger screen and better capability that desktops have, adding features instead of removing ones.

As you mentioned, using your browser's development tools greatly speeds up the process. You can live edit the styles and HTML which save a lot of back and forth between code and the live site. I recommend having the browser open next to your code so you can look and edit both as needed.

The biggest thing is practice. If you know exactly what you're doing and how you can do it, the process is fairly fast. There will always be problems when you're developing, but those are part of the process and to be included in any time estimate.

Hope it helped.

Answer 5

I think what you want is a website builder tool like Webflow or Divshot. It brings the best of both worlds: design flexibility of Photoshop and the HTML/CSS result will be rendered in browser exactly as same as the way you intended when designing it (because basically you are creating inside a browser).

There are several options such as Webflow (webflow.com), Divshot (divshot.com), or Froont (froont.com). They are providing free plans with some limitations.

Just give them a try and see if this kind of tool is suitable for you. And if you need more insight, David Walsh posted a great article about this.

Answer 6

That's a great question, the chicken and the egg problem - how to design web site that can be easily and properly coded without following templates and having everything look like Google Design. I think the best you can do is follow a set on standard practices - 12 column grid, default form elements without additional styling, non-aliased live text, no fractional width in text properties, etc. There's no one set approach that would work long term for everyone, it's really finding the tools that work for you and your workflow.

As you build your PSD layout, you might want to run it through Web Preflight to make sure your artwork is keeping with best practices.