Meet John, UI Designer and Front end developer
John Morris is a seasoned UI engineer who is currently working at Everydayhero. I knew him through a slack channel and a number of his interesting side projects really wowed me. We’re not going to talk about the projects he’s been doing at work but there’s still a lot of inspiring design thoughts and helpful tools down there.
Could you please tell us a bit about your design background?
I got into design completely by accident. I started out by making graphics and backgrounds for my Youtube channel back in the day. Youtube channels used to be really customisable and you could do cool tricks like make all of the elements completely transparent, and upload a background image with some fake UI on it to make all the sections look really unique. I remember making these using Microsoft Paint, doing a gradient pixel by pixel wasn’t super fun.
An example of what was possible with the old youtube layout here:
Eventually I upgraded from paint and really got into photoshop speed art videos. People screen record themselves creating something in photoshop or whatever design software and speed it up, I’m sure these kind of videos are still around, they were really fun to make. I didn’t start taking design seriously until I did a Tafe design course one day a week during high school. At that time, I started doing some freelancing stuff which looking back, I was terrible at. I wasn’t very good at client interaction or managing my time, a high school student with exams and freelancing just wasn’t a good combination.
After finishing high school and my TAFE course, I did some internships and part time junior design roles, and after a year of that I was hired by NetEngine to work on their product Outfit. Getting the opportunity to design an entire product, and be a part of such an awesome software house so early on in my career, with very little experience was amazing. I can’t thank NetEngine enough for having so much faith in me. I ended up leaving Outfit in 2018 and now work for Everydayhero In a similar sort of half design, half development role.
Do you design first or code first when you do your personal projects?
It depends on why I’m making that personal project.
Sometimes I like to make new projects to design something new and push my design skills, then obviously design will come first. Sometimes I just go, “this is a cool bit of tech” or “this would be a cool idea for a tool or an app”, and I want to try the cool new thing, so I jump into coding it first. I don’t really have a structure to it.
For a recent project, I forced myself to not do any design at all, because as soon as I stop focusing on the coding side of it, I would go all out on the design and never finish the development.
Q: Are you worried about doing code first is gonna limit and compromise your design eventually?
Even if I jump into code first, I usually do a couple of wireframes or I sort of know how I want it to be designed eventually. Sometimes when you work with developers who just build things without considering any of the design, it can be hard to add the design back. Because I know how I eventually want the design to look, I think it actually makes it easier.
That’s the good thing about doing design and front-end, you know the limitations of both sides. I’m not going to design an impossible solution because I know how I’d implement it.
I think compromise is a good thing sometimes. If moving a button by 10 pixels is going to completely change how it has to be written, the position probably doesn’t matter that much, and it’s ok to compromise because the extra development work wouldn’t be worth it. As the designer you know which design decisions are important and which design decisions you can change if it means finishing on time, or not creating technical debt.
Alternatively, If there were two different people working on it, “Developer 1” might think that it has to look exactly like the mocks, he takes ages, and creates something that is going to be hard to maintain. Where as the complete opposite of that “Developer 2” is like “yeah this is close enough” while missing some important intricacies. Being able to understand both design and development, can lead to a better balance in your product.
Q: Would you encourage designers to dive into coding?
Do what you enjoy doing. If you are interested and feel like you want to do it, then for sure, you can take some small steps. Being able to actually create the thing you designed and show it to people on their own devices is an amazing feeling.
I initially started learning HTML and CSS as a design tool. I was already designing logos and posters and eventually websites, so using code to design instead of sketch or illustrator felt like a natural transition. Even learning react and javascript was just a lot of small steps.
Going from putting classes on divs to putting classNames on react components is not a very big step at all, and if you’re using SCSS or CSS with your react components, it is barely any different. Eventually you get to the point when you’re like “what if I want to toggle the class when something is clicked”. Then you learn about setting some state, just learn bit by bit at your own pace.
For me, it was way easier working on a project that already existed and easing into learning javascript, than being like “I’m going to write an entire react app. I have no idea how to do that”. But some people learn that way and there are some great resources out there to do that. I would go to someone like @WesBos who is a designer/ developer that does great classes, videos and tutorials and stuff, or to SuperHi, if I had to do it all again.
Being surrounded by people at work that were way smarter than me, and didn’t make be feel like I was stupid when I asked stupid questions was a huge help too. Thanks to everyone at NetEngine, you guys are alright.
What’s your process to craft those stunning design works?
Usually, I have a really basic idea of what I want things to look like whether that’s from my interpretation the brief or a website or piece of design I’ve seen.
So the first thing I do is open a new Sketch file. Opening a new Sketch file is the best. Infinite possibilities. I just make a big mood board, posters, Dribbble shots, websites, cool typefaces, anything that is close to what I want the design to look like. So I just put these on an artboard until I’ve got a fair amount of stuff there.
I will try to pick different parts from it, “I really like how this particular layout isn’t like a traditional website, or “I really like this one and its weird condensed typefaces”.
I try to pick different specific parts that I like from each of them and use that to make something original. It might look bad straight-away, and that’s fine. All I do is duplicate what I’ve made and change a part of it, or try something else. Keep duplicating. Change the layouts, change the colors. I just let it get crazy until eventually I’ve got something I’m happy with. It might take a while, but if I just keep evolving the design I’ll get there, I just have to be patient.
What tools are you using for designing and coding?
I’m not a massive tool-using person. I’ve seen some people that have tools for everything. I’m the opposite, I don’t use enough tools.
In terms of a design tool, I was a big fan of Figma when I was working on a product. But right now I use Sketch, plain old Sketch with no extensions. The collaboration stuff in Figma is absolutely crazy but I don’t need it at the moment for what I’m doing. I’m not working in a big team of developers and designers and I don’t need to share the design with everyone all the time, so Sketch works fine for me.
A cool utility I’ve been playing around with is khroma.co. You pick a bunch of colours and it generates palettes and colour combinations that you might like. Sometimes you see some colour pairings you never thought you would use together. Even sometimes just looking at a different colour combination will make you want to use it somewhere. I use khroma sometimes if I’m really stuck and have no idea what I want to do, or I just want to spark a creative thought. Sometimes I just want some cool color combinations and it’s something else I could put on my big mood board.
For coding, just my terminal window haha, no other apps, even my text editor is inside my terminal. I’m really liking ParcelJS. It’s an application bundler. If you have ever tried to set up a new development project, you know the feeling of “ugh, now I’ve got to get everything set up” and then you end up spending more time configuring webpack or your build tools than actually doing the fun part. Parcel is great, zero configuration, It just works. Use whatever you want, React, CSS, SASS, Typescript, vue, whatever you want, parcel just knows how to handle it. It’s really good for quickly prototyping a proof of concept component or application.
I don’t like having different apps for everything, 99% of my work is done in Sketch or Terminal and it works for me :).
What’s the most interesting side project you’ve done so far?
I made an app called “Retro Retro” which is a tool for team retrospective sessions.
Basically a retrospective session or ‘retro’ is for giving anonymous feedback about the last sprint. In the app you can type some feedback and mark it with ‘good’ ‘bad’ or as a ‘question’. Each item pops up in real time, and the team runs through each point and discusses them and decides which items will be actioned.
I really liked the name ‘retro’ and decided it needed to look retro as well. I designed it to feel like old school Apple Lisa OS. That project was pretty fun.
Q: Did you do both design and coding part of “Retro Retro”?
Yeah, I used Google’s firebase which has a real-time database. You type something in and it instantly pops up for everyone. I’d never built anything quite like that before so it was a bit of a challenge but I finished it, which is probably why its one of my favourites.
Q: Any roadblocks along the way?
I’ve done so many react projects now that the majority of it actually went down quite smoothly. I spent around one week on it initially, about three days figuring out how to set it up technically and then I smashed through the design. I kept working on it for about a week or so fixing things that inevitably broke after real people started using it. I should go back and refactor it or add some more features, it was a pretty fun one.
What’s the most important one thing or things you think to become a great digital product designer?
Have fun with what you’re making and maybe stop following trends for the sake of following trends. Just because someone else has done it a certain way, doesn’t mean you have to do it the same way. Don’t be like “Google did it this way, so I have to do it this way too”. You’re allowed to be creative. You might be trying to solve a problem Google hasn’t actually solved before, so don’t take the lazy way out and copy a solution instead of exploring how else to solve it. Sometimes the way that Google did it ends up being the best way for your project too, but at least you’ve come to that decision yourself after exploring your other options.
Q: Do you have an example for that?
Sure, something like Material UI/Design for example, or any other design system that has specifically been designed for that company. Just because they might be using lots of shadows, or action buttons, or dropdown menus in certain places, that doesn’t mean you have to use it if you don’t think it’s the right solution. Be creative, try new patterns and interactions.
How do you juggle your life, work and keep up with the design industry?
I don’t really do a lot to keep up with the design industry. Other than occasionally seeing the front page of Dribbble or Behance when I’m looking for inspiration, most of my news comes from reading articles or having discussions in the auslocale Slack community. I’m not really one to constantly look through Designer news or Product Hunt, or even go to meetups honestly. I’m also pretty introverted, so it’s hard for me to enjoy things like meetups, although the ones I have actually been to I’ve enjoyed, so maybe I should go to more.
Where do you see your design career 5 years from now?
Hopefully, still making things I enjoy, that is pretty much my only criteria. Who knows, maybe my skill set has evolved into an area that right now is completely new to me, maybe I’m not even doing any coding. I Just hope I’m enjoying it, whatever it is.
Where can people find your design/code work?
I don’t really post on social media very often, but here’s my personal website.
