How to Choose a Wireframing Tool

This post is a breakdown of the popular Wireframing tools out there.

Omnigraffle vs. Balsamiq

Omnigraffle and Balsamiq do about the same thing. They are desktop apps for quickly making wireframes, mockups, page layouts, etc. Here are some of the differences:

Omnigraffle

  • Desktop app: $99-$199
  • Web app: n/a
  • http://www.omnigroup.com/products/omnigraffle/
  • High fidelity: high level of detail, therefore take longer to create, but look more like the actual page
  • Slightly higher learning curve than Balsamiq (in my opinion). But I prefer Omnigraffle overall for my style of developing wireframes.

Balsamiq

  • Desktop app: $79 for desktop
  • Web app: $12+/month for web
  • http://www.balsamiq.com/
  • Low fidelity: less detail, they resemble a rough sketch and therefore can be produced much quicker

(Both Balsamiq and Omnigraffle have free trials. So why not give them a try and see what you think?)

Keynote

Wireframe.cc

  • Pro: An easy way to just… start. Great for something quick, and low fidelity
  • Con: You can “save” to a URL, but can’t export to a file
  • http://wireframe.cc/

More Questions

Q: Do you ever use illustrator or photoshop for your wireframes? -Zack

A: You can. But they aren’t as optimized for wireframes. I find that it takes me more time using those programs.

Q: What are your thoughts on go mockingbird? – Zack 

A: I’ve never used it personally, but many of my students have. Looks promising!

Q: Can you use InDesign for wireframes? 

A: I’ve never tried it personally. But here’s a tutorial with some thoughts on InDesign and wireframes.

Q: What are some other options? Have you used X, Y, Z? -you

A: I haven’t used any of these personally so I can’t really judge them for you. But here’s a list of some more options… go explore! Report back.

Omnigraffle vs. Balsamiq: Screenshots

Balsamiq Wireframe Example
Omnigraffle Wireframe Example
Balsamiq Mobile Wireframe Example
Omnigraffle Mobile Wireframe Example

How to Pitch Your Startup to A Developer

I recently saw Tom Hessert of Derby Jackpot write the perfect pitch to a developer.

In the letter. He really hit many of the main points of validation: team, funding, MVP, and compensation. Here it is..

The Perfect Developer Pitch

Chris (aka. The Developer),

I’m working with a team of two to build an online horse racing app called Derby Jackpot.

Our research shows that there is no legal way to gamble on horses in America. Derby Jackpot solves that demand by offering the first online horse racing app. In the past 6 months, we’ve worked hard to validate our MVP, and now we’re certain there is a market demand of over 100,000 people.

We have strong domain expertise: my co-founder has over 10 years experience on the business side of horse racing. We’re fully funded, and offering equity and/or a very competitive salary.

Thanks for taking the time! I’d love to tell you more.
Tom

Here’s a template you can use:

[Developer’s name],

I’m working with a team of [how many people on your team?] to build an [what are you building?] called [product name].

Our research shows [some market problem]. [Our product] solves that demand by [what is your solution to the problem?]. In the past [6 months], we’ve worked hard to validate our MVP, and now we’re certain [some promise of success].

We have strong domain expertise: [you or your co-founder?] has over [some number] years experience in [what field are you in?]. We’re [are you funded? be honest], and [what compensation are you offering the developer].

Thanks for taking the time! I’d love to tell you more.
[Your name]

The Easy Part Is Writing the Email

The hardest part is doing the prep work: Tom has done his market research, he has expertise in the field, and he’s validated his MVP. (Way to go Tom, we like that!)

Now it’s your turn! So maybe you have some work to do before emailing another developer?

How to Hire a Developer: 7 Things A Developer Wants to Know

I'm looking for a developer

Clearly there is a high demand for developers these days. If you’ve been pitching developers, with little luck, it may help to know what a developer wants to know.

