Bringing Web Layouts to Life with the Sketch App

Knowledge is a core value at SCG. This weekly column highlights something interesting learned recently by one of our team members. We hope you find it intriguing, relevant and informative.

Part of our web development workflow here at SCG involves presenting wireframes before moving on to design and development. It’s an important step for us as designers/developers because it essentially creates the bones of a client’s website – where things go in the hierarchy of a page, how things align and so on. Unfortunately, the document that is created is somewhat underwhelming – it’s black and white, covered in boxes and mostly devoid of any kind of branding or true copy. Most clients are eager to see something more interesting and vibrant. That’s where the Sketch App comes into play.

Sketch is a design toolkit that will allow us to quickly create a design implementing the layout set forth by the wireframe. The program is very intuitive to anyone familiar with design programs like those in the Adobe Design Suite (i.e. Photoshop or Illustrator), with similar layered documents – but these are built for websites and applications. This is key for working within the constraints of web design, since we want the Sketch design to easily and quickly translate into code.

Efficiency and resources give Sketch a clear edge

Where Sketch really shines is a cool feature called Symbols. In a lot of websites, different pages share elements. Check out the home page of your favorite website and see all of the blocks of content that are pretty much the same block, just with different words or images or calls-to-action. In Sketch, we can create a single Symbol for those shared elements and reuse it as many times as we want throughout the document, overriding elements in each instance if necessary. This eliminates needless recreation of a shared element and allows us to rapidly move through a page layout. Have a change to the symbol? Just make tweaks to the master Symbol and they are reflected in every instance.

On top of the intuitive nature of the app, Sketch features a huge knowledge base that answers the most pressing questions users may have, as well as a deep plugin set that allows for even easier pixel-perfect designs.

Sketch is an awesome and powerful app that we are super excited to add to our toolbox. With Sketch, we can get the most creative work to our amazing clients swiftly, then move forward into development and really bring our work to life.

Tagged with

Robby Cecil

Robby is a print and interactive designer, with an ability to provide production and video editing services. A University of Minnesota grad, Robby earned a B.S. in graphic design and has an innate desire to learn more about the creative industry and the world […] Read Bio »

Subscribe

Click below to get all the crazy good marketing insight from SCG delivered straight to your inbox. We won’t bug you too often and we won’t share your email. Promise.