Can you briefly tell us about yourself?

I am the co-founder of a small remote design and development studio called Owl Studios. I’m currently based in Winter Park, FL. I’ve been a designer who codes for 15 years, I’m a passionate user advocate, and I have a somewhat obsessive eye for details.

What’s the one thing people should know about you?

I believe the best way to combat ugliness is to create and celebrate beauty, which is what I try to use my brain and voice to do.

What is your background, and how did you start with design?

When I started “designing,” I was doing Flash tutorials (majorly dating myself here) for fun when I was supposed to be doing English Literature homework at the university. I started making Flash websites for friends, and off the back of that, I landed my first web design internship. I dropped out of school and pursued design full time, eventually moving to Massachusetts where I was the Deputy Designer for Dan Cederholm, the co-founder of Dribbble. I went on to do freelance work for many amazing clients including Twitter, Campaign Monitor, Change.org, before moving to NYC where I spent seven years in the startup scene. I now have happily returned to independent work.

“I was the Deputy Designer for Dan Cederholm, the co-founder of Dribbble.”

What design project that you worked on is your favorite?

I’m going to cheat and pick two!

I recently create a UI Kit for Adobe XD that’s free for anyone to download and use for their next project. It’s built around a non-profit website, and my hope with creating it was that would use it as a jumping-off point for giving non-profits better sites. This is something I care a lot about since I think design can be a powerful tool for affecting positive change.

UI Kit for Adobe XD

Last year I worked on the design of two digital research platforms for behavioral scientists at the University of Pennsylvania, as part of a program called Behavior Change for Good. This was a fantastic project since that was all built around helping people form better habits (and I got to work with some actual geniuses).

Behavior Change for Good

What’s the biggest lesson you have learned on this project?

Creating the UI Kit was surprisingly challenging, as I wanted to make something beautiful that had a ton of personality, but was also easily adaptable for the different subject matter and content needs. I’d say my biggest lesson was that it’s always important to strike a balance between designing things that can be adapted for future needs while also feeling bespoke and unique; this was good practice for trying to strike that balance.

UI Kit for Adobe XD

As far as Behavior Change for Good, the biggest lesson I learned was from the content of the app itself: there are a million factors that control why we make the choices we do, and changing ingrained behaviors isn’t easy. It was fascinating to see all the theories scientists are researching in the field of behavior change.

Behavior Change for Good

The biggest challenge with the Behavior Change for Good was helping the entire team understand the value of good user experience. Often the scientists I was working with were a little less interested in empathy for their research subjects and more concerned with data. It was good practice for communicating the value of following best design practices.

As a designer who codes, how essential do you think is for a designer to know how to code and what’s the argument not to?

I often say learning to code has been the greatest asset to me in my design career. I design better websites because I understand how my designs will come to exist in the world and all the challenges that come with that. Knowing how to code gives designers a deeper understanding of best practices for responsive design, accessibility, performance, and more. It also makes the designer-developer relationship run infinitely more smoothly.

“I design better websites because I understand how my designs will come to exist in the world and all the challenges that come with that.”

As far as why not to learn, I suppose one argument is that there are infinite things you could learn related to this field; some designers go deep on learning animation tools, others also do illustration work — not to mention there’s never a limit to what we can learn about user research and best user experience design practices. Some designers I talk to who haven’t learned to code feel like there’s just too much to learn already, and coding feels like this big monster of an undertaking. But the great thing is, it can be very gradual and incremental. Even knowing how to do basic HTML & CSS will make you a stronger designer.

“I often say learning to code has been the greatest asset to me in my design career.”

Another argument is that knowing how difficult something will be to build might prevent you from really getting creative and pushing the boundaries of what’s possible. I don’t buy this; if anything is knowing that something can be built (because I could build it myself if I had to) makes me even bolder in my work. I imagine if I didn’t know how to code I’d hesitate to take risks with my designs because I wouldn’t be sure if it were possible to create them.

“I imagine if I didn’t know how to code I’d hesitate to take risks with my designs because I wouldn’t be sure if it were possible to create them.”

How did you start and learn coding?

I started with learning ActionScript for Flash (because I’m old), which showed me the magic of writing code to make something happen on a screen. When it became clear Flash was going extinct, I picked up Headfirst HTML & CSS, which was an excellent book for helping me get started with basic markup and styles. From there I read Designing with Web Standards and Bulletproof Web Design, and the rest is history!

Did you always want to focus on both design and code?

Yes! I learned web design at first not as because I saw it as a future career path, but because I wanted to make websites for myself and my friends for fun. Since I was young and broke, I couldn’t afford to hire a developer to bring my Photoshop files to life for me, learning to code myself seemed like the answer. It helped that I loved to do it! I’ve been hooked on doing both ever since.

How does your design-to-code workflow look like?

I design in a variety of tools, depending on the team I’m working with and the project. These days, I’m loving using Adobe XD for design. I start by creating wireframes in XD, usually for a desktop if it’s a fairly straightforward design (like for a marketing site). If I’m designing a responsive product, as I did for SuperBooked, I’ll start with mobile wireframes.

These go into a clickable prototype that I and others can interact with, to ensure the UX is solid before I delve into the visual layer. Once I’m confident the experience is nailed down, I’ll go back into my wireframes and start to style them, usually exploring a few different options for colors, type, etc. depending on the personality of the brand I’m working with.

Once I’ve got a pretty good visual style direction nailed down, I get into code as fast as possible. I’ll build out the experience layer as quickly as possible, and not worry as much about styling at first. This allows me to validate again that the experience is right, this time directly in the browser. This also allows me to start handing HTML & CSS over to the back-end developers faster if I’m working with other devs on the project.

