17

Ask DN: What is your workflow with building a large responsive website in Sketch 3?

over 6 years ago from , Designer

I am in the process of redesigning an ecommerce website into a responsive website and as you can imagine there will be hundreds of screens to design. Static pages, product grids, product pages, cart, checkout, account, etc.

How would you set this up in Sketch 3? My thoughts are to create 1 document that uses Pages for each screen and Artboards within those Pages to represent the different screen sizes (Desktop HD, desktop, tablet and phone.) Is this a good approach to use 1 document for the entire site which will include a shitload of pages? Or should I separate the different screen sizes in different documents?

Thanks for the input in advance.

20 comments

  • Leo Succar-FerréLeo Succar-Ferré, over 6 years ago (edited over 6 years ago )

    I use pages for different "sections" of the site. One page for signup flow, another for login, another for account settings, etc. I like to have the first artboard of each page be a low-fidelity grid/layout/baseline of the entire site or even the initial wireframe(s) of that section.

    However, as mentioned here and around, while Sketch can keep the file size for a complex document incredibly small (see: http://bit.ly/10LXGRH, note the file sizes), it can start to hang and bog down when too many large bitmaps are involved and especially if they're repeated. This is my experience.

    Whenever I notice a performance hit, I take that section and make a new Sketch doc and paste it right in. You can go pretty far before having to do this.

    • project-ui.sketch
    • project-ui__some-heavy-section-that-i-isolated.sketch
    • project-ui__another-huge-section-that's-maybe-bitmap-heavy.sketch

    As for responsiveness - I usually put a mobile-sized artboard(s) next to (or above) it's desktop-sized counterpart.

    4 points
    • Brennan Smith, over 6 years ago

      Great information and I assumed the bitmaps would have some impact but hearing it from you confirms this. I like your idea about the low fidelity layout on the first artboard and I have already rearranged the artboards to be mobile first. Thanks Leo.

      1 point
  • Eric PosenEric Posen, over 6 years ago

    I do separate documents for things like landing pages vs webapp view (logged in), separate art boards for each screen, and separate pages for each device.

    2 points
  • Jonathan YapJonathan Yap, over 6 years ago

    Its always better to split them up into smaller chunks, just like how you would do with any features. Running a huge e-commerce website, it's tempting to put all the UI in one sketch file, seeing they made it so easy to manage. It's not the best method however, because it's harder to maintain in the long run.

    Largely, this will come down to your own workflow and requirement. Are you doing design only or will you be responsible for building the front end as well?

    I found the best method to manage this is start with a master template - style guide. Then duplicate them into smaller projects when you need them, e.g. check out flow, search, accounts. That way, its easier to manage and do multiple iteration of the same project.

    1 point
    • Brennan Smith, over 6 years ago

      Hello Jonathan, Thanks for your input and after reading through all the comments here, I will be dividing the project into sections with a master template like you mentioned. I am doing all of the design as well as working with a team on the frontend and I will be discussing the workflow with them in scrum this morning.

      1 point
  • Frédéric AudetFrédéric Audet, over 6 years ago (edited over 6 years ago )

    One file for the whole UI.

    I then create multiple pages for the different sections of the site. I always try to avoid bitmaps, use only vector.

    First page will be components, then symbols, then all the sections of the ui separated by their own pages.

    Components as all the elements. This is the visual style-guide. Symbols include all ... symbols, well everything that's being reused all over the interface.

    Our latest project is a 65mb file and it's very fast. Sketch 3 did an immense job with speed with the new version.

    We're starting a very big UI responsive app for a large bank in Europe soon, probably over 300 pages with options, etc. The initial version was made under Photoshop, which made it really hard to maintain and files became too heavy. It took time, but we managed to made them understand Sketch was going to be the best option for the redesign.

    Their developers are under Windows, so we've been testing Avocode and looks very promising. There are still many bugs with big documents (that might cause file segregation), but we'll still try to put everything within one file. It's better for consistency.

    Voilà.

    1 point
    • Brennan Smith, over 6 years ago

      Thanks for sharing your workflow. The developers here are on Windows working in MVC and I will look into Avacode to streamline the process.

      0 points
  • Account deleted over 6 years ago

    I'm designing a giant tool right now and I find that a new Sketch file for each section of the tool is best. For example - a section for analytics, a section for a signup flow, a section for an overview.

    Within each of those files my pages are as follows:

    • Styles (all symbols, type style, and graphic styles in an easily editable place)
    • Scratch (where messy elements get built and ideas go to die)
    • Round 1/Round 2/Round 3 (bulk of work goes here in in a UX flow type of format with multiple artboards)
    • To Share (a clean place to copy paste whatever I'm sharing from the round folder for a meeting, jam session, etc.)

    Still hammering out my structure but this is where I'm at now. In my experience, trying to have all portions of an app in Sketch leads to slow response times, crashing, and bugs.

    1 point
  • Keaton TaylorKeaton Taylor, over 6 years ago

    I set mine up almost exactly how you're explaining. I go through and define a bunch of custom things in the symbols page per project and save it as a template to start from. After I pick out type, design or find icons and establish colors Is et everything I can up as styles and start there.

    but yeah I'm building out a large scale ecommerce thing right now and doing more or less the same thing.

    1 point
    • , over 6 years ago

      Hey Keaton, thanks for the response. Do you have any issues with the document being to large to handle so many pages? Any crashes or hangups that I should be worried about? (I am working on a 2014 macbook pro.) I figure if I start to experience any issues I would then break up the project into several different docs but I want to avoid doing so.

      0 points
      • Keaton TaylorKeaton Taylor, over 6 years ago

        I'm using an iMac that's quite old (mid 2011) and have a propensity to forget to flatten masks to but maps and I've not had a Crash in some time. I routinely work with 7- 10 pages each with at least 3 art boards, generally its 6 though.

        0 points
  • Vladislav ArbatovVladislav Arbatov, over 6 years ago

    It heavily depends on your machine but in my experience Sketch can't handle large documents very well.

    1 point
  • Alejandro PrietoAlejandro Prieto, over 6 years ago

    I know I'm not answering the question but I'm feeling compelled to ask: why would you design a responsive website with a non-responsive tool in a non-responsive medium? Why not designing directly in the browser?

    0 points
  • , over 6 years ago

    Thanks everyone for your real world experiences and workflows with Sketch 3, this was very helpful.

    0 points
  • Ben S, over 6 years ago

    I'm in the process of redesigning a huge piece of software that, while not responsive, presents a lot of the similar challenges you're facing. For me, a methodology like Brad Frost's atomic design is priceless.

    Given that I've already sketched out wireframes on paper or a more coarse tool like Omnigraffle, I split my Sketch file into separate pages, one each for 'patterns', 'templates' and 'pages'.

    The 'pages' are where I rough out the visuals of the entire screens - how the header, footer and different layouts all play together. I then abstract this out into templates with a separate artboard for each. As I build these, I abstract out the patterns into the constituent atoms, molecules and organisms that Brad describes in the Patterns page with an dartboard for each type.

    By starting holistically soon the patterns begin to build the templates and you find you are designing fewer templates/pages - I actually have moved back to Omnigraffle for them as I can churn out wireframes much quicker there, while everyone knows what each control or pattern should look like.

    For me its about getting just enough into Sketch to inform the design so it can be built as soon as possible - my goal is for the HTML to be the canonical design, with only unknown stuff being done in Sketch - don't worry about your design files getting out of date, just throw them away and start again with the new features or pages.

    0 points
  • George Kedenburg IIIGeorge Kedenburg III, over 6 years ago

    Be careful of putting all your eggs (screens) in one basket (file). If that file gets corrupted somehow, then there goes your entire site. Idk if its paranoid of me but I err on the side of caution when it comes to something like this.

    0 points
  • Bardan Gauchan, over 6 years ago

    I've just started designing for a big web app and my process is very similar to the ones listed here. Different sketch files for different sections of the site - landing, settings, etc. Pages for sub sections, diff versions of subsections like v1, v2, etc., playground page for testing new ideas for that section. And finally, artboards for different screen sizes.

    0 points
  • Ryan Hicks, over 6 years ago

    Sketch is alright for large documents if they are absent of images. If not you could get yourself in trouble with incredible load times. I haven't used sketch in a few months otherwise I'd tell you what my process is/was. I've been using illustrator as of late as it handles everything with a lot of ease even with nuisances. I typically isolate each file with a section of the website or a vertical part of the navigation. Within that file are artboards of different pages for that vertical portion of the website/app.

    Just find something that makes sense to you, your team, and if someone were to come on in the middle of the project they could understand the structure.

    0 points