Polishing and working with UI/UX design can feel intimidating and like we definitely need a Designer in our team to get out a production-ready app design. In this series, you will be able to learn key tools, resources, and workflow you can use to start building clean and immersive app designs as a Developer.
The agenda for our series of articles will be as follows:
- Part 1: Defining our Workflow and Toolkit.
- Part 2: Working with Color and Typography
- Part 3: Iconography and Magic Numbers
- Part 4: Elevations and Dark Theme
- Part 5: Guiding our Users and Managing App States
Before starting our journey into beautiful designs, it’s always good to start with a Use Case in which you can practice and inspire yourself to give that extra effort, in our case, we will be using my recent work on the open-source GitTrends App!
About GitTrends
This awesome project was created by a great friend of mine Brandon Minnick, who loves to contribute to Open Source and working with everything Xamarin related, he had trouble keeping track of which repos were receiving traffic and which ones were not in his GitHub account. For example, he discovered that a repo he hadn’t updated in +2 years was still getting 10-20 views per week.
With GitTrends, he can now stay on top of which repos are trending and ensure its code doesn’t go stale!
When he reached out to me, asking if I would like to be part of his beta testers for his upcoming launch of the GitTrends app in the stores, I was more than excited to take part in it. The first time I saw the app and code I was really impressed with all the hard work he had put into it in the past year, packing in all the best practices and latest goodies in the Xamarin World while achieving a great MVP of the app.
I loved how simple yet informative the app was, and Immediately got motivated to jump on the Github repo and see how I could help out and contribute to the project, I went on a frenzy writing down anything I could think would support polish further the vision of the project after a couple of hours, having identified a ton of room to grow and improve the project I narrowed the options down to the following:
- Identify and Fix Bugs
- Propose new features
- Propose changes to improve UI/UX
The one that stuck the most with me was improving the UI/UX, even though the app was really well implemented and useful. Brandon had shared with me that he had left the styling and UI for the end (which I also recommend if you are working on a project like this on your own and experimenting with different features, Because at the end if your app can’t do well what it’s intended to do, it doesn’t matter how beautiful it looks, your users will only get frustrated).
I felt the UI/UX of the app was not making justice to the hard work put into the app and didn’t properly highlight at a glance each of the key features that made this such a great project, So I set on a journey of designing a new UI/UX proposal that would be simple, clean, and attractive to our future contributors and users.
GitTrends Proposals
- Make sure to checkout the GitTrends UI/UX Proposals – High Resolution Behance Project before continuing with the post.
Let’s Get Started!
I’m not going to lie I faced a ton of mental barriers questioning if I could actually produce a Design that would look modern and attractive like the current trends in our industry, being just a developer with no prior solid education in Design.
But don’t worry about not having prior Design knowledge, with the right amount of resources and a solid workflow we can break all of those barriers together! 🥳 💪
Defining Our Toolkit and Workflow
Gathering inspiration
One of the most important things is getting your motivation going, everyone can achieve it in different ways, in my case, I found that I really enjoy looking at the work of experienced designers and try to analyze in a sheet of paper how they built and organized their UI, and how I could make something similar but taking into account what views I have available in Xamarin that can make the implementation of the design easier once I get to that stage.
There are a ton of great websites where designers from all over the world share their Ideas for Apps, Webpages, Products, and just about anything you can think off, my 3 favorite sites to gather inspiration are the following:
- Material Up: Is a website for designers and developers to find and share resources to build apps and sites. Every day, they curate the best resources for the Web, iOS & OS X and Material Design: user interfaces, experiments, open-source apps, libraries, and ready-to-use products
- Behance: Is a social media platform owned by Adobe which aims to showcase and discover creative work from artists and designers all over the world.
- Dribbble: This is self-promotion and social networking platform for digital designers and creatives. It serves as a design portfolio platform, jobs, and recruiting site and is one of the largest platforms for designers to share their work online.
Choosing a visual language for our design
After exploring our sites to gather inspiration, we can notice that there is a big variety of designs and styles we can choose from, to the point that sometimes you might feel overwhelmed.
To help us narrow down our ideas, I recommend choosing a base visual language that powers your design. I have always been an Android lover and always felt attracted to their design style called Material Design which is really well documented by their design team and allows us to take advantage of all their best practices and gotchas when designing and implementing UI/UX to our products. But don’t worry iOS lovers Apple also has their visual language called the Human Interface Guidelines, which are really well documented as well, we can stand on the shoulders of these giants to aids us in our journey on building better UI/UX experiences.
Defining your base magic numbers
Great job, on choosing your visual language! something I found handy while creating my redesign ideas, to have a little cheat sheet with what for me are my Magic numbers when placing new items and components in my design. this allows you to create designs that look more intuitive and consistent for your users.
Tools to get the job done
Now that we have our Magic Numbers, and a visual language we can use as documentation to guide us on implementing our wild ideas. We will need tools that allow us to easily design, prototype, and share our work, allowing us to gather as much feedback as possible. I found the following tools to be a lifesaver in this aspect:
- Adobe XD: Is a vector-based user experience design tool for web apps and mobile apps, developed and published by Adobe Inc. It is available for macOS and Windows and It’s packed with features like Responsive Resize, Repeat Grid, and Auto-Animate that speed up common tasks so you can spend more time being creative. The best of all is that it’s completly Free 🥳..
- Sketch: This is another great vector graphics editor for macOS, in which my great friend Brandon created the different versions of the GitTrends logo, and we also found some cool device vectors we used to generate our GitTrends device images, once we were done making the proposals in Adobe XD.
Define workflow and feedback loop
Now that we have our inspiration, the right resources and workstation we are missing the last and most important piece of the puzzle in our journey, and that is a proper feedback loop and accountability to keep us pushing and complete our project as best as we can. The 3 methods that I found worked the best to keep me accountable and organized while mocking up my ideas where the following:
- Use Github Issues and PR’s: A great to keep your work organized is to make use of the projects Github Issues section, in the case of GitTrends we had a few Issues opened just for dealing with UI/UX Ideas and new user flows we wanted to implement someday in the app, this was really helpful since everyone could see the progress of the design and brainstorm on how we could improve it or change it around. This also gives you a lot of joy once everyone is happy with your work on the new proposals, you also get to submit a PR, and I guarantee as soon as you get the email that the issue is now closed and your PR has been merge to the repo
- GitTrends Issues Related to UI/UX Proposal:
- Create Timely Screenshots of new ideas and have a friend to talk them over with: Sometimes, we might get stuck or feel like something is missing in our designs and we can’t really grasp what it is, in this case, I always say that 4 eyes have better insight than 2. Try to get a friend of yours involved in what you are doing and let them know you will be sending them your ideas so they can give their honest opinion on them and make any changes or suggestions they like to what you show them, you will be surprised at how much insight you can get just by listening to another person interpretation of your design.
In my case, my designated buddy was Brandon Minnick, who created the GitTrends App. He was really excited to see what we could come up with and was more than willing to give me feedback anytime I needed it. Another thing that helped us a ton was keeping communications simple, constantly we were chatting through Twitter DM’s, sending a bunch of screenshots, mockups and sometimes we would do a Microsoft Teams conference call to do a working session and tackle things together, keeping our communication simple kept our ideas flowing organically.
- Look for at least 3 buddies with interest in design or prior knowledge in the field you can keep updated on your progress and that can make opinions on your work.
We all know that friend of ours that is into design, and has taken courses on the subject or even works in some way with UI/UX. Always be willing to reach out to them and let them know you have recently acquired an interest in something they have loved for a long time and that you would it if they could give you their support and honest opinion on your progress.
In my case, I got to identify 4 good friends of mine that were really eager to help me out Joseph Gonzales, Franky Arvelo, Vanessa Suarez, and Luis Alberto Frias. I tried to make sure each of them had different experience levels and approaches with design:
- Franky Arvelo: Is an Industrial Designer and has been working as a designer for more than 10 years, you can check out his portfolio of cool designs in his Behance Page and Dribbble Profile.
- Joseph González: Is a Software engineer with an interest in UI/UX design and has been doing it as a hobby ever since I meet him 5-6 years ago.
- Vanessa Suarez: She is a Doctor, and loves creating Illustrations and art as a hobby in her free time.
- Luis Alberto Frias: Is a childhood friend of mine, better known as NeonG he has always been drawn into design and studied Publicity, but currently his also pursuing another of his passions as a producer/DJ/artist, go check out his music, it’s really good!
They are all extraordinary professionals, I got so much great advice each time I updated them in my progress, the final result of my design was all thanks to the combined effort of an army of friends, and community members that always kept providing great feedback, all I can say is Thank you for everything! I really enjoyed learning all of these new tools, and best practices and will continue to use them daily.
Ce finito! 🥳
Source Code to the GitTrends Project can be found in our GitHub Repo
GitTrends UI/UX Redesign Proposal – Behance project: https://www.behance.net/gallery/100887309/GitTrends-Mobile-App-UIUX-Redesign#comments
Live Session on Mobile App Redesign for Developers – .NET Dominicana Community:
Download and Try out GitTrends on:
AppStore – https://apps.apple.com/app/gittrends-github-insights/id1500300399…
PlayStore – https://play.google.com/store/apps/details?id=com.minnick.gittrends…
Made with ❤ by Pujolsluis
