A Design Dossier: For Hexathon and Beyond.
As the internationally acclaimed techfest GraVITas ‘23 organised by Vellore Institute of Technology peeks around the corner, We at the Google Developers Students Club of VIT are thrilled to announce our contribution to the fest.
So mark your calendars for 22nd September, 2023; as we bring to you the second edition of our flagship 24-hour design event: Hexathon’23.
What’s Hexathon, you ask?
Picture a hackathon but make it all about the design of the solutions. It focuses entirely on the UI/UX aspect of development, making it all the more beginner friendly. You don’t need to know how to code to win.
What sets Hexathon apart is its unique marketplace system. Participants aren’t restricted to solving a specific problem statement; instead, they have the liberty to select the challenges that most resonate with them. Upon entry, you are given Hexcoins, a virtual currency that’ll allow you to “purchase” these problem statements and various design elements. Kind of like in Masterchef, you get to choose your ingredients and make the best out of what you‘re able to get, so budget your Hexcoins wisely.
If you’re as excited as we are, now is the time to secure your spot! The clock is ticking, and seats are filling up fast. You can participate in teams of 2 to 3 people. Registrations are already open, so call your friends up right now and head over to the GraVITas website to complete your registration!
In case you’re still on the fence about registering because you lack experience, that’s not a reason to not try. I’d like to quote Richard Bach, my favourite author, who famously said ‘Argue for your limitations and, sure enough, they’re yours.’ So, if you’d like to give it a try but have no clue how design works, chill. I’ve got you covered.
Getting Started with UI/UX:
At its core, UI (User Interface) focuses on the aesthetics and visual elements of a product, while UX (User Experience) dives into the overall feel and the user’s journey through a system. To begin, one must first keep an empathetic mindset. The essence of UI/UX design lies in understanding and predicting user needs and behaviors as they interact with a product. Immerse yourself in the digital world around you. Analyze apps and websites you frequently use: What makes them appealing to you? Observing existing popular designs can provide invaluable insights.
Moreover, you should try and seek inspiration from platforms like Behance, Dribbble, and Pinterest; platforms that host a plethora of designs from professionals worldwide. Look for and join design communities, attend workshops, and conferences to connect with experienced designers and gain invaluable wisdom (and maybe internship referrals too xD).
Once you’ve soaked in the basics of UI/UX; like a painter needs more than just an idea to create a masterpiece, a designer needs the right tools to bring their concepts to life. Design isn’t merely about aesthetics; it’s about creating an intuitive, seamless experience. This is where powerful tools like Figma, Sketch and Adobe Illustrator come into play. Think of them as a digital extension to your creative mind. Like a wise man with a thing for mushroom clouds once said, “Theory will only take you so far”, so let’s dive into real applications using these platforms.
The Dogmas of Figma:
For those stepping into the world of digital design, stumbling across Figma is a rite of passage. Its cloud-based interface ensures that you can start designing without any annoying installations, making the onboarding process a breeze. Unlike some platforms that come with a steep learning curve, Figma’s intuitive interface ensures that you spend less time figuring things out and more time actually designing.
Why choose Figma over others? Beyond its beginner-friendly interface, Figma provides a vast design playground without overwhelming the user. From designing responsive layouts that adjust to various screen sizes to crafting prototypes with interactive transitions, the possibilities are endless. But what truly makes Figma the first choice for designers is its plugins. Want to create dynamic layouts? There’s a plugin for that. Want to create a sleek, animated button for a web page or a swipe animation for a mobile app? Figma’s got you covered. And if you’re ever in need of inspiration or a quick start, the Figma Community is full of templates and design components shared by designers worldwide.
One of Figma’s standout features is real-time collaboration. Imagine Google Docs, but for design — where multiple team members can jump in, design, and comment simultaneously. This feature is a game-changer for team projects, ensuring everyone stays on the same creative page. Additionally, Figma’s Auto Layout automatically adjusts spacing when you’re adding or removing elements, ensuring consistent padding and alignment, so you never have to worry about struggling in that space. Another pretty feature is previewing your designs in real device frames (like iPhone, Android devices, or tablets) which gives you a realistic preview of how your design will look in the real world.
The Standards of Sketch:
Unlike browser-based platforms, Sketch is a macOS-exclusive tool that rewards its users with powerful performance right from their desktop. Its crisp, Apple-like interface gives you that premium feel immediately and lets you focus on what really matters — bringing your design visions to life.
So, why Sketch? First off, let’s talk about “Artboards,” Sketch’s answer to individual design canvases that can hold everything from mobile interfaces to complex web pages. One file can contain numerous Artboards, each tailored for different devices, resolutions, or user states. This ensures that you can manage multiple viewpoints of a project without sifting through endless tabs or files. While real-time collaboration isn’t native to Sketch, its companion cloud service, Sketch Cloud, offers a functional workaround. You can upload your designs, and team members can comment, inspect, and even download the Sketch file to make adjustments. This ensures that you’re not designing in isolation, even if you’re not designing in real-time.
But where Sketch truly becomes your design playground is its insanely handy plugin ecosystem. Ever need to populate your app mockup with real, meaningful data in just a click? With plugins like ‘Craft’ by InVision, you can do that effortlessly. Need to convert your flat icons into cool 3D illustrations? ‘Sketch2React’ allows you to play with depth and perspective without needing to be a 3D artist. You can also use the “Mirror” functionality to preview your designs on actual devices in real-time, like in Figma. This is THE feature for those keen on fine-tuning UX, providing a realistic representation of how the end design will appear on different devices.
The Intricacies of Illustrator:
Adobe Illustrator has a way of making beginners feel right at home. Unlike some tools that are crowded with complex features, Illustrator is known for its clean and user-friendly interface, where everything seems to be in the right place. At its core, Illustrator functions as an artist’s canvas; except on their laptop instead of actual fabric.
Adobe Illustrator’s pen tool helps you sketch as naturally as you would on paper (though I couldn’t draw a straight line on paper to save my LIFE). One of it’s most intriguing tools is the Image Trace feature. For beginners and even seasoned designers, this tool is nothing short of a magic wand, bridging the gap between traditional and digital artistry. Using this feature a hand-drawn sketch, a printed logo, or even a photograph can be transformed into a crisp, scalable vector image in Illustrator. Need to make images that look good on both a business card and a billboard? The platform’s focus on vector images means your designs won’t lose quality at ALL, whether they’re on tiny icons or huge banners. With Illustrator’s gradient tools, you can blend and mix colors, giving your designs a fresh and dynamic look. And it doesn’t stop there; Illustrator also lets you play with words — not just writing them, but styling them in ways that complement your designs.
Now it should be noted that while Figma and Sketch are used for both UI/UX as well as illustrations, Illustrator is only used for the latter. Of course you could illustrate UI, if you love pain.
The Conclusion:
I am fairly certain once you get acquainted with how these tools work and let your creativity flow, you’re going to make the life of a frontend developer VERY hard one day. Honestly, I’m counting on it.
Goodluck designers!
