My Ironhack journey. Episode 2: Sketch Visual Design Exercise
This is the second of a series of articles about my Ironhack journey.
My Ironhack journey. Greetings and Episode 1: Visual Note-Taking
Hi there!
Let’s continue with our journey! It’s time for our second challenge: Mock up some screens in Sketch!
First things first, here are the screens to mock:
We will be mocking up these two screens. A Login Screen and a Trip Info Screen.
In order to do so, we will be using symbols (they are sooo amazing) to reuse our main components.
Side note on symbols: Symbols are soooo amazing because we can override it’s content very easily. If you want to know more about them, check out the documentation here https://sketchapp.com/docs/symbols/
Login Screen
To compose the login screen we would need some components:
We will want to override our TextInputFields hints and trailing icons. In order to do so we need to make sure the icon is another symbol by itself and all those we want to replace with are of the same size.
For the logo, we will be using some shape operations. We start with a circle and, with the vector tool, we move one point to generate a tear-like shape. Remember to use straight point type!
Then, with another smaller circle aligned on top of our first one, we just subtract both shapes to get the wanted result.
But plain colors is boring! Let’s duo-tone it!
Just overlay two rectangles with the colors you need, mask them off and, poop! You just made your logo!
Compose, add some flat circled social icons and an image that you can blur and color filter in sketch as background and the result is this:
Trip Page
Not gonna lie, I personally like this designer’s take on Material Design but I wish she or he had added some elevation to the app bar.
Material is the metaphor behind material design. I like to thing about it as something that would be buildable.
For this screen we will be clipping (or masking) an image over our custom shaped material to create our app bar.
Then, add some circle masked images (that we can fetch from http://randomuser.me or use Sketch’s built in Data utility to get them) and space them evenly to form our users’ list.
A stadium shaped flat button with a rotate airplane icon will work as our My Trips button.
Labels for the text to display, add a Floating Action Button and here we have the header!
For the body of this page, we will be using symbols again, as we are building a list.
We will use symbols to enable the overrides menu.
BONUS! If the indicator is a symbol, too, you can switch between multiple indicators with different colors as long as they have the same size ;)
Draw a line for the timeline and we have this layer now:
Combine these two parts together, add an indicator for the pagination and we have our main page!
Extra, extra!
I found myself a little geeky today and I decided to prototype this design using Flutter.
I’m just starting to use this language! Any tips are more than welcome!
It isn’t as polished as I would have liked but I think it works as a proof of concept (and I didn’t want to spend much time on details).
Here is the result (yay! gif time!) running on Simulator:
I don’t think I will make the source public as it’s a little messy (I started it over another project and some files stayed), but if you want to discuss about the implementation, head down to the comments section.
To sum up
It’s been great, fun and challenging to implement this design! I love turning designs into apps so it’s always great to have these kind of challenges.
Things that I found interesting:
- Theming is a must. Do never underestimate it!
- Clipping in Flutter is so easy and fun, but I need a way to keep my shadows in place.
- Design based on components makes so much easier to turn images into apps.
That’s all folks! Keep coding!