What the Developer Wants to Know

  1. How many people are on your team? Are you a small team, or a large team?
  2. What problem are you solving? Many great developers are interested in solving real-world problems, or at least REAL problems.
  3. What is your proposed solution to that problem? What have you tried? What’s working? What’s your hypothesis?
  4. Have you validated your MVP? Watch this video on MVP if you’re not familiar with what an MVP is.
  5. Do you have domain expertise? For example, if you’re making an iPhone app for doctors, it really helps if you have experience working in healthcare or a hospital.
  6. Are you funded? Where’s the money coming from? Is this an equity gig?
  7. What are you offering in terms of compensation? Will I be working for free?

With all that said. Keep it relatively short! And don’t be discouraged if you can’t promise all of these details. Be upfront, clear and professional and that will demonstrate just how capable you are.

The Perfect Developer Pitch

Now that you know what developers are asking for, read The Perfect Developer Pitch by Tom Hessert. See how he uses these 7 answers in his pitch.

How to Choose Web Hosting

Choosing a Web Host can feel overwhelming. The following is a list of resources I can vouch for. This is based on my own personal experience with clients, working at design agencies, and feedback from trusted friends.

Shared Hosting (Beginners and all-purpose)

Pros: Shared hosting is relatively cheap, and easy to get set up. To be honest, this solution is probably the best for most Web Sites.

Cons: Will you get a massive load of traffic? Think Reddit.com or a large social network site. If so, shared hosting may not be enough power for you after you scale. Long story short.. you are sharing the same server with other people. If you’re making a Web App where you expect millions of unique hits… you might want to try dedicated or cloud based hosting.

  • BlueHost – $3.49/month shared hosting [1st CHOICE]
  • HostGator – $7.99/month shared hosting (use coupon code onemonthhtml and your first month is free)

VPS and Dedicated Hosting (Small Business)

A more robust option for your small business.

  • Rackspace – It’s expensive. But think of it as the Rolls Royce of hosting. $100-$400 a month. [1st CHOICE]
  • MediaTemple – $50+/month

Cloud Based Hosting (Advanced)

Are you using Ruby on Rails? Use Heroku.

  • Heroku – Resizable capacity in the cloud. Best used with Ruby. [1st CHOICE]
  • Amazon EC2 –  This is a wonderful options for sites that have the potential to scale quickly. The down side is that setup and maintenance are much more intense than the shared hosting plans.

Domains

  • NameCheap – Cheap and reliable. I use NameCheap for most my new domains.
  • GoDaddy – Buy domains. That’s what you do here. (I wouldn’t recommend their hosting.)
  • Domainr – Great tool for brainstorming possible domain names
  • Gandi.net – For for country code TLDs such as .cc, .it, .es

 

 

The Best Books to Teach Yourself How to Code

HTML+CSS

Product Development & UX

  • Lean UX by Jeff Gothelf & Josh Seiden. Inspired by Lean and Agile development theories, Lean UX lets you focus on the actual experience being designed, rather than deliverables. You’ll learn how to drive the design in short, iterative cycles to assess what works best for the business and the user.
  • The Lean Startup by Eric Reis – A manifesto on the Lean Startup movement. Learn how to build a product that people want. Because really, the worst thing is to spend months developing something… that nobody wants.
  • The Startup Owner’s Manual: The Step-By-Step Guide for Building a Great Company – by Steve Blank

JavaScript

PHP

SQL

  • SQL in 10 Minutes – Just a quick and easy reference for getting started. I used this when I learned.
  • Head First: SQL – A fun, conceptual, and projected based approach to learning.

WordPress

  • WordPress Step-by-Step – My guide for beginners. Learn to theme.
  • Digging into WordPress – I don’t know a better book out there (and I think I’ve read, reviewed or seen them all by now). Chris Coyer (of the famed CSS Tricks) has really done a great job. I think the PDF for $27 should just suffice, unless you’re a hard book type then that is also an option.
  • CSS Tricks & Smashing Blog are both great blogs for WordPress!

