My New Design Process for Creating Responsive Websites

Responsive Portfolio

Yesterday I launched a my new portfolio. If you haven’t seen it yet, take a look!

My goal was to create a minimal portfolio that focused only on my work (“But Jon, what other kind of portfolios are there?”) and looked great on both desktop and mobile devices. That meant I had to get into responsive design.

Until I started on this portfolio I focused more on fixed-width layouts so my design process looked like this: sketch, design in Photoshop*, code in HTML/CSS. I found that this process wasn’t working for me after I trashed about 3 complete portfolio designs before I realized that I needed to reverse it a bit.

My flow for creating responsive website now looks like this: sketch, code in HTML/CSS, design in Photoshop*. Once I had the layout looking good and functioning well on both desktop and mobile devices I then moved into Photoshop to create the actual style of the site. This new flow made my life so much easier and I highly suggest it when working on responsive sites.

* If the UI/UX is complex, add wireframing in Omnigraffle before Photoshop

Are you looking for a freelance UI designer? Get in touch with me!

Another Birthday, Another Charity:Water Campaign

Last year I decided to pledge my birthday to Charity:Water. My goal was to raise $200 and my amazing friends and family gave $808. So when my 28th birthday was approaching this year I decided to pledge again and set my goal to $560 which is enough to give 28 people clean drinking water.

This year my friends and family went above and beyond and donated $1,000! That’s a huge amount of money and is enough to give clean water to 50 people.

I can’t say thank you enough to those that donated. A few donors even said that they will be pledging their next birthdays to Charity: Water. I’ll be the first to donate when they do.

Thanks for another incredible birthday everyone and remember – 100% of your donation is going directly to fund water projects.

The fundraising page on Charity:Water:
http://my.charitywater.org/clean-water-for-28-people

Introducing: Imgverse

I’ve been a huge fan of sites that are very image heavy sites like Tumblr and FFFFound for the longest time, but I’ve always wanted to put my own spin on the idea so that’s exactly what I did.

Imgverse is a free image hosting service that allows you to not only quickly share images, but also discover awesome images that others have uploaded. All without requiring an account.

As always, this was a Luke and Jon production.

Take a look and share an awesome image!

Are you looking for a freelance UI designer? Get in touch with me!

Retire Sooner Rather Than Later

Arc of Life

It seems to me that everyone’s plan is to work through their youth and retire around the age of 65. This has never made any sense to me. Why would you want to spend your best days behind a desk only to retire when you’re too old to enjoy it? I’m a fairly healthy person, but I don’t see myself cliff diving in Mexico after I receive my AARP card.

I certainly don’t have it bad in the job department, but my goal is retire or at least semi-retire while I can still live it up. Below is how I plan to do it.

Avoid debt

This is a big one for most people my age. A lot of my friends are currently paying down their student debt, living in expensive apartments, and making payments on their fancy cars.

Avoiding debt is one of the best investments you can make. Instead of trying to find a stock that will give you a 9% return, just get rid of your credit card debt. Most people seem to think of debt as just additional payments they have to make every month, but it should be thought of as a hole you need to get out of before you can relax on a sandy beach somewhere.

Live a frugal life

I believe being frugal is in my DNA. I’ve never cared much about having all the latest gadgets and finding the best deal on any item is a fun challenge. That said, always remember that the poor can’t afford cheap goods. If I just have to have something, I do my research buy the best version of it. Even if I have to pay a little more, this approach makes more sense in the long run since it prevents me from having to buy it again when it breaks.

While rent is ridiculously expensive throughout the whole Bay Area (more on that in a minute), I live in the South Bay area where apartments cost much less than those in beautiful San Francisco. I’m not complaining, I’ve always liked this area and it’s where a lot of my friends and family happen to live here. I’m a quick jaunt from the Santa Cruz beach and the city. Not a bad place to live at all.

I’ve also started couponing whenever I go shopping. If you’re not using coupons, drop the ego. Nobody in line at the store cares. It makes zero sense to pay more for something when you can easily get it for cheaper by snipping out some coupons that are already being mailed directly to your door. I’m not saying go and buy 1,000 Vitamin Waters just because you can get them for a $0.05, just save money on the things you need.

Frugal links: Mr. Money Mustache, RetailMeNot, /r/frugal, Frugal SF

Save and invest wisely

Saving money is natural part of the frugal lifestyle and I’ve been doing it ever since I was kid. I used to go door-to-door asking neighbors if I could mow their lawn for $3 and instead of spending my money on candy, I put it all into a savings account my parents setup for me. My Mom once got me a leaf blower for Christmas and it was one of the best gifts ever. You think I’m joking, I’m not.

