Hello Web Books RSS Feed

The new Hello Web Books website has launched!

Over the last few months, I've been slowly increasing the capabilities of this website with the ultimate goal of replacing several external services I was depending on. I'm excited to say that work has finally finished!

HelloWebBooks.com now has a full educational site back-end. You can order my book packages, which will prompt signing up for an account, and on this account you can access your downloadable files, and (new) the full book content online, split up by chapter. This will include embedded videos, if your package includes them.

The new book/course dashboard.

Previously, if you bought a video package for Hello Web Design, you would be prompted to create an account on Gumroad to access your files, which included a janky hack — a text file with the URL of a 100% coupon for Podia, where you would sign up for an account again, to access the video files hosted there. I liked the Podia experience, but Podia had no way of embedding a signup button or form on an external site, so this was my workaround. Blech.

Embedded videos with the content.

Books can be read online (and updated easily!)

Since I was in a mood to replace services, I also replaced Gumroad with a custom Stripe/Stripe Checkout experience. If you don't mind me geeking out over details, this was a huge hullabaloo I didn't (but should have) expected. I started out thinking, "Oh, I'll just embed the Stripe Checkout form and I'll be done!" But of course, there were so many other details to consider. What about coupons? What about gifting? What about applying coupons automatically if someone is logged in? Gah! This was harder to figure out, with so many edge cases, but in the end it was a fun experience.

Stripe checkout for payments.

What's next?

Tracking down bugs! I'm sure there are more.
Everyone who owns a book/course already and is still on my newsletter list will be automatically imported into the system today. If you are a previous customer and unsubscribed (which is totally fine) or bought on Kindle, please forward me your receipt and I'll be happy to give you access. (I have purchases from almost all of my sale sites saved on customer data in the newsletter, which is why I am doing it this way.)
I will be updating the book landing pages / this website in general to promote this new feature.

I'm also looking into using print-on-demand for books moving forward (at least after an initial Kickstarter run.) Once this is completed, I will be considering a price-hike across all packages to reflect the additional functionality I added with this site. So if you're considering buying, do it now before the hike increase!

All packages include access to the educational site.

Thanks friends, excited that this is officially out!

Does your inbox feel too quiet? The hidden consequences for temporarily breaking your email.

A month ago, an error with my business's email address caused it to bounce. Even after I discovered and fixed the issue, this led to a still-unknown amount of emails to silently be suppressed while I carried on unaware.

Email suppressions should be something everyone should be aware about but I've found over the last few weeks that no service provider was aware their mail API services (e.g., Mailgun, Sendgrid, and others) would suppress bounced emails.

I'm writing this article not only to share my experiences, but hopefully raise awareness for this sort of problem with both customers and service providers so no one will have to go through this very annoying mess like I have.

Making a dumb mistake and breaking my email, causing issues I didn't anticipate.

As I am a person who runs this web app, I wanted a personal email address using the domain — [email protected].

Of course, setting up an email address requires some logistics, and I originally went the easy-but-pricey way of setting up Google Apps and paying $5/month. I set up my personal Gmail to receive emails sent from [email protected] and promptly moved onto other things. This was probably done in mid 2018.

In February 2019, I noticed the $5 monthly charge on my credit card and decided to kill my Google Apps account to save myself some pocket change, completely forgetting that that was what powered [email protected]. I have a bunch of other emails that were set up using a legacy, free, version of Google Apps that forward to my Gmail account, and in a short-sided moment, I failed to remember that this email address was not set up that way as well, nor that it wouldn't fall back to this behavior after cancelling the paid subscription.

All emails from any service that was using that email would now bounce, and of course, I had no idea this was happening.

Later, a kind soul emailed me to let me know my email address was bouncing, leading to a frantic few hours discovering that I broke my email when I disabled Google Apps, leading me to set up a temporary mail server, and then setting up Google Domains for future forwarding. Voila, [email protected] worked again! I moved forward with my life confident that I fixed the issue.

My inbox felt quieter, but some emails worked.

Weeks again later, I started to notice something weird. I received fewer emails than before, and I would wonder if the email was still working. But when sending myself an email from an outside source, the email would arrive successfully so I would put it out of my mind again.

It wasn't until I few days ago I realized that I wasn't receiving any emails from Gumroad, which was particularly worrying, as I needed to ship physical products after receiving a product payment notification.

(Yes, notifications are enabled. No, they’re not in spam. Yes, other emails from Gumroad are working.) pic.twitter.com/40TRaSaE7R
— Tracy Osborn (@tracymakes) March 8, 2019

Gumroad responded that they were having issues with Gmail, so I blamed the whole thing on some disappearing Gmail email bug with Gumroad, and not my fault or responsibility, and put it out of my mind yet again.

Just to add: it's super weird because they don't effect all emails nor do they go into spam. They just don't show up (and then sometimes they do a while later).
— Sahil Lavingia (@shl) March 8, 2019

Then I noticed that mailing-list exports weren't arriving in my email from ConvertKit, nor password reset requests. And yet again I sent myself test emails, which arrived promptly, and I reassured myself that my email address was indeed working.

Fixing my own mail service led me to realize that mail API services were silently suppressing my email.

It wasn't until I was working on the new version of this web app when I finally discovered what was actually happening. I launched the new version, and in testing, ran into a 500 error. This should have emailed me a report, which never arrived (of course), so I hustled over to Mailgun to see if my web server actually sent the email.

It was there I discovered how mail API services will silently suppress bouncing emails, and I hadn't been receiving emails from my own mail service for about a month.

Suppressed emails over the last month.

Seeing [email protected] suppressed by my own mail service caused a big a ha moment: All web services I used with that email were silently suppressing my emails. It explained why I received some emails, but not others; why emailing from another email address worked fine while emails and notifications from services I used were silently failing.

And web services themselves weren't often aware of this issue, like Gumroad above, who blamed it on Gmail.

I now have the task of pinging every single service I signed up for with this email address to see if my emails are being suppressed.

Screenshot of my email featuring a convo with eFulfillment Service, who was suppressing my emails.

Web services and support forget that this is a feature offered by their mail API services.

For example, on Mailgun's features page:

The 2 Types of Email Bounces: (...) Hard bounce: messages may permanently fail because the email address doesn’t actually exist or is no longer valid. For this bounce type, bounce management software can automatically suppress these emails from your email lists. This will help you keep a clean email list and a positive email reputation.

On Mandrill's side:

After a bounce occurs for a recipient email address, Mandrill stops attempting delivery of the email. Further email to that address will be rejected temporarily.

Rejections shouldn't be removed in bulk, but if you know that a bounce was temporary or you've resolved an issue with the receiving server, you can remove individual rejections for a small hit to your account's reputation.

Increasing awareness that this is something someone should check out if they suspect email issues.

The original problem was solely my fault, for making a quick, silly decision to cancel a service I was using and not thinking through the consequences.