Command Line (aka. Using Terminal)

  • Command Line Crash Course –  Sit down for 1 hour. And complete this tutorial. It’s a necessary foundation for programming and in general… just using your computer. (Mac Only)

SEO

  • Google’s SEO Starter Guide – [PDF]

 

What is HTML5?

HTML5 is just an update to the HTML language. Think of it as an update to any software program that is on your computer…

Me: “What’s the real difference between Microsoft Word ’95 vs. 2010?”

And then you’re all like: “Uh, not much. They pretty much do the same thing. But the newer version of Word has some new features, and they took away some of the features that I never used… like Clippy the talking paperclip.”

Me: “Exactly. HTML5 is just the same”.
Continue reading What is HTML5?

Launch A Website Quickly with FTP

Q: Hey Chris. I have HTML files. How do I get them on the Web?
A: FTP (Read more for how to get started)

1. Before You FTP, You Need Hosting

The first thing you need is A PLACE TO PUT THOSE FILES. Where is that place? Answer: hosting. I set up a basic tutorial on how to get started with Hostgator (a cheap and reliable hosting solution). Other hosting companies I recommend are listed on the Suggested Web Hosting Page.

Ok, so we have a host. We did that. What’s next?

Your host sent you a “Welcome” email. In that email there is a username, password, and a bunch of other details. SAVE THAT EMAIL. Archive it. Put it in Evernote. Google spreadsheet. Whatever works, you want to be able to find this easily in the future.

2. Download and Install an FTP Client 

Choose one here. But the short of it is that I recommend Cyberduck (for free)… or even better Transmit if you have a few bucks to put into this.

3. Add Your Credentials

You need to add: username, password, domain name. Where do I get that? It’s in your hosting email (see step #1 above)

Here’s how FTP setup looks in Cyberduck:

Here’s how FTP setup looks in Transmit (the same concept as above, but in a different program)

4. Move Your Files From Your Computer to Your Server

Below is a simple example screenshot using Transmit. It’s pretty much the same with any FTP client. Alternatively, you should be able to drag files right from your desktop (or the Finder) onto the server. Dragging the opposite way? Bingo.. it downloads it.

Q: I used Cyberduck. 

A: That’s not a question. But if you chose Cyberduck do yourself a favor…

Go to “PREFERENCES -> TRANSFERS -> PERMISSIONS” and uncheck the “Change Permissions” boxes.

Explanation why you are doing this: By default Cyberduck changes your permissions and you’ll have an error uploading PNGS. So, save yourself the trouble later on and make it look like this…

Q: I get FTP. What is SFTP? 

A: It’s just “secure” FTP. You know, just like “http://” and “https://”. If you choose to setup SFTP with your hosting provider, make sure you also chose that setting in your FTP client. It doesn’t cost anything extra to setup SFTP… so I say, sure why not do it.

Q: Thanks Chris, but, but, but… can I use GIT instead? 

A: Sure, but FTP is great for beginners. Git is probably unnecessary if you’re just starting out. And besides, I still use FTP for small projects and for throwing files on the Web quickly.

Let’s Do Simple Stuff to Make Our Websites Faster

“On average, 80% of the end-user response time is spent on the front-end” – Steve Souders 

4 Things You Can Do Right Now: 

    1. Turn on HTTP Compression – Is your content gzipped? It should be. Find out here: gzipWTF.com
    2. Cache Stuff – Server & client. Here’s a plug-in that makes it super easy for WordPress: W3 Total Cache
    3. Losslessly optimize images! – I use Codekit.
    4. Combine CSS and JS! – HTML can only make 2 requests at a time (from one URL/domain that is). Therefore if you have 10 JS files on one page, you’re slowing down your site. Include them all together in one file to make less requests. Using a CDN also helps.

A more in depth reading:

http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/

Watch Chris Coyier’s Video “Let’s Do Simple Stuff to Make Our Websites Faster”:

Your Coding Questions (Answered in plain English)