I put as many purchases as I can on a credit card to collect the reward points, this credit card is paid off at the end of every month to avoid an interest fee. I have a checking account with enough money to pay my rent and bills, I keep 6 to 12 months worth of living expenses in a high yield savings account, and the rest goes into either a Roth IRA, a Traditional IRA, or an Individual stock market account. This system allows me to grow my wealth while protecting myself and my girlfriend from being homeless if I happen to lose my job and the stock market crashes… again.

Even as a youngster, the stock market was interesting to me and when I was 17-years-old I made my first investment. I invested the $300 I got for my birthday (I’ve always asked for cash) in STEM and nearly doubled my money. I had to ask a friend to purchase the stock for me since I didn’t have the capital to open my own account, but I knew I was hooked.

Unfortunately, in 2008 that whole world came crashing down on me (like it did for many others) and I sold all my shares and exited the market completely. If I were wiser then, I would have been buying instead of selling. I’ve since taught myself a lot about how to invest wisely and I now feel comfortable investing much more than $300.

I’ll most likely write a new blog post about how I invest another time, but I will say this: don’t buy stocks. Buy ETFs that pay dividends when everyone else thinks the market is crashing and hold onto those purchases as long as you can. If you just have to buy stocks (it’s more exciting, I know), I suggest sticking to blue chip companies with a low P/E ratio, a high market cap, and a steady history of paying dividends. You’re also going to want to learn how to read financials.

I like these ETFs: VTI, VYM, VDC, and VIG.

Investing links: Investopedia, Marketwatch, Google Finance

The cost of living is too damn high!

Like I mentioned before, living in the Bay Area is expensive. Most of California is in fact and that’s why I plan on getting out of here. When it comes time for me to hang up the ol’ work boots I’ll most likely end up in a someplace like Colorado where the weather is similar to California, but the price of living is much, much lower. Simply put, I would much rather own a beautiful home on a acres of land in Colorado than a small condo in the Bay Area.

TL;DR

Avoid debt, don’t waste money, and invest wisely to grow your wealth.

Am I missing anything? Want to share your plan retirement plan? Tell me on Twitter!

How I Work From Home

working-from-home-comic

I’ve been working from home 4-days a week for awhile now. We got rid of our office at Exercise.com towards my last few months there and BrightGauge is nice enough to allow me work from home Tuesday through Friday so I don’t have to commute from Campbell to our office in San Francisco everyday.

This might sound like an awesome deal for those who don’t regularly work from home, but it has its drawbacks. While not having to commute is great – it can get lonely working by yourself 40+ hours a week and your home eventually starts to feel like your office. Imagine getting off of work, leaving your desk, and walking into a conference room to eat dinner and watch TV. It can feel like that sometimes.

This is how I’ve learned to make working from home easier on myself:

  • Create a morning routine
    Sure, your co-workers can’t see you, but it’s not a good idea for you to not shower and wear sweats everyday. I wake up early enough every morning to give myself time to shower, get dressed, drink coffee, and read the news before I have to “clock in” so I get myself in the mindset that I’m going to work. I tried going to the sweats all day route and even though I was working, I felt like a bum. Get ready like you’re going to an office.
  • Get some sun
    It sounds silly, but it’s easy to lock yourself inside when you don’t have to leave your home to go to work. I usually eat lunch while I’m working so when my co-workers go on their lunch break, I go for a walk or a quick run. It creates a nice break in the day, allows me to unwind, and keeps me sane.
  • Find a desk somewhere
    If you’re feeling lonely, find someplace outside your home to work. I prefer to go to friends’ offices that are nearby because I’m not a big fan of working at coffee shops, but anywhere that’s not your home should do the trick.
  • Always over-communicate
    A big part of my job is working with developers who are building a design that I created. I chat with my front-end developer on Google Chat for most of the day, but sometimes it’s necessary to get on Skype to talk and share our screens. Luckily, my front-end dev and I have worked together for awhile now so he usually gets what I’m trying to say even if I’m not being so clear.

There are plenty of other small tips and tricks to staying sane while working from home, but I believe the 4 above are the most important.

Are you looking for a freelance UI designer? Get in touch with me!

Learning JavaScript Using Codecademy

Neo: I know kung fu.

I’m not great at JavaScript. I’ve never pretended to be. It’s something that I’ve tried to teach myself repeatedly and have failed every time.

