EPISODE:
3

  

HOW TO CREATE AND SHARE RESPONSIVE WIREFRAMES IN SECONDS

 
Way back in Series 1, Episode 3, DISRUPTING THE AGE OLD WEB DESIGN PROCESS, we talked about MOBLE's initial intention to streamline traditional website building processes.

We deconstructed that age old process, where you would design wireframes in Photoshop, Sketch or prototyping tools, then move on to the Visual Design, before finally getting started with the code. When we created MOBLE we knew that we could save serious amounts of time by just jumping straight to code and we set about developing our own framework and with it the hundreds of design layouts that are available on MOBLE today.

Series 3. Episode 3: How to Create and Share Responsive Wireframes


To MOBLE there really is no distinction between a Wireframe, Visual Design, and Code. If you want to see a Wireframe you just simply drag the layouts that you're considering on to the page, swap around the order that you like, then flip into Wireframe mode. Since all Layouts are responsive you can instantly visualise Layouts on mobile, tablet and desktop. Imagine the time this saves mocking up Wireframes for three different device layouts for every screen, then having to do it all again when you design your Visual Design Layout in Sketch or Photoshop. 

When we created MOBLE we felt that that process of Wireframing was becoming redundant and this is why we invented Dynamic Layouts. Now when we run design workshops we create Wireframes on the spot with our clients, the process is often completed either during or shortly after the initial workshop. Sometimes our clients just get stuck in, drag and drop layouts and instantly sign off a prototype.

I highly recommend reading Workshop Article and in Series 1, Episode 4 HOW TO EXECUTE WEBSITE WORKSHOPS, LIKE A PRO. Here we share our steps for outrageously effective workshopping. Don't forget, every MOBLE website comes complete with the Workshop Software, so you can record metrics with clients and design based on quantified numbers to remove all subjectivity between team members. It truly is an effective process for both small and large organisations.


Sharing Your Wireframes

It has been suggested that MOBLE design a collaboration tool for Design and Wireframing. We love this idea so watch this space will aim to get this out to you at some point in the future. Though sharing a wireframe or any design layout is really simple though there are a couple of things to keep in mind:

  1. Click into Wireframe mode.
  2. When you're ready to share go to the top right an click 'Save and View'.
  3. A new tab will open showing the Wireframe in the browser.
  4. Now copy the URL and share it with your team.
  5. IMPORTANT Before you share, we would recommend flipping your page into 'Hidden' mode, this can be done in the Page Settings are or in the main Pages area. Hidden mode means that anybody with the link can see the page e.g. the company CEO etc. If you prefer to keep the link private by keeping the page in 'Draft' mode. To see the page people will have to log in to you can set up new team members in the Team area found via the Main Menu.