Startup Resources: Design

Everything you need to design a user experience for your startup, including templates, fonts, wireframing tools, community resources, checklists, and further reading. See the "Ideas, Design, MVP" chapter in Part I, Products for more info.

  1. Website templates
  2. Mobile templates
  3. Email templates
  4. Fonts
  5. Font pairing
  6. Color Palettes
  7. Wireframing and mockup tools
  8. Usability testing and user surveys
  9. Design services and community
  10. Design checklists
  11. User Personas
  12. Further Reading

These startup resources are based on the book Hello, Startup: A Programmer's Guide to Building Products, Technologies, and Teams by Yevgeniy Brikman. These resources are a work in a progress. They are also open source, so you can add your contributions by submitting a pull request to the Hello, Startup GitHub Repository. To see how these resources fit into the bigger picture, check out the The Startup Checklist, which is a comprehensive collection of everything you need to do to launch a startup.

Mobile templates

Ratchet

http://goratchet.com/

Build mobile apps with simple HTML‚ CSS‚ and JS components.


Inspired UI

http://inspired-ui.com/

Mobile Apps Design Patterns


Pttrns

http://www.pttrns.com/

Mobile User Interface Patterns



10 Pure CSS (Mostly) Flat Mobile Devices

http://marvelapp.github.io/devices.css/

We've created several minimal iPhone, Android, Lumia and iPad devices in pure CSS to showcase the prototypes our users make on Marvel. Grab the code, remix and enjoy!


Fonts

Google Fonts

https://www.google.com/fonts

Free, open source fonts with CDN hosting by Google.


Adobe Typekit

https://typekit.com/

Typekit is a subscription font service that brings thousands of fonts from foundry partners into one library for quick browsing, easy use on the web or in applications, and endless typographic inspiration.



Font pairing

Google Web Fonts Typographic Project

http://femmebot.github.io/google-type/

Hand-picked tales from Aesop’s fables with hand-picked type from Google Fonts.


Font Pair

http://fontpair.co/

Font Pair helps designers pair Google Fonts together.


Just My Type

http://justmytype.co/

A collection of font pairings from Typekit and H&FJ.


Type Genius

http://www.typegenius.com/

Find the perfect font combo for your next project.


typ.io: What font goes with what?

http://www.typ.io/

We're revealing designers' decisions for all to see; peeking under the hood of beautiful websites to find out what fonts they're using and how they're using them. Ultimately, we want to know what font goes with what?


Wireframing and mockup tools


Balsamiq

http://balsamiq.com/

Balsamiq Mockups is a rapid wireframing tool that helps you Work Faster & Smarter. It reproduces the experience of sketching on a whiteboard, but using a computer.





OmniGraffle

http://www.omnigroup.com/omnigraffle/

OmniGraffle is for creating precise, beautiful graphics. Like website wireframes, an electrical system design, a family tree, or mapping out software classes.



Usability testing and user surveys

UsabilityTools UX Suite

http://usabilitytools.com/ux-suite/

A suite of remote testing tools, including click testing, web testing, and surveys.


GhostRec

http://www.ghostrec.com/

Record real visitors surfing your website without additional hardware or software.




No screenshot available

Free Copy Critique

http://www.freecopycritique.com/

Get a free copy critique of your website.


ClickHeat

http://www.labsmedia.com/clickheat/index.html

ClickHeat is a visual heatmap of clicks on a HTML page, showing hot and cold click zones. ClickHeat is an OpenSource software, released under GPL licence, and free of charge.




Silverback

http://silverbackapp.com/

Guerilla usability testing on the Mac made easy


survey.io

http://survey.io/

Have you every wondered who the most passionate users of your product are? Or why they are using it? We have too! That's why we are creating tools to enable you to better understand your customers to help you improve your product. Survey.io is a simple survey tool originally created as a collaboration between Sean Ellis and KISSmetrics.


Design services and community

Dribbble

https://dribbble.com/

What are you working on? Dribbble is a community of designers answering that question each day. Web designers, graphic designers, illustrators, icon artists, typographers, logo designers, and other creative types share small screenshots (shots) that show their work, process, and current projects.


DesignCrowd

http://www.designcrowd.com/

DesignCrowd is an online marketplace providing logo, website, print and graphic design services by providing access to freelance graphic designers and design studios around the world.


99designs

http://99designs.com/

99designs pioneered the design contest, where designers submit competing designs in response to a customer’s design brief—and the winner receives a cash payment for their work. Through more than 371,806 design contests, we’ve paid out $93,422,757 to our designer community to date.


Graphic Springs

https://www.graphicsprings.com

Online logo maker. Creating the logo is free, but if you want to download it, it's $39.99.


Design checklists

Quick Usability Checklist

http://www.uxbooth.com/articles/quick-usability-checklist/

After reviewing websites for a few months, I’ve begun to see general patterns emerge that make a site more or less usable. In this post, I’d like to highlight some of the more common problems designers should address on their own sites in a Usability checklist of sorts.





No screenshot available

Web standards checklist

http://www.maxdesign.com.au/articles/checklist/

A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc). In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.


No screenshot available

Aaron Cannon’s Web Accessibility Checklist

http://cameronmoll.com/archives/2008/06/web_accessibility_checklist/

When I wrote the below checklist, I attempted to answer the question, ‘What concise pieces of advice can I give to designers that will have the greatest impact on accessibility in the majority of cases?’


User Personas

Introduction to User Personas

http://www.ux-lady.com/introduction-to-user-personas/

From all over the techniques and tools related to design process and User experience, only personas appears as a consistent common denominator, even in methods against the use of extensive “deliverables” as Lean UX. Most of the point of view agree in that the secret of a great user experiences strategy lies on this tool, even so the building process varies significantly.


Personas - Development Impact and You

http://diytoolkit.org/tools/personas-2/

Personas are portraits of fictional but realistic individuals that are used as a common reference point to communicate particular groups in your intended audience. Personas are created by drawing together the characteristics of similar people – their behaviours, motivations and the like – into one ‘archetype’ through which the group can be understood. By creating a fictional character to embody these characteristics, you don’t lose the little details that make someone the person they are. In this way, Personas help ensure that your work stays focused on people, rather than an abstract description of the group they are said to represent.


No screenshot available

Personas

http://www.usability.gov/how-to-and-tools/methods/personas.html

The purpose of personas is to create reliable and realistic representations of your key audience segments for reference. These representations should be based on qualitative and some quantitative user research and web analytics.


Further Reading

A Crash Course on Design for Developers

https://www.ybrikman.com/writing/2015/10/07/crash-course-design-for-developers/

This is a talk that introduces the basic tools of user-centered and visual design. It’s targeted at developers and any other design newbies who want to improve the design of their websites, mobile apps, resumes, slide decks, and so on.
















A List Apart

http://alistapart.com/topics/design

A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.