I think I’m decent at HTML and CSS though. They make more sense to me. It’s like reading/writing a sentence. Oh, you want give your background a color?


background-color: #003399;

It’s that easy. Where as, to me, JavaScript has always looked like:


bgcolor(++red * blue === purple){if++ % i- =>> lawl}();

As unfriendly as it looks, I know I need to learn it. Not only to look good on my resume, but because I see what others are doing with it and I want to play along. I’ve also been told that I’ll be able to learn other programming languages easier once I’ve learned JavaScript.

So, I’ve decided to give Codecademy.com a try. It’s great so far. If you’re not familiar with Codeacademy, it’s a free service for learning how to code. They give you a series of lessons with short tests that are just hard enough to where you feel good for completing them, but easy enough to where you’re quickly moving through the section. It feels good to progress through the program and (as cheesy as it sounds) I enjoy earning the badges. Oh and I’m learning how to code.

I suggest checking it out if you’re at all interested in learning JavaScript, Python, Ruby, or HTML/CSS.

Are you looking for a freelance UI designer? Get in touch with me!

A Quote for Investors

Winston Churchill and Bernard Baruch

Nobody ever lost money taking a profit.
- Bernard Baruch

I’ve always had an interest in investing, but it has become more than a hobby in recent years. Since worthwhile 401ks at tiny startups in Silicon Valley are rare and interest rates from most banks are incredibly low, it has become my way of saving for retirement.

I try to invest wisely. 80% of my stock portfolio is in a total stock market ETF and the other 20% is in blue chip companies that pay a decent dividend and (by definition) have steady profit growth year over year. Just to be extra cautious, I always place stop-losses on my investments to make sure that I wont be broke if the market comes tumbling down (again).

This is where the quote above comes in. As an investor, I want the highest return possible. Sometimes this means holding on an investment even though the company or market may be going through some tough times. But it’s important to check the ego from time-to-time and remember that there’s no shame in selling a stock while it’s in the green. Even if it’s the lightest shade of green.

You may be hoping for that 60% growth, but don’t feel bad for getting out at 7% if that means you’re not losing any money. Always remember, nobody ever lost money taking a profit.

Back in Campbell, CA

On January 31 my girlfriend and I moved to Campbell, CA. Everything about Campbell is new to her, but this is actually the first place I went when I move out of my parent’s house.

I’m not complaining – I enjoy being back in Campbell. It has a small town vibe while being surrounded by the largest tech companies in Silicon Valley. There even seems to be a growing tech scene in our neighboring town, Los Gatos.

I have plenty of fond memories here and I’m looking forward to creating many more.

Are you looking for a freelance UI designer? Get in touch with me!

My Brick Builds: A Site for LEGO Fanatics

My Brick Builds

Recently my friend and frequent collaborator, Luke, got into Legos. He had always been a fan, but it seemed like it became an obsession. It’s not hard to tell why. Legos are awesome. Kids love ‘em, adults love ‘em, and the LEGO company itself is awesome.

Luke and I would send cool pictures of MOCs (My Own Creations) to each other that other Lego fans have built and after awhile we wanted some sort of service that would allow Lego fans (or builders) to easily share builds that they like or have built themselves. Enter mybrickbuilds.com.

Mybrickbuilds.com is basically Tumblr for Legos. It allows you to quickly upload photos of a build you like, tag it, and add a source URL of where you got it from. You can comment and like other users’ builds that they’ve posted as well.

If you’re a fan of Legos, My Brick Builds is worth checking out. It’s also free and sign up is a snap.

Vist the My Brick Builds website.

Are you looking for a freelance UI designer? Get in touch with me!

Stylie

It’s been a couple months since I helped out, but I still think this is worth mentioning. Stylie is a CSS animation tool powered by Rekapi that was created Jeremy Kahn.

Jeremy built Stylie, but needed some design help. I sent him a direct message on Twitter asking if I could offer my services and we were off. Stylie is a simple service so it didn’t take long for me to pass a design his way and it took even less time for him to develop it. The man is a coding machine.

Visit the Stylie website

I don’t know Jeremy personally, but we have a couple mutual friends and I’ve been following him on Twitter ever since he moved to San Francisco from Chicago to work at YouTube. If you go through some of his older tweets you’ll see he wasn’t too excited about being immersed in the San Francisco culture, but every now and then you’ll see him tweet about which yoga DVD he should buy or how much he’s enjoying the weather. Pretty soon he’ll be twirling his mustache and listening to Arcade Fire while riding through the Mission on a fixie.

Take a look at Jeremy’s portfolio