22 comments

  • Jim SilvermanJim Silverman, over 9 years ago

    I sat down and sketched all the new pages and ideas on paper, before making the final wireframes in Axure.

    well, no shit then. decent Axure wireframes turn Photoshop into a coloring exercise.

    11 points
  • Ben Henschel, over 9 years ago (edited over 9 years ago )

    I'm tired of reading "design in the browser" articles. If it works for you, great. But it doesn't for me and I'm not going to feel bad about it, or feel that I'm falling behind the times, or not a real designer.

    I don't even like sketching that much. Occasionally I sketch out illustrations, but not really for layouts. Honestly it's too slow. I'm probably just not very good at sketching, but it's a lot easier for me to run through some ideas in my head, quickly create something in PS and then duplicate it if I want to try some variations.

    If I'm designing something that I'm going to code, my mockups are not perfect. I don't waste time making sure everything is perfectly spaced and aligned correctly, because I'll make it perfect in code.

    But if I'm designing something that someone else is coding (like at work), I usually make it pretty perfect, because developers don't always know that you thought it was a given that something should be perfectly aligned, centered or have 30px of spacing between each element etc. But even that doesn't take long because I have create a style guide and I have a psd with all our normal elements. If I'm adding a feature to an existing screen, I take a screenshot of it and then add it in. It might not be super flexible, but it's quick.

    So what ever way you do things, if it works, is the right way.

    7 points
    • Marc EdwardsMarc Edwards, over 9 years ago

      I completely agree with this, especially:

      • If it works for you, that’s awesome. Doesn’t mean it will for me.
      • I’m not very good at sketching and find AI and PS way faster.
      • Duplication for quick experimentation is great. Love doing that.
      • Mocks for things I’ll code are usually rough.
      • Mocks for other people are usually pixel perfect.

      Is it such a crime to want to use a visual, mouse driven tool to design?

      If I'm adding a feature to an existing screen, I take a screenshot of it and then add it in. It might not be super flexible, but it's quick.

      It’s pragmatic, and doesn’t conflate the best design direction with technical constraints. I think that ultimately means you’ll end up with a better result, and cleaner code.

      So what ever way you do things, if it works, is the right way.

      YES.

      3 points
  • Catalin CimpanuCatalin Cimpanu, over 9 years ago

    I double-dog dare him to take a more complex project on without Photoshop. Especially when he's working with a team of developers that don't share the same vision he did.

    7 points
    • Lucian MarinLucian Marin, over 9 years ago

      I designed this entire project http://lucianmarin.com/lira/ without Photoshop, without Bootstrap and even the logo is made in pure CSS. And yes, I worked with a team of 10 people.

      You don't need to double-dog dare anybody. I wish there was a downvote for comments like yours.

      16 points
      • Catalin CimpanuCatalin Cimpanu, over 9 years ago (edited over 9 years ago )

        You don't need Photoshop for silly pages with form elements. And that project is not "complex" just because it has a lot of data on it.

        This article is trying to prove you can design a basic page without PS. Last time I checked every person with some brains can sketch something on a paper and then code it. The problems arise when you need multiple page types, layouts, various styles, and on top of this your team members don't all code in the same room. Try coding a sketch paper design with someone from the US and Australia at the same time. Try scanning and sending that paper and getting feedback that they don't know what your circle and squares mean. There's a reason why PS is useful, and it's not for the example portrayed in this article.

        Downvote this! and then downvote your bragadacious, self-promotional post. Your comment tells me you haven't even read the original article.

        11 points
        • pjotr .pjotr ., over 9 years ago

          Your points are well stated and if you don't already have a design team that is working sans photoshop/sketch/whatever then just ditching those tools is going to be a huge page in the ass.

          Having said that I'm currently molding a process at the startup I work for where design is 99% based in the browser. Granted we are a very small team and heavily engineering focused so it's a bit easier to take this approach. We are also a remote team so the tools we use to design and stay connected are extremely important.

          2 points
  • Daniel WinterDaniel Winter, over 9 years ago

    is it just me or does every bootstrap website look the same? I can't stand looking at them anymore. I love how small frameworks like purecss.io try to stay away from anything that creates the look and feel of a website. Bootstrap and Foundation just dig in way too deep with their predefined panels and stuff. So that way all the website kinda look the same.

    3 points
  • Cory W.Cory W., over 9 years ago

    Stay tuned for my upcoming article, "How I built a website with a stick, a glass of water, and a tablespoon of soil."

    3 points
  • Joe Blau, over 9 years ago

    Wow what a great explanation of the process. I really like how everything cleared up and became a more pleasurable viewing experience.

    3 points
  • Giulio MichelonGiulio Michelon, over 9 years ago

    So what

    1 point
  • Mikus RiekstinsMikus Riekstins, over 9 years ago

    Super useful article. Thank you.

    Have been pushing towards similar process in agency that I work in. Interesting to see how important wireframes become when you throw out the middle-man (Photoshop). This method also shows the client how it’s more about function not the visuals.

    I noticed you seem to have very fragmented SASS file structure, carefully divided between files. You have specific idea how you go about structuring stylesheets or it heavily depends on the project?

    1 point
  • Lawrence SmithLawrence Smith, over 9 years ago

    I wrote something similar around a year ago : https://medium.com/what-i-learned-building/76f8d1e67a4d

    I feel my processes have moved on a lot since writing this. In other projects, I ran into some problems designing in the browser. My way of working is much more lean now, and changes for every project to best suit it's need. For me, that is the secret: it's about doing what's right for the project and not relying on a pre-defined process because it worked for your last project.

    Some pointers below...

    1. The big idea is still important. When you spend time prototyping, this is easy to forget. Working with frameworks like Bootstrap can be a restraint on creative thinking. Ideas are usually created on paper/whiteboards by groups of people. Don't get locked down in copying and pasting code from pre-made components and expect innovation.

    2. Remember what your being asked to produce. If you deliver a working front-end instead of a set of flat PSD files then great, this is awesome for the client to test the experience and functionality on multiple devices. But if the client then skips paying for a front-end build because they feel they have something that is good enough, make sure you are not liable for a lower standard of code. If they ask for a new feature, you then need to code more and this might be fairly complex, time consuming and require help from an external team. Doing it in a design programme would then be much quicker and easier.

    3. Your code would probably be a much higher standard if you built your front-end from finalised designs. Prototyping is essential in my opinion, but don't get this mentality mixed up with final code.

    4. A lot of developers understand Photoshop much better than any other design programme. Although it may be more ideal for you to use Sketch or Ai, this isn't always an option.

    Tweet me @lawsmith_

    0 points
  • Darth BaneDarth Bane, over 9 years ago

    At Tastebuds.fm we stopped using Photoshop a long time ago for design. Everything was done in-browser (except for some logos that had to be bitmap). It's really not a big deal to circumvent the Adobe suite or even Sketch nowadays.

    I designed the entire Tastebuds iOS app in Sketch, but of the things I designed on the actual site (I didn't have time to do all of it before I left the company) nothing on there touched Photoshop.

    0 points
    • Marc EdwardsMarc Edwards, over 9 years ago

      It's really not a big deal to circumvent the Adobe suite or even Sketch nowadays.

      What’s the motivation or benefit in doing so? Purely financial?

      0 points
      • Darth BaneDarth Bane, over 9 years ago

        For me, Photoshop/Sketch is just one more step in the process that isn't necessary in the workflow. It doesn't handle repetitiveness well (e.g. lists or foreach type items), and it won't tell me how it feels navigating the site or interacting with it.

        When we created the new profile pages at Tastebuds I created a contact sheet of six different lead examples (the top bit: cover image, profile image, user meta/actions) so we could decide on a winner. Since it was all HTML/CSS, even the investors could play around with the interaction of each idea without having to guess the end result.

        Photoshop/Sketch only tells me aesthetics, what it will look like. It won't tell me how it feels interacting with it, won't give me an accurate representation of an actual website. Will this font look good, is this spacing natural when scrolling, and so on.

        The financial benefit of going straight from paper sketch (or idea in head) to coding is just a bi-product.

        0 points
        • Marc EdwardsMarc Edwards, over 9 years ago

          For me, Photoshop/Sketch is just one more step in the process that isn't necessary in the workflow.

          I think there’s many workflows that work, but for me, I see Photoshop and other design tools as very rapid ways to explore ideas. And I personally find them way, way faster than writing code, and then I like that I can take a look at the near final design, and work out the best approach for the markup.

          The times I have jumped straight into code, I feel like the design has suffered (changes are slower and harder) and like the code has suffered (you often need to refactor many things at the end if you want neat code).

          Since it was all HTML/CSS, even the investors could play around with the interaction of each idea without having to guess the end result.

          Again, there's many good approaches, but I just use different tools if we need animation or interaction prototyping. Hype works well. As do many other tools.

          The financial benefit of going straight from paper sketch (or idea in head) to coding is just a bi-product.

          Maybe another difference is that I rarely sketch on paper. I find Illustrator way faster and more flexible. It's great to be able to duplicate and entire design and tear it apart without having to redraw the entire scene.

          There’s many great solutions to these problems. :)

          0 points
          • Darth BaneDarth Bane, over 9 years ago

            For me it's the opposite: code is quicker than Photoshop, and I use my own boilerplate setup so the code is always neat right from the start. We never re-factored code from design to production, it was always the same code (plus the Rails implementation of course).

            To me it sounds like a long way around trying to emulate in-browser behaviour by using third-party services like Hype. The time spent learning the software and creating animations is time that could be spent coding the actual modules/page/site.

            But again, all this is down to taste. I do find that it's a good selling point when getting freelance contracts to be able to provide a "live" version of the latest design that the client can interact with and give direct feedback on.

            0 points