It was an evening of design and development, learning and inspiration. Recently, the tenth edition of the Dribbble Meetup (also my first ever) took place at Workshop 17, at the V&A Waterfront, Cape Town.
What is Dribbble?
Available since 2010, Dribbble is an online community for showcasing and networking graphic design, web design, illustration, photography, and other creative expressions.
The Dribbble Community has been active in Cape Town for the past decade. To commemorate the tenth meetup hosted by Isoflow, the team at Studio Bolland, and Kapeesh Manilal from Responsive Digital gave a presentation on “Pixel Perfection – A designer-developer discord” and “Speed Projects”.
It was great to learn about how Kapeesh both tackled and achieved Frontend pixel perfect designs and inspiring to have met so many great people from the Dribbble community.
Pixel Perfection Recap
Pixel-Perfection and the relationship between developer and designer helped me to further develop my understanding of all things design.
The first part was all about having a ‘good’ eye and being able to distinguish the difference between print design and web design. While web has made huge strides when it comes to breaking “box model” popularised by Twitter’s Bootstrap framework, one thing is evident; Print designers are acutely aware of the true size of their works. Digital designers rely heavily on tools to assist with size and object relationship. A few rounds of the game https://pixact.ly/ would show you exactly how reliant we are on tools to achieve pixel accuracy.
What kind of tools are designers and devs using in 2018?
At Rogerwilco our designers and developers use Invision to collaborate, but there are plenty of assistive tools to relay design with accuracy between teams, such as Simpli, Zeplin and Marvelapp. Most of these assistive tools integrate with designer heavy-weights like Photoshop, Adobe’s latest web design tool Adobe XD, my personal favourite, Sketch and one of the latest cross-platform, collaborative design tools; Figma.
With all these great tools, we often forget the good ol’ browser.
Kapeesh highlighted some key browser plugins to add to everyone’s chrome:
Page Ruler - Use this tool for accurate dimensions and positioning, and measure elements on your site.
Perfect Pixel - Overlays a semi-transparent image over the top of the developed HTML for comparison between them.
Pesticide - This extension outlines the CSS box for each element for pixel- perfect alignment.
Chrome’s latest update gifted us with a built-in colour picker which allows quick changes to colours and overlays on the fly.
With seamless SVG animation, CSS filters and fluid flexbox grids and we look forward to what next year’s tech has in store for us.
Studio Bolland’s gave us a visual peep into their “Speed Project” Fridays. Every Friday their team takes a break from client work to come up with great content to post on their social media feeds.
The projects take around four hours and teaches the team rapid conceptions (some creatives can get lost at this stage), time management skills and quick executions. The winners work gets posted at the end of each Friday. In this spirit, Studio Bolland ran a competition at the Dribbble meetup, based on their “SpeedProjects”.
The brief was to capture the Cape Town creative. The best images would be“gif” created and posted on their Dribbble account.
Here is the first winner's idea: https://dribbble.com/shots/5431559-Run
Title: Run
Artist: Mitch @reddprime
Runner-up’s idea: https://dribbble.com/shots/5431571-Pretty-Dead-line
Title: Pretty Dead(line)
Artist: Anhest @NovahK
The event was a great success. I believe that the near future for the local Dribbble Community looks bright. Thank you to all who participated and hosted the meetup. If you would like to meet us at the next meet up sign up here at Meetup.com
See you there!
Need Assistance with Digital Strategy?
Rogerwilco’s team of strategists, business analysts and data scientists is here to help.
