New Designer and Developer Resources – October 2014

Bryan Garvin
  • Oct 31, 2014
  • Comments Off on New Designer and Developer Resources – October 2014
Turquoise Flag-Tip

Another month in the books as we continue to crush it here at Go Media. This month, I had an opportunity to do quite a few things that I normally don’t do. Specifically I joined the design team on a web design project here in Cleveland. So, this month’s resources will be more design-focused as I was asking a lot of questions and being passed a lot of cool resources from the other members of the team.

This Month’s Resources

Here’s what I found this month that has helped me in my daily work, both in and out of the office.

TimeDoser – Pomodoro Timer in Chrome

pomodoro

Before we get into design, I wanted to address a problem I’ve been having lately. I open my door to distractions throughout the day. It keeps me from getting lost in my work and allows me to take a moment to step away and think. Or try out Ello. You know, whichever comes first.

This month, I had an extended leave from the office to work remotely from a VERY remote location in the middle of nowhere, Florida. I was helping my mom and dad take care of a few things while my dad had surgery. They live on a farm raising cows, chickens, and pigs. It’s a 10-acre lot that requires a tractor to mow. Not just the yard around the house, but the pastures as well. It definitely wasn’t an all-day thing for me to take care of the chores around the farm. There was a lot of downtime, which I filled with my day-to-day work at Go Media. Unfortunately, with it being so quiet there while I worked, it was hard to break away from the laptop at times. I’d get lost in email or in code.

It became clear on this trip that I have a hard time breaking away some times.

So, I decided to give the Pomodoro technique a try. And, with the TimeDoser Chrome app, I get a visual cue on screen to take a walk and focus on something else. The process is simple, as well as completely customizable: you work for 25 minutes and take a 5 minute break. That break could consist of checking emails, reading Twitter, getting a drink, high-fiving a coworker, collecting eggs from the chicken coup, or my favorite at the office: staring out the window.

Granted, I don’t do this every day. Nor would I recommend doing it all day. But, for a 3-4 hour period, this is a perfect way to organize when I need to focus and when I don’t.

Convert YouTube to anything.

convert

Speaking of not focusing, my 25 minutes just ended. So, let’s talk about the need to sometimes get YouTube videos in another format. Especially offline.

While I was on the farm, I needed to keep up to date with my YouTube subscriptions. Quite a few release 2-3 videos a week. But, since I was depending on quota-limited mobile wifi, I didn’t have the luxury of streaming them. Nor did I want to watch them later when I was at a free WiFi offering coffee shop. With Convert2MP3.net, I was able to convert a video to a lower resolution and save it to my Dropbox behind the scenes. Then when I got to the coffee shop, I could sync everything down to view at my leisure. A 20-minute video became <120mb using 320p.

This also came in handy when I had to edit my podcast. We use Google Hangouts on Air as a backup recording since it publishes to our YouTube account. But, since I was out of the studio, it was our ONLY recording option. So, converting our YouTube feed to an mp3 to edit was a nice way to get things done despite my setting change.

How to write a design proposal

proposal

As I said, this month I temporarily joined the design team. I haven’t been on a design team since joining Go Media, so I know my design-speak could use an update. At the end of the day, I didn’t want to go into the client review without being able to fully explain my design and sell it. It’s been so easy to get lost in the “I’m a dev and I’m going to talk to you in dev terms” mentality. But this web design proposal how-to by JustCreative.com gave me some ideas of how to move forward in the presentation meeting. I want to be able to fully present my ideas while properly articulating what I’m doing and why I’m doing it.

Better free photos for design/prototype placeholders

pexels

For my design, I needed a good source for placeholder photos. We ended up going with iStock, since we knew the client didn’t have any photography and might want to then go and purchase those photos. BUT, during the decision making process, Aaron sent me a link to Pexels, a free photo resource for designers. It’s something he uses and has a really nice selection of photos in it’s library.

If you don’t need color, or want varying sizes, or want something a bit more abstract, the photo source I use for all of my prototypes is Lorem Pixel. I generally save down about 7-10 of each size I need, that way I get some variation.

Icon Fonts that can be used easily in a design

icomoon

I also wanted to pull in some of the icons we use in our builds from IcoMoon. Luckily, I found out with a little more digging than I had done previously, that you can also download either SVG or PNG versions of the icons. With that option, I exported a large version of the icon, imported it into PSD as a smart object, and was able to resize it as needed without much fuss.

On My Radar

Here’s a few more resources that I’ve bookmarked, but haven’t quite found a use for just yet.

How to solve the hamburger icon problem

hamburger

If you make responsive sites, you’ve seen the Hamburger. Or, the 3-line menu icon that you have to click to get to your menu when you’re viewing on a phone or tablet. But, there’s a growing concern in the industry about whether or not this is the best way to go about it. Does adding an extra action make more sense than just showing the nav at all times? Is that even possible and should nav take precedence over content? WebDesignerDepot.com tried to solve the Hamburger Problem.

Furthermore, are we doing it wrong regardless? Take a look at how you use your phone. While we’re used to menus being at the top, that’s a huge stretch for most thumbs. I only use one hand to interact with my phone. It would be helpful, in most cases, if that menu was at the bottom instead of the top. And I’m not the only one who thinks that way. Check out LukeW’s post about Designing for Thumbs.

Creating Custom Shortcodes in WordPress

shortcode

I’ve been trying to get better a doing more custom work in WordPress. One of the things I’d really like to try and accomplish is creating a short code to include some custom layouts in the visual editor. I’m not QUITE there yet, but here’s a tutorial on how to do just that.

And that’s it.

At Go Media, I’m a front-end developera podcastera content creatora designer, and a maker. Just like you, I like to wear a lot of hats and I like to keep up on the current trends, tools, and resources that hit my inbox and Feedly every day. Almost once a week, I sign up to be a beta tester for a new app, or install a new extension to see if it betters my productivity on certain tasks.

When I find something awesome, I share it with various members of our team, depending on what issues it’s solving. And, I figured it might be time to share that with you as well. Hopefully you find them useful.

If you’ve got something you want me to check out, leave a comment here on the Zine. You can also tweet me @bryangarvin and drop me an email.

About the Author, Bryan Garvin

Bryan Garvin

I'm a Web Designer and Front-End developer at Go Media. I have major crushes on Wordpress and jQuery. I'm pretty sure I have the best beard in Cleveland, OH.

Discover More by Bryan Garvin

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

Comments are closed.