“Once I’ve got a pretty good visual style direction nailed down, I get into code as fast as possible.”

From there I begin incorporating visual style through CSS (or these days, Sass). I leave this for last because I could easily eat up the entire timeline playing with fonts and colors, so I always try to make sure the experience is right before digging into this layer.

Whenever I’m building something myself, I try to do as much design as possible directly in the browser. This allows me to be mindful of factors like responsive design, performance, and accessibility as I go, and lets me test as I go.

Adobe Hidden Treasures Design

What’s your dev-stack? What languages and frameworks do you use mostly?

I’m strictly a front-end developer, so mainly I stick to good old HTML and Sass. I do a lot of WordPress builds, so there’s some PHP thrown in there too.

How do you approach to work with other front-end developers successfully? Any tips?

I think knowing how to code makes it infinitely more comfortable for me to work with other developers; I speak their language, I give them feedback in terms they understand (aka, I say “set the font-weight to 300, it’s at 400 now” rather than “the font looks bad.”) Honestly I think knowing how to code (to the extent that I do) just means that I respect the work of devs more and have a better relationship with them all around. My biggest tip to all designers is to learn as much as you can about code, and learn HTML & CSS at a minimum.

“I say: set the font-weight to 300, it’s at 400 now, rather than: the font looks bad.”

So, which part do you like better? Design or code?

Ooh, hard to say. They both satisfy a different part of my personality. I can’t imagine not doing either of them, but I’d probably give up coding before I’d be willing to give up designing.

At what point do you invite someone to help out and on what end (design or code?)

The design is a very collaborative process for me; I try to get input from stakeholders, other designers, and (whenever possible) users as often as I can throughout the process, from the moment I have an idea I feel pretty good about through to the final polishing stages.

For coding, I’m pretty much a badass at HTML and CSS at this point, but I remain a complete amateur at JavaScript and most things back-end. So I get “real” (aka full-time) developers to help me with anything that goes beyond the “presentation layer” of the project.

Zitkala-Sa

What kind of clients are you working with right now?

My biggest partner this year has been Adobe, which has been an incredible opportunity. I’ve been part of the Adobe Insiders program, which means I work closely with the Adobe XD team to test out new releases, give feedback, and show off what Adobe XD can do. It’s been a blast. I just released my Non-Profit UI Kit for Adobe XD to help other designers create great websites for non-profits.

I’m currently working on a project for an online poetry platform, which (as a former English Literature nerd) is a dream come true for me. Before that, I was working with a significant proofreading company, which also appealed to the part of me that loves to police people’s grammar.

What would be your dream client to work for?

Ooh, tough question. Can I have 10?

  • Any company that’s helping improve the lives of women, children, education, cancer patients, or the environment, as these are the issues, I’m most passionate about.
  • Planned Parenthood, my favorite non-profit.
  • Pretty much anything relating to animals in literally any way.
  • Modcloth, where I buy 90% of my clothes.
  • Disney, where I pretty much live when I’m not at work.
  • Anything related to publishing, writing, or literature in general.
  • I’d love to do a website for a talented artist or illustrator, like Lisa Congdon.

You’re very active across many Social Media channels. How important in your opinion is self-promotion for designers and why?

Self-promotion is vital as a designer, but I don’t think about it as promoting my “self.” The way I see it, a skillful designer recognizes that they have so much to offer the world, and knows that they can have a real, positive impact on the lives of their users. Once you can say that about yourself and your work, you want to help as many people as possible by doing the best job you can. So you’re making what you have to offer more visible, to help more people.

I try to put my work out there wherever I can. I have active profiles on Dribbble, Behance, Medium, Instagram, Facebook, etc. because these are all “shop windows.” I think designers should make it as easy as possible for the people who need their particular brand of design solutions to find them. You’re not helping anyone by remaining hidden.

The channel that works best for me currently is Dribbble. I love it because it’s easy to share my work quickly, and it’s an engaged and fairly supportive community too. I love Behance, but posting a project to Behance takes a little more time and effort, so I tend to be slower to post things there.

Twitter still has lots of merits, although I tend to avoid it more nowadays given the current political climate and the amount of divisive rhetoric I see there. I’m getting more invested in Instagram, although I think it’s currently not a platform with a big UI / UX community.

Medium has been a great way to write and share things without wrestling with my blog, and I love seeing who’s reading and liking my articles. With RSS in the old days, you often felt like you were shouting into the void. I do want to double down on blogging in the next year though. I think writing is in many ways as important a skill for designers as designing.

Bonus Question: We saw a lot of owls in your designs, and also your website is called Owltastic — Why owls, and what’s behind all this?

I’ve been drawn to how beautiful owls are since my late teens, but I started identifying with them after I moved away to college. My dad called me up one day and said an owl had moved into a tree near their bedroom window, and that it kept him up all night shooting. He said he was convinced it was my spirit showing up back at home and keeping him up all night being noisy, just like I did when I lived there. I also used to (and sometimes still do) work late evening hours, usually really settling into my work from 9 PM to midnight. So I identify with the nocturnal nature of owls, too.

Want to stay in touch with ? Find him on his website, Dribbble, Behance, Instagram, Twitter, Facebook or LinkedIn.

Have a suggestion for an exciting designer or front-end developer we should interview? Hit me up at [email protected].





Source link https://blog.avocode.com/should-designers-know-how-to-code-with-meagan--ff7f337e3076?source=rss—-3d381deaf83—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here