However, figuring out and fixing the issue has been made so much more difficult due to the services I used forgetting to check their email suppression lists when I emailed in asking for support.

I had also asked several very computer- and web-savvy friends for help figuring out my email issues and they also failed to remember that email suppression lists could have been the cause of my email issues

Fixes if this happens to you.

Of course, don't make changes to your email provider that could potentially cause bounces. Prevention is the best medicine.
Password resets are a great way to quickly trigger an email to test whether your email address is being suppressed.
If you're using an email provider like Gmail, you can add +WORD to your email address (for example, [email protected] will still go to [email protected]). You can switch out the email used on a website and trigger a password reset to see if an email will then arrive. If they do, that likely means your original email is suppressed by their system.
Ask support to remove your email address from their email suppression lists, and be prepared to walk them through the process as quite a few I conversed with weren't aware this could be an issue.

This has been a fun issue to diagnose and fix over the last few weeks and I've learned a lot in that time. Here's hoping it helps you as well!

The new Hello Web Books website is nearly completed

I've been having a fun few months of missed notifications/emails in some form or another.

A few weeks ago, I realized I messed up something with my domain and emails to [email protected] weren't arriving. Explained why my inbox was being particularly quiet! (This has been fixed.)

Well ALSO... I thought my book sales through my website plummeted in the last month. I wasn't getting any email notifications of sales, and actually was one of my motivating factors behind launching this Patreon ("egads, how will I make rent?!")

Last week I got the weekly rundown email from Gumroad (the system I use to sell books on my website) and realized it said I sold a paperback book. What? When? I need to be on top of those because I need to ship the book and I didn't receive any notification email of the sale on the day it said it was sold.

At first I raged as I thought it was related to my previous email problem, but after some investigation, looks like Gmail is selectively hiding some Gumroad emails. No, they're not in spam. Maybe something to do with blocking Gumroad's mail server IPs.

So, hey! It's not my fault! I can stop being so down on myself for a lack of sales since it turns out I've still been making sales!

Buuuut this has definitely motivated to work double-time on the new Hello Web Books website, where I was already replacing Gumroad with a custom Stripe integration, so I don't have to worry about outside services breaking in quiet ways.

(I should be clear that I'm not really mad at Gumroad (though their normal support was less than useful or apologetic. Sahil, the founder, contacted me on Twitter and was much more helpful.) I'm glad I was able to use them successfully for so many years.)

And (crossing fingers), the new website should launch next week!

The new book dashboard that readers will get access to after buying:

The new book dashboard that readers will get access to after buying.

The book content page, if you have the videos included.

The content area, if you don't have videos included.

You can also buy my books/videos as a gift for others.

And the new order page, using Stripe Checkout v1.

This has been a fun project! I still don't think it was the best use of my time as everything was mostly working (other than missing Gumroad sale notification emails.) But this coding project helped drag me out of some signification depression and has motivated me to work again. 🎉

So if all goes to plan, I'm spending the rest of the week figuring out how to onboard folks onto the new system, fix the rest of the small bugs, and figure out my deployment plan, so it's up by early next week.

There are a lot of big things I want to work on after launching (I really want dedicated landing page URLs a la Wes Bos, so hellowebapp.com is the HWA landing page, hellowebdesignbook.com is the HWD landing page, etc.)

But (omg broken record) I will BE WORKING ON THE GIT ZINE FIRST by golly. I gotta get this MVP super website up so I start getting payment notifications again, and then the zine(s). I promise.

Phew.

Thanks for following the story and hope you enjoyed the progress shots!

(This was originally published on my Patreon account. Become a Patron to get these updates early!)

Updates! Dug myself into a very big (and fun) programming hole

One of the things I wanted to accomplish this week (in honor of the Patreon launch) was an update to one of the zines; either getting the art done for the Windows or Linux command line zine or working more on the content for the git zine.

BUT that programming project I mentioned in the last update is STILL ONGOING. It has been the giant-est of giant yak shave-y projects.

Turns out replicating Gumroad's functionality isn't a week-long project! (Duh.)

I'm having a ton of fun with it, even though it's taking a lot of time. I lost my love for programming last fall and it lasted up until this project. The funk I was in meant I didn't feel like working on book stuff either. Now I'm super excited to figure out how to make my own coupon system and get Stripe Checkout to work and oh lordy I started all this work and then realized there is a whole new version of Stripe Checkout and WHAT Stripe has an Orders API when did that happen? This is basically my brain every day.

Since the last update, I ripped out that custom credit card form and started using Stripe Checkout. Probably will launch with this, and then migrate to Stripe Checkout Beta.

In other news...

The Command Line Zine can now be ordered as a physical book from Amazon

Back in the fall I chatted with another self-published author who made the very good point that, while my physical books are gorgeous, I probably could have saved a ton of money and pain if I went with print-on-demand, like he did. I grumbled and got defensive, and then thought about it, and then realized he was probably right.

Going forward, I'll probably do a small print run (500, likely) for Kickstarter and pre-orders using my fancy pants custom designed books, and then use Amazon's printing service (CreateSpace, though I think it's now bundled under Kindle Direct Publishing now) for orders after launch. This'll save me the pain of having a fulfillment warehouse that I pay minimum $22 weekly (UGH) and returns and re-orders and damaged books and all that.

To prep for this, I decided to make a print-on-demand version of my zine and see what the Amazon process was like. You can see it on Amazon here.

Really Friendly Command Line Intro can be ordered as a small paperback on Amazon

Pricing is hard. It's only 24 pages, but Amazon's greediness means I actually only get about $1 per sale when it's sold for $5.95, so I can't really do less. Also, will probably update the cover design with color — currently it is black and white for people to print at home, but that doesn't look too snazzy on Amazon. Also also, the description needs a huge revamp.

(Also it's driving me nutty that the product page isn't connected with the Kindle version but apparently the automated system needs more time and I can't complain for another 48 hours. Sigh, Amazon.)

Traveling for the next two weeks

I'm off traveling for the next couple weeks! I had hoped to get my MVP version of the new hellowebbooks.com out before I left but there are still big things to do, so hopefully I can get some work done while I'm away from home.

ALSO: I owe a few packages of the physical command line zine to a few of you. Since I'm coming to the US in the latter half of the trip, I'm hoping to ship them then. Stay tuned!

(This post was originally published on my Patreon account.)

Support me/Hello Web Books on Patreon!

I've launched a Patreon for myself/Hello Web Books! (Since we're one and the same at the moment.)

https://www.patreon.com/tracyosborn

I'm working on the baby beginnings of several new books and zines and wanted a better place to do small, quick updates on progress (Twitter is a bit too ephemeral/noisy, I don't want to spam my email list, little updates weekly seems like too much work for blogging.) Not to mention it would be helpful to even out my personal revenue in-between product launches, and support more free / community projects (like my Learn Command Line zine

If you have a dollar or two to spare a month, I appreciate any and all support you can give! :cheers:

50% off all Hello Web Books packages and products for Black Friday + Cyber Monday

Oh hey it's Black Friday time again!

Use the coupon code BLACKFRIDAY2018 on the order page to receive 50% off all products and packages. Coupon code will work until Monday the 26th at midnight ET.

Enjoy!

Updated package needed for Hello Web App deployment

hellowebapp-deploy's package location on pypi.org

I was recently alerted to the fact that one of the packages I use in Hello Web App, waitress, had been updated to a version that is backwards incompatible with the book. This package was installed by my own package (hellowebapp-deploy), where I didn't specify version numbers.

This is a quick update to let y'all know that I've updated the hellowebapp-deploy pypi package to specify the correct, non-breaking version number and that I've added this to my list of things to update in a new version of the book.

If anyone would like to reinstall to get the correct version number, use this (which’ll also prevent install from the old/cached version):


pip install hellowebapp-deploy --no-cache-dir

I should have a new release for Hello Web App soon using the newest version of the whitenoise package. Stay tuned!

Moved HelloWebBooks.com from a static site generator to full Django site

This website got a big update!

This is where I would usually show a screenshot of the new website except, in this case, the changes are 99% invisible.

I created this website way back in the day using a static site generator named Cactus, which worked okay for what I wanted to do. Back then, my concerns were more about time to get things launched and making things as easy as possible to deploy, since I was more concerned about getting the books released.

But a staticly-generated site has some major limitations and I started to feel like my hands were tied behind my back. Blogging became more of a chore. People often asked me for Wes Bos-style discounts (price parity, selling my courses for cheaper based on country), and that’s harder to build without a backend. I’m also paying a lot for various services, including a video host, but that service doesn’t have a way to insert a “buy” button on my own website, so I’m using another service for that, meaning that people who buy my books tend to create two accounts, which is plainly annoying.

HelloWebBooks.com moved from a static site generator to full Django

If I wanted to address any of the above, I needed to migrate this website to a full Django system. The hardest part was figuring out what to do with the static files I had for the blog. For WeddingLovely, my startup, I used Wordpress for the blog and it runs on a completely different system, and I here I hoped for better integration between my site and my blog.

Blog moved from static files to Wagtail

I ended up using Wagtail. There actually wasn’t a ton of thought put into this — I’ve heard a lot about Wagtail from my friends in Django, and I missed Wordpress-like features for blogging, like scheduling posts. This whole new website started out as an experiment at home that I didn’t anticipate finishing, just a test to see if it was doable to run Wagtail for just the blog portion of my website and easily migrate my files over. I managed to get everything looking exactly the same as it did before, locally, using Wagtail for everything under /news/, so I decided to plow forward with launching the site.

For the website/book portion of the website, I haven’t used the backend at all (files are still just static files with no database involvement), but at some point I’m going to start building some fun stuff.

I learned a lot about server administration

Doing all this was also a fun excuse to finally get more comfortable with setting up servers. In the past, for complicated deploys, I usually whined for my husband (hi Andrey) to help me out since he’s really awesome like that. But it was time for me to fly on my own.

The following is not a tutorial, just the process I went through:

DigitalOcean

I was doing all of this without a deadline, so I felt comfortable trying a few different server solutions. I started with DigitalOcean. I mainly used this tutorial, but ran into issues at the point where tutorial walks you though creating Django site from scratch within the server, not pushing an existing local Django site (which I find kind of silly, since who does that.)

I found some other tutorials which walked me through using git on the server to pull my site from a public repo. Here’s where I spent a few hours using GitLab, and then just falling back to GitHub because I’m lazy and I already have accounts there, then trying not to be lazy and moving all my private into to environment variables, then forgetting about git history when I pushed to the public GitHub repo, then scrubbing everything and updating all my passwords and secret keys and starting over. Phew. That was fun.

Hi, I’m Tracy, and I just accidentally committed with secret keys in git history to a public git repo. #derp
— Tracy Osborn (@limedaring) November 13, 2018

Finally, my site was was pushed into DO, I went back to the original tutorial to set up nginx and gunicorn, and went through a few hours of finding an error, fixing an error, finding a new error, fixing the new error, etc, etc.

I finally reached a point where I thought, “Well, this is why Heroku exists, maybe I should use that instead.” Not to mention I need to fix something within the Hello Web App book anyways that in (coming this week), so I thought it would be good for me to reacquaint myself with Heroku.

Heroku

I popped over to Heroku and tried going through the process of deploying the site there. It ended up being more frustrating because I was getting some of the same errors I got with DO, but it was harder for me to figure out how to fix because everything is abstracted away. Heroku’s documentation also drove me up the wall (especially after using some of DO’s documentation) so after a day of frustration, I decided that I was going to stick with DO. Oh, and deployment is sloooow.

I recommend Heroku for my Hello Web App readers precisely because I don’t want to burden new devs with all that server mumbo jumbo, and will continue to do so. But for me, I like having more control since I’m a bit farther along in my dev-itude.

Today I played around with Heroku and guess what: SAME UNKNOWN 500 ERROR. And restarting dynos isn’t working. Probably different error. Yay servers and deployment!
— Tracy Osborn (@limedaring) November 12, 2018

DigitalOcean again

Back I went to DO today, fresh and ready to fix the last few errors I ran into. One of my big issues was that I filled out my local database with my blog posts, thinking, “Oh, Django’s dumpdata and loaddata looks easy, I’ll just do that.” I should have known better — postgres and Wagtail were not playing nicely and it took me a few hours to debug the issues and get my data loaded into my production database (still with errors, but nothing that stops me from working.) I learned a lot here about how Wagtail works and learned about all the things I don’t like about it, but hey, going to keep using it for now.

Day three of working solely on server administration.

What is it like outside?
Will I ever see sun again?
— Tracy Osborn (@limedaring) November 13, 2018

Fabric for deployment

One last technology that I’ve never used. Since I ditched Heroku, I needed an easier way to deploy my site after making local changes, and was recommended creating a Fabric file (fabfile) to run the commands I was doing manually (ssh into the server, change to the correct directory, running git pull, then restarting gunicorn.)

Things got tricky since Fabric has moved to a new version with different commands and most tutorials references the first version, but after a few hours I figured out how to create a very basic fabfile for deployment.

Setting up scheduled posts with systemd timers

I’m familiar with cron (and have a whole chapter on Django management commands and cron in my Hello Web App: Intermediate Concepts book) so I started setting it up before I realized I would have issues running the publish_scheduled_posts Wagtail command since my settings files need to have environment variables set and I didn't (obviously) want to hard code those.

Andrey pointed me in the direction of using systemd timers (Here’s the best tutorial I found on the subject.), which would have been just great had I not named my timer cron.timer and guess what! That’s already used by the system and nothing would happen and I tore my hair out for hours before I renamed my files and then they worked. Don’t be clever with names, folks.

Man, learning so much in the last few days.

Today: systemd things

The programming hole is so deeeeep
— Tracy Osborn (@limedaring) November 15, 2018

Updates to the current site

I didn’t change much on the front-end. The main visible difference now is that the blog posts in the blog have multiple categories, rather than being limited to just one.

Other than that, the site is probably slower, since it’s not static. Funny that I spent days making these changes only to make the site slower. 😅

Upcoming

Hopefully I’ll blog more. I love being able to schedule posts in Wordpress, so I can set up good content at my own pace and schedule things to go live at an appropriate time, and Wagtail appears to be able to do this. I say “appears” because I actually haven’t tested this until this blog post.
A better shopping cart system. I’ve been using Gumroad for the last three or so years, but have been itching to roll my own system using Stripe. I love having video courses, and use Podia for hosting those, but it’s expensive and doesn’t let me allow people to buy memberships from my own website or allow for physical products (and capturing shipping addresses), so I use Gumroad for all my sales and then punt to Podia using coupon codes, and both of those services make you create an account, which is… not ideal. It bugs me, it probably bugs my customers.
Related to the above — hosting my own videos. I’m using Wes Bos as inspiration and love how he runs his website and courses. Of course, hosting videos will be a whooole mess of potential additional issues but would be pretty baller.
Price parity. Another Wes Bos inspiration. I get emailed a lot from folks in Africa or India asking for a coupon code since $15 USD is a whoooole bunch of money there. And while I make probably 10x less than Wes Bos and kind of need to save all the pennies I can, I also don’t want to be a dick. So I’ll look into rolling something like this hopefully soon.
More authors! More books! Maybe! This big website update will make it easier to move from self-publisher to publisher territory.

In conclusion: Development is fun!

Well, the last three days of work didn’t directly make me money (and I’m rather poor right now) but they were fun, I learned a lot, and hopefully this new infrastructure will improve my future revenue flow. At the very least, hopefully it’ll good for my career in general.

Library, bulk, and educational discounts available for Hello Web App and Hello Web Design

I've gotten a few questions lately about bulk, library, and educational discounts for all Hello Web Books, so I thought I'd write a quick note here.

Of course, I'm happy to give a discount for the above use-cases — just write me at [email protected] and I'll set up a special order form with a discount. While my order page sells the paperback book with the digital files included, I'm also happy to send just paperbacks (at a reduced price) for bulk/educational orders as well.

I've also set up Amazon to allow for bulk discounts. I vastly prefer to sell directly (since Amazon takes a ridiculous amount of money from me, so the books I sell through Amazon are essentially at-cost) but I know some organizations are set up to use Amazon easily. The only other issue is that I can't sell Hello Web App as a set on Amazon, so each HWA book will have to be bought separately. See the listings here: Hello Web Design, Hello Web App, Hello Web App: Intermediate Concepts

Hello Web App 2.0's Kickstarter was successful! Thank you.

Video thank you!

The new Hello Web App just finished its Kickstarter campaign making over 200% of goal!

Super duper awesome.

Thank you so much to everyone who backed the campaign, shared it with friends and family, and supported the re-release of my first book.

The files have been at the printer for awhile already, so I should be getting the paperbacks soon to send out to everyone. I'm also finishing up the videos and will be releasing the digital packages super soon.

Thank you again! Super excited to get this out. 🎉

First free zine on command line basics has launched today

Today I'm releasing my first project, A Really Friendly Command Line Intro for MacOS! For free! This is a great addition to Hello Web App (and will be bundled with it moving forward). I walk through all the basic UNIX/command line commands that a beginner might need to learn when they start coding for the first time.

Right now, you can:

Read the HTML online here.
Download the PDF.
Download the printable PDF, set up to be folded together and stapled.
Buy .mobi/.ePub versions on Leanpub for $2.99.

Upcoming, I'm working on some additional formats (like a video) as well as creating Windows and Linux versions of the zine.

Thanks friends! Go check out A Really Friendly Command Line Intro.

Hello Web App 2.0 is now fundraising on Kickstarter

Hello Web App on Kickstarter — go back the campaign!

The first book I wrote was Hello Web App, teaching web app development using Python and Django. It's since been read by thousands of readers around the world, and I'm super excited to announce a new edition of the book, fundraising on Kickstarter!

https://www.kickstarter.com/projects/1868398473/hello-web-app-20-build-your-first-web-app-with-dja

Some of the big changes:

The books are now packaged together as a unit, no longer selling them individually.
The content has been updated to Python 3 + Django 2.0.
The videos are getting a complete revamp.
Various bits of pieces of the content has been updated as well.
The Kindle edition has some snazzier graphics.

I love Python and Django because I find them way simpler than Javascript to launch web apps — Python is easier for me to read and parse and Django includes most of the parts you need for a web app (with login, registration, etc) by default. It's been a joy working with these two technologies over the years (especially since I'm a designer with no computer science background).

If you've been curious about working with Python or creating your own web app from scratch, I wrote this book for you. Any help or shares you can give are super appreciated!

Kickstarter campaign, products will start shipping in April: https://www.kickstarter.com/projects/1868398473/hello-web-app-20-build-your-first-web-app-with-dja

Thanks everyone, I hope you share and back!

New Hello Web Books website

After a few ~~weeks~~ months of work, I'm super excited to release the new Hello Web Books website design to the world!

Video/vlog of this post. In it, I go through a bit of why I updated everything and before/after screens.

In Hello Web Design, one of my biggest points for a nicer looking website design is to reduce clutter. And then I'd come back to this website and get annoyed at past-me for creating such a clutter-y website.

When I originally designed this website, I stepped out of my comfort zone and added a lot of photos, banners, fonts, and colors — I'm terrible at designing the "little details" so I relied on a lot of extra things to make the website feel more polished.

In this design, I stripped most of that out. No more Typekit (oh man do I love Freight Text Pro but Typekit was just a bit too slow for me), no more custom fonts (Mrs Onion was fun, but in the end, a bit hard to read) — all hail Lato, the only typeface used now. It's plain, but pretty, and comes with tons of weights.

The landing pages for the books also have been improved. A lot of the imagery has been removed and a lot more text content added, like FAQs and more descriptions of the package contents.

Last but not least, I've increased prices on all my products. This was a hard decision, but the last couple years I've had really low income for the amount of work I put into the videos/books. I've been severely undercharging for the amount of work I've put in. Of course, existing buyers will still get all product updates for free.

Things aren't done though! I am thisclose to launching my next announcement but not quite yet, which is why Hello Web App isn't available to be ordered right now (it might be a big obvious what the announcement is about). Gotta get my ducks in a row before I can turn that back on. I know this website has some bugs and kinks to work out, so I'm launching it sooner rather than later.

On the topic of bugs! If you see anything wonky, please let me know! I appreciate anyone who can help me test and debug the website.

What do you think? See anything you like or dislike? Let me know in the comments below or on Twitter!

Hello Web Design’s Product Hunt launch recap

On January 19th (after fretting for at least two weeks), I finally launched Hello Web Design on Product Hunt (You know, my book/video course teaching design for non-designers.

Video/vlog version of this post! Trying to get better at speaking on camera so I'm doing a video version of all my posts.

The post did way better than I hoped, becoming the #5 product of the day.

Here’s my recap of the process and what I learned from this go-around.

Hello Web Design on Product Hunt

Pre-launch

It’s been quite awhile since I launched on Product Hunt and the community has evolved quite a bit.

Thankfully Product Hunt has their own guide on launching on Product Hunt, which was super helpful (I recommend checking it out first) but even so, I was still confused by a couple major things.

On when to post

One of the questions I had was what time of the day (and what day) to post? Since your accumulate points throughout the day, you need to post early enough to start building momentum and traction.

The Product Hunt guide is very clear I shouldn't worry about this, but I still did (such like me). Other guides on the internet advocated for posting at ridiculously early times like 3am ET. I knew it didn’t matter too much about when I posted, but I also wanted to post it as early as possible just in case.

In the end, I set up my listing the night before and posted right when I woke up, at 7am ET/4am PT. It was a little worrisome since there were quite a few other posts with a bunch of points by the time I woke up but in the end I still did well.

Setting up the post and missing fields

It’s been so long since I did a PH listing so I was unfamiliar with the process.

I took a look at a few other successful Product Hunt pages (like Marketing for Developers) and worked on my content in Google Docs for a few days perfecting what I wanted the sub-title, description, and introduction post to look like.

A major point of confusion was that you can’t set the description when you’re going through the four application screens to submit your product. Turns out, after the application is submitted, the description field and a bunch others pop in (like social media, which I originally put in as links in the application). Not the best UX but I figured it out in the end.

The four pages to go through before submitting your product don't include a description field (seen on other listings), which confused me.

As soon as the post was up, I sent a newsletter to my ~5,000 newsletter subscribers.

I believe this is the reason why the post did so well — I'm lucky to have a small audience built up already over the years. In the post, I asked them to check out the listing and ask any questions they might have for me. I didn't ask for upvotes, but I'm sure anyone who knows Product Hunt read between the lines.

I also posted to Twitter several times during the day. I'm not the biggest fan of Twitter nowadays and the tweets didn't get that much traction, but it's one of those things that I might as well do.

I'm a member of a few communities for makers (like MegaMaker Club) and I shared the campaign in those Slack's as well

That was pretty much the extent of my sharing efforts — I mostly relied on my newsletter friends.

Post-launch

Woohoo, 5th most upvoted!

In the end, my post hit #5 for the day. I actually didn’t think it would, as in the list for the day, Hello Web Design was actually at #6 — I completely missed that one of the posts above mine was a sponsored post, and apparently ineligible for that ranking.

Traffic

Pretty good traffic bump.

Before I wrote this post, I was disappointed in the amount of traffic, but after looking at my old post on launching on Product Hunt, I realized it was just about normal. Phew.

Revenue

Direct sales (using Gumroad)

Made about $2,000 the first day, and kept up a bit of momentum afterwards.

The biggest surprise here is that I didn't sell as many video packages as I've done in the past for Product Hunt — the majority of the sales were for the paperback book. Not sure why. Maybe people have video/course fatigue? For Hello Web App, the majority of my sales was for the video product, and that listing didn't have photos (wasn't a feature then), whereas for the Hello Web Design listing, I had a ton of photos (gotta show off that gorgeous book, yo.) Who knows, but I found this interesting.

Indirect sales (Amazon paperbacks and Kindle sales)

The back-end of Seller Central, where I sell the paperback books.

The back-end of Kindle Direct Publishing, where the Kindle sales are.

Even though I didn't link to them directly from my Product Hunt page, my other sales channels thhrough Amazon got a small boost.

Unfortunately since then, Amazon has "temporarily removed" my paperback listing as "a customer reported details don't match the product" and that they're "investigating." Sigh. This is why I hate dealing with Amazon.

Conclusion and lessons learned

I'm glad I was able to get a little chunk of money through the PH launch because it's tax season and I'm going to owe a few thousand dollars (yeehah, #entrepreneurshiplife.) This launch was pretty crucial so I could buffer my bank account a bit and I'm glad it did as well as it did.

Some takeaways from this experience:

It's really great to have people who seem to be true fans and will support what I do without asking. I got a number of positive reviews on the post that were completely unexpected (and wonderful) and I am so grateful to have this community around me.
As usual, when these things are going on, it's impossible for me to do any other work. I refresh the page like every five minutes and can't stay concentrated on any other task.
Posting at 7am ET and on a Thursday seemed fine. I got lucky that there weren't any other huge launches that day to compete with mine.
Why did no one ask questions in the comment section? Still baffled by how quiet it was.

And a quick run-down of my suggestions for anyone else preparing for their PH launch:

Look at other successful Product Hunt pages in your space and use them to inspire your content and how you'll set up your own listing.
Work on your content and get it perfect. Especially your sub-headline.
Make sure your icon/photos/imagery looks great.
Post it as early in the day as you can but don't lose sleep over it.
Write a great introduction about yourself and your product as a comment.
Answer every comment you can to keep the comments section looking active (also, to be polite and all that).
Don't ask for upvotes, but share with your fans.

Any other questions? Ask me anything in the comments below!

Shipping and fulfillment for my self-published books (update since I’ve moved to Canada)

Video/vlog version of this post. Experimenting with formats!

Back when I was in California, I got a pretty good system down for fulfilling books (which you can see here).

Since I’ve moved to Toronto, Canada, I’ve had to set up a completely new fulfillment system, so now that blog post is completely out of date. My current solution still has some kinks but lately I’ve had a few big “ah ha” moments (and a few shipping disasters, costing me $$$) that I thought it was time to give an update.

Current system: Amazon FBA for fulfillment to the US and self-packed Canada Post for Canada/overseas. I’m in the process of sending books to Amazon.ca so I can sell there as well (and Amazon.com is already set up with Amazon FBA). Generally, the majority of my revenue comes from selling on my website (HelloWebBooks.com) using Gumroad as the selling middleman.

On Amazon FBA and lessons learned

Moving to Canada meant I was forced to find a fulfillment center, as it wouldn’t make sense for me to pack and ship books to the US anymore (you know, since it’s international and all.)

Finding a fulfillment center was way more annoying than I thought it would be. I first turned to Print Ninja’s fulfillment service, which was great — until they shut down that part of their business. Sigh.

They had a preferred partner to transfer my fulfillment to, but this partner charged extra for objects shipped using USPS’s Media Mail option (a much cheaper way to ship books in the US) which annoyed me so much that I immediately took them out of my fulfillment search. I would already pay a fulfillment/handling fee per book — why charge me extra for shipping when it shouldn’t be more work on their end?

In the end, I decided to go with a big wig fulfillment center — Amazon FBA. The downside is that I’m dealing with a huge corporation, so I don’t have a rep I work with directly to answer questions. And believe me, the Amazon FBA backend experience is one of the most confusing websites I’ve ever used.

My Amazon Seller Central dashboard.

(I also used to use Amazon Advantage, which is more like consignment and has an even more terrible back-end system, but now I’m 100% using the FBA system. The advantages/disadvantages between the two systems is still mostly a mystery to me but at least things are slightly more streamlined.)

A month ago, I noticed that I wasn’t making any revenue on FBA. Instead of getting a check at the end of the month, I was charged $600.

Not what you want to see when you're trying to make money, not lose money.

Because I don’t have a dedicated rep, I had to navigate support who kept answering questions I didn’t ask and ignoring the ones I did ask. But eventually I got a refund for my fees and the correct information entered for my account.

To this day, I don’t know whether I put in the wrong info or they did, but at least it’s fixed now.

Lesson learned: Scrutinize the charges on your credit card and whine until errors get fixed. Amazon was certainly not going to catch this error (or care) unless I brought it up.

Overall, I’m mostly happy with fulfillment through Amazon FBA, but I’m keeping my eye out for better solutions still.

Lessons learned for overseas/Canadian fulfillment and shipping with Canada Post

My original plan was to use Amazon FBA for every shipment, Canada/overseas included. That was until I shipped some books using it, and it not only took forever to arrive (I could only choose ground/boat shipping), I got no tracking numbers AND it cost buckets. And at least two books got lost during this time.

It was a happy day when I discovered that EasyPost has a Canada Post API, so I switched to fulfilling all Canada/overseas orders myself. So I keep boxes of books, pack them up, pay and print labels at home, and lug them over to the nearest Canada Post kiosk to ship.

Yay shipping APIs!

USPS First Class International worked well for me in the US, so I chose to ship out my Kickstarter international orders through the equivalent with Canada Post — Canada Post Ground.

Alas, I didn’t realize how horribly slow it would be! Orders shipped on 10/31/2017 are only now starting to arrive in Australia — three months later.

I now ship using their slightly more expensive Air shipping, and cuts the shipping time from months to around 10 days. I only regret I didn’t know about this when I shipped out my books to my Kickstarter backers.

Lesson learned: Really, really investigate shipping speeds vs. cost. The cheapest rate might be ridiculously slow.

After 1.5 years of living in Toronto (sheesh, time flies), I’m finally getting my logistics nailed down for sending books. I keep wondering whether it would be better if I went all digital (like most courses online), since I’d save myself a lot of time and money with designing and shipping… but it truly is nice to have a real book and be able to share something physical with my readers.

Thanks everyone! If you have any questions about writing a book, leave me a comment below.

Hello Web Design is on Product Hunt today

Hello Web Design is on Product Hunt today, check it out!

Woohoo!

Product Hunt is a community celebrating new products and they're incredible in sending a ton of traffic and new users. It's a great place to find awesome new things, so it's an honor to be up for voting today. If you get a chance, please check out the discussion too!

Design for non-designers: Part 3

Part 1 of this design series dealt with the visual design, and Part 2 delved into user experience, content, and testing.

Here, we’re going to jump into a bit about theory and reassurances that will help you become a better designer.

Steal like an artist.

Imagine June—she’s a developer who needs to build a new personal homepage to showcase her open source design work. June sits down at her desk and wipes it clear, then pulls out some paper and pens and starts sketching her ideas. :e

Sounds great in theory, right?

It’s far more likely that June will sit and twiddle her fingers, sketch some ideas, get frustrated, try sketching again, then ball her paper up and throw it away.

I know this because I go through this process every time myself if I try to design without researching and finding inspiration first.

Simply put, sitting down to try to sketch ideas from scratch without using any sort of inspiration is a lot like trying to program without having Google or Stack Overflow at your fingertips.

Designing without inspiration is like programming without Google or Stack Overflow.

Think of inspiration like visual debugging. Looking at great design and inspiration will help you figure out solutions to problems you may run into when creating your own designs.

Where to find inspiration? For web design, there are tons of websites that simply collect and share good designs.

CSSMania, Unmatched Style, Awwwards, and Site Inspire are just a few options to find web design inspiration.

Of course, do not rip off designs. If you find something you like, you can do something similar but ripping off something verbatim is a very big no-no.

My Hello Web App books are inspired by the wonderful A Book Apart books:

The A Book Apart books have such a beautiful design, which inspired my typography and colors.

I’m particularly proud of the design I made for Hello Web App, but I sincerely don’t think they would have turned out as nice as they did without being heavily inspired by A Book Apart. Seeing those books helped me determine what I liked in terms of size and thickness, not to mention the flat wonderful colors inspired my own graphic treatment of the Hello Web App cover.

When you find something you love, something that you’d like to do yourself—whether it’s layout, colors, font choices, etc—use that as inspiration to build something similar but not exactly the same.

Train your design eye and intuition.

One of the most useful activities you can do to make yourself better at design is to look at other designs and think critically about what it’s doing well and what it’s doing poorly. Great process to practice while you’re looking for inspiration!

The more you do this (with good designs as well as bad), the more you’ll train your “design eye” and design intuition, making it easier for you to create good designs from scratch.

Let’s use the an old Slack homepage design as an example:

Slack consistently has great looking homepage designs, great for practicing picking out good design decisions.

Using the principles we went over above, what would you say they’re doing well? Some of the details I’ve picked out:

Lots of whitespace. It doesn’t feel like a lot since the background “fills in” the space, but check out the space between the headline and the top of the page — it’s actually quite an airy design.
Unique headline effect. In the live version of the site, the headline actually animates in. Even in the static version above, the“hand-drawn” underline effect is an unusual element which draws the eye.
Important words are bolded in the content. Both “NASA’s Jet Propulsion Laboratory” and “Slack” are bold, so you see them first which associates Slack with the prestigious organization.
Main button is a bright, stand-out color. The background is brown and the “Create a new team” button is a lovely contrasting light green. It’s complementary and yet eye-catching.
Main form has a dark background. This ensures the text on top is easy to read (since it’s smaller) as well as making the form more eye-catching.

What else can you see that are good design decisions?

Start browsing the web a bit more mindfully and think critically about what designs are doing and your design intuition will improve. Making this a practice will make it easier for you to make better designs naturally.

This is especially important when you’re actively working on a new design. Start out by looking for inspiration in examples of good design in your field as well as looking at your competitors. Pick out what they’re doing well and implement those ideas in your own design. Pick out what you think isn’t working well (especially in your competitor’s designs) and make sure you avoid those things in your own design.

Remember: Design will never feel easy.

I’ve been building websites since I was twelve (20 years of website development!) and I hold an Art & Design degree… and without fail, this is the thought process I have every time I start to work on a new design:

“crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap … yes!”

The first sketches, the first iterations of a design always feel terrible. I stress and worry about how bad my designs feel when I start, until the magical moment when something works and the design starts to come together. Sometimes it isn’t “yes!”, sometimes it can be “maybe?” But it’s never “yes!” right from the start.

If you’re new to design and you feel like your initial iterations are awful — it doesn’t mean you’re a bad designer. It means you’re a designer.

This is a three part series on design for non-designers. See Part 1 about design and clutter here and See Part 2 about user experience here.

You can get even more info and tips in my book! Hello Web Design will contain not only the above information but also theory and best-practices in down-to-earth and easy-to-understand terms aimed at programmers and non-designers.

Buy Hello Web Design
Prices start at $14.95 for the eBook.

Thanks everyone! For any questions, follow and message me on Twitter.

Thoughts? Questions? Let me know in the comments below!

Design for non-designers: Part 2

Part 1 of this article series focused on the visual (since that’s usually what folks are looking for help with when it comes to design), but it’s important to remember that usability trumps beauty.

The most gorgeous website in the world is useless if folks using that website can’t achieve what they want to do.

Don’t forget the user experience.

It’s more important that your design works well than how it looks. How to tell whether your design is working well?

To illustrate this, think of a form.

We can use design tricks like reducing clutter and better typefaces to make the form look nicer, but we also need to make sure it’s easy to read and fill out.

Technically the form on the left uses all the tactics we discussed in Part 1, but it’s a nightmare for usability. The one on the right is more usable, meaning our conversion rate should go up, which is more important than just design.

Of course, this tip really depends on what you’re designing, so here are some general thoughts to help you keep thinking about user experience.

Determine the purpose of your site.

For a personal website, perhaps you want folks to visit as many pages as possible. For a form, the number of submissions is probably the most important metric.

Make sure you’re thinking about that purpose when making your design.

Make decision decisions that make it easier for folks to fulfill that purpose you determined for what you’re designing. That’s why the most important buttons (the ones we want folks to see and click on) are bright, clickable colors.

Bright buttons or bright widgets catch the eye and tell the user “this is the thing I want you to see and use.”

Think about what you want people to do, and focus on building a design that helps, not hinders, folks from completing that purpose.

A lot has been written about improving usability and the number of visitors who achieve a goal (otherwise known as “conversion rate”). Here are some great articles:

8 Ways to Improve the Usability of Your Website on Quicksprout
5 Design Principles To Instantly Boost The Conversion Rate Of Your Website on VWO
5 Psychological Principles of High Converting Websites (+ 20 Case Studies) on Kissmetrics.

Content matters.

Your headlines, paragraphs, form labels, button text—your content matters just as much as your visual design. What you write can drastically affect whether your visitors understand what you’ve designed and whether they complete the purpose of your design.

Some basic rules of thumb:

Less is more. Cut down on text clutter.

In Part 1 of this series, we talked about design decisions we can make to reduce clutter. Guess what — clutter matters when it comes to content as well!

Big paragraphs of text are intimidating. Folks on the web primarily skim websites, so giant paragraphs of text are more likely to be completely skipped than read thoroughly.

This sentence is long and wordy:

Please note that although Chrome is supported for both Mac and Windows operating systems, it is recommended that all users of this site switch to the most up-to-date version of the Firefox web browser for the best possible results.

Same sentence, rewritten for simplicity:

For best results, use the latest version of Firefox. Chrome for Mac and Windows is also supported.

(Thanks to Peachpit for the example.)

In a nutshell, shorten and simplify your writing. Avoid the temptation to use large words or wordy sentences to cover all the bases — the shorter and simpler your sentences, the more likely they’ll be read, understood, and even translated into different languages.

Rewrite your headlines to talk benefits, not details.

Improve the excitement and interest in what you’re “selling” by writing headlines that tell users why they should be excited. When you’re writing a headline, the first thing to pop in your head might be to explain what the product does. “So-and-so is a designer.” “This thing is a widget.”

Revamp that headline into talking benefits for the person reading it. “So-and-so designs usable and beautiful websites.” “This thing improves website conversions by 30%.”

Left, what the book is about. Right, what the book does for the reader. Benefits are more compelling than details!

Content changes like this can drastically improve conversions (the amount of people who hit your website that does what you want them to do), making what you design more effective.

For more reading about content, check out these resources:

How to check your design for usability problems.

The best way to find problems with the user experience and usability of your design is to run quick usability tests. This can be tough psychologically, because you’ll need to show what you’ve designed to others and get feedback, and sometimes that feedback might hurt.

Divorce your feelings from your design. It might be hard not to take negative feedback personally, but fixing the issues you might find with the usability of your site is more important. The more you reach out to others for feedback, the easier it’ll be.

My step-by-step process for finding usability errors in my designs:

1. Take a break and look at the design with fresh eyes.

Since you made your design, it’s going to be hard to see any usability issues — after all, you know where everything is and how to use everything because you’re the one who built it.

Taking a break from the design, a couple hours or, even better, overnight, means you can look at the design with fresh eyes and catch some problems you might have missed earlier.

2. Run your design by friends and family.

The least intimidating folks to ask for help will be your friends and family, but keep in mind they’ll also be resistant to giving you any sort of negative feedback. Make sure to remind them that you want more feedback than just, “Looks awesome, good job!”

3. Run your design by strangers and watch them use your site.

The most honest feedback will come from folks you don’t know, but this is also the hardest feedback to get. For small stuff like your personal website, you can probably skip this step, but if you’re working on a website for a project you want customers to use, this step can find crucial issues.

Here’s a great article on running quick and dirty usability tests.

In conclusion, make sure your design works as well as it looks.

The best looking design means nothing if your users can’t achieve what they or you want them to do.

Think about the purpose of your design, whether it’s getting someone to fill out a form, to find information, or something use.
Make sure your designs support that purpose and improve the user experience with that in mind.
Don’t forget about your content — simplify your words and write content and headlines that talk benefits, not details.
Show your designs to others and get feedback to find where user experience issues might be hiding.

This is a three part series on design for non-designers. See Part 1 about design and clutter here and Part 3 about training your design intuition here.

Buy Hello Web Design
Prices start at $14.95 for the eBook.

Thanks everyone! For any questions, follow and message me on Twitter.

Thoughts? Questions? Let me know in the comments below!

Black Friday weekend Hello Web Books deals

Black Friday (and Cyber Monday, and Small Business Saturday, and all those other things) is almost here!

From Friday starting 12:01am until Monday 11:59pm, I'll be selling all three of my video courses for 25% off (only $59 for each package).

Hello Web App, my videos + eBook teaching beginner web app development with Django.
Hello Web App: Intermediate Concepts, which teaches intermediate Django concepts.
Hello Web Design, my brand new video + eBook series teaching design for non-designers.

I'll share the coupon code here as soon as it's time!

Also I'll be sharing an even better coupon code to anyone who is on the Hello Web Books newsletter list. If you're not on the list yet, you can join at the bottom of the page.

Happy Thanksgiving to all my fellow Americans!

Design for non-designers: Part 1

Even if you’re not a designer, I’d bet that at some point in your career you’ll need to do something visual, whether it’s making a landing page for your project, designing a form, creating your personal website, or making slides.

So, part one — what’s the one main thing to remember when designing?

Reduce clutter.

That’s it. Focus on just this one thing. If you want your design to feel more beautiful, reduce visual clutter.

Our ugly widget that we’re going to apply design concepts to.

I made these little widget to help illustrate these clutter-busting tips. As we go through the concepts below, we’ll apply them to the widget and see how it starts to look more cohesive and visually appealing.

Let’s get started!

Reduce clutter by adding a grid to line things up.

Image via the Foundation front-end framework.

There’s an anecdote often told about the strife between designers and front-end developers: A designer gives a mockup to a developer, who implements the design in code. The designer then complains that so-and-so element is two pixels off, causing the developer to roll their eyes — two pixels? That’s so small it shouldn’t matter! Silly designers and their nitpicking!

However, small misalignments might be hard to see, but contribute to a feel of “clutter” within a design. Elements can feel randomly placed and not harmonious when they’re not aligned with each other.

Which looks more cohesive?

It’s easy to add accidental misalignments by accidentally adding extra padding and margins to headlines and content. In the example above, the screenshot on the right has even margins and padding, and all the elements are aligned to the same left grid, leading to a more cohesive and professional-looking design.

Lining up the left and right edges of everything makes the widget look a bit more cohesive.

In our example widget, the left and right margins were all over the place. Aligning those margins instantly makes the widget feel less chaotic.

In short, reduce the clutter-y feeling by lining things up.

For web work, use shortcuts by using front-end web frameworks that include a grid, such as Foundation, Bootstrap, Skeleton, and PureCSS, which’ll make it near-impossible to use random placement of HTML elements.

For non-web-design work and mockups, you can also use grids and guides within design programs like Sketch, Photoshop, and Gimp.

Reduce clutter by limiting the colors in your design.

It can be super tough to choose colors, one of the reasons why color theory is often a semester-long class at design schools.

Old GoDaddy site versus current.

One thing we can see in the old GoDaddy site above is the sheer numbers of colors used throughout the design. Red, green, orange, dark grey, light grey, yellow, and blue all are featured — and this rainbow display of colors contributes (along with other factors) to a severe feeling of clutter.

The current GoDaddy website is much cleaner, using the same shades of black, green, and orange throughout the design. The photo is also mostly gray, allowing it to fade to the background and let the green button on the form stand out.

There is a lot of theory and best practices behind choosing colors that would overwhelm this article, which is why here especially I advocate for using shortcuts.

The Adobe Color CC website has a great point-and-click interface to build complementary color palettes.

Choosing a color palette from scratch is a tricky business, which is why I like to rely on websites that showcase pre-built color palettes or help you build palettes from a base color, such as Colormind, Adobe Color CC, and Colorblendy. These sites will help you build a palette that contains a small number of colors that work well together.

Applying a color palette.

For our widget, we grabbed a palette and applied it to the widget. Note that not all colors have to be used, and the neither does the exact colors specified in the palette. The new “Download” button is not quite the same dark peach as in the palette, but the palette gave us a great starting point.

If you’d like to learn more about the process of building colors, I’d recommend this excellent article on Smashing Magazine: A Simple Web Developer’s Guide To Color.

Reduce clutter by reducing the number of fonts you use.

Thank goodness we have more fonts available to us now! Gone are the days of only having a few fonts to choose from.

Typography is another big subject that can be overwhelming. Serif, sans-serif, monospace, display, web-safe, and slab are all terms used to describe and categorize fonts and typefaces (terms which are generally used interchangeably for non-typographers).

There are a lot of guidelines when it comes to choosing a font but I like to recommend just two to start: Use only two fonts per design and avoid fancy/display fonts.

Using only two typefaces makes the widget look and feel cleaner.

Our original widget on the left uses four different fonts, and our refreshed widget on the right uses just two. The new widget uses styles like italics and all-caps which still lends a feeling of difference between different elements but overall feels more cohesive.

But choosing two fonts with all the options we have available can still be overwhelming. Sites like Typekit (free to $99/year) and Google Fonts (free) are great resources for professional, beautiful fonts, but contain hundreds of options to choose between them.

Use sites that curate free fonts like Typewolf, Beautiful Web Type, Font Pair, and Typ.io.

Reduce choice by using a font-curation site to see a more limited number of fonts and see them in action. A number of websites list the best Google Fonts available, including Typewolf, Beautiful Web Type, Font Pair, and Typ.io. No longer will you need to scroll through hundreds of fonts—simply browse these sites until a combination feels right for you and your situation.

For more about choosing typefaces, check out this excellent Smashing Magazine article: How To Choose A Typeface — A Step-By-Step Guide.

A Book Apart also has an excellent book that goes into web typography in detail: On Web Typography

Reduce the feeling of clutter by adding whitespace.

Whitespace is the ultimate clutter reducer.

We have a tendency as beginning designers to push too much information close together. Large, empty gaps feel uncomfortable and unnatural and beginners often have the urge to fill empty space (otherwise known as whitespace or negative space) with information and elements.

Before and after adding white-space to my personal website.

However, whitespace in design (the margins and padding around our elements as well as space between our text and letters) makes our words more readable, our interfaces less chaotic, and our designs feel more professional.

Adding whitespace (and normalizing the space between elements) makes the widget feel more professional.

By adding whitespace in a number of places in our widget — between the content and the edges of the green background, between the headline and the paragraph, between the individual lines of text, and within our form — our widget feels more professional and is easier to read.

There isn’t a good shortcut to use here, just a reminder: Use more whitespace than you think you need. Make sure your elements in whatever you’re designing has plenty of margins and space between them, that your text has plenty of space/line-height between the individual lines, and that your design has plenty of space between the content and the edges of the space.

For more, check out these excellent articles:

In conclusion, remember to reduce clutter for a better looking and feeling design.

Each of the clutter-reducing principles applied to this widget has vastly improved its looks.

Line things up and use a grid.
Limit the number of colors in your design and use a complementary color palette.
Reduce the number of fonts used.
Add whitespace.

In short, aim for a “clean” and orderly design.

Of course, design isn’t just how it looks — more importantly, it’s how it works. Stay tuned for part two and part three of this article series, going into user experience as well as looking into the design process and tactics on how you can train your design eye.

This is a three part series on design for non-designers. See Part 2 about user experience here and Part 3 about training your design intuition here.

Buy Hello Web Design
Prices start at $14.95 for the eBook.

Thanks everyone! For any questions, follow and message me on Twitter.

What do you think? Anything I missed? Let me know in the comments below!