Recap: My First Video Chat with DNN Dave

Here are the notes from the chat I had with DNN Dave on "How To Approach Development With A Design First, Critical UI/UX Mindset"

1. Design first
   1. Do rough sketches first to get an overall sense of what you're building.
   2. Focus on designing and developing the interface first. By doing this, you imply the functionality
   3. Create the various screens that you / your users will see and link them up to flow between them
   4. Once you do that, you'll be able to infer what the module actually does and experience it as a user would.
   5. http://wolfxmachina.com/blog/category/how-to/design-the-interfaces-first
2. Design for content
   1. Designs could vary wildly depending on the content you're designing. For example, if you have a listing of 10 items vs a listing of 500 items, the layout might be different because when you are listing out 10 items you less things to design. But if you have 500 items, then maybe you need filtering/sorting, search, pagination, etc.
3. Choose the right words
   1. Language makes a huge difference and it can change the entire perception of your software for your user. "Submit" > "Save" > "Save Profile" for example.
   2. Be specific in what the action does or what you're asking for: is the button "Save" or "Save Draft"?
4. Mobile first
   1. When possible, use components that are mobile friendly. For example, if you're creating a menu, start simple and build up for the desktop experience rather than starting with a more complicated desktop version and then breaking it down.
   2. Instead of using tables, maybe use card styles if you can - or at least use card styles on mobile and then have a different layout for desktop views.
5. Epicenter design (from Getting Real)
   1. Design things from the center out. So if you're designing a new page that is all about getting the user to sign up for a mailing list, don't start with the header and footer of the page. Start with the most important things on that page which is the sign up form, button, text, heading and anything else that surrounds that form. Start at the most important and make your way out.
6. Alignment, spacing, and consistency
   1. Equal spacing around and between elements make for more legibility and clean lines.
   2. Ample whitespace
   3. http://wolfxmachina.com/blog/category/how-to/a-micro-lesson-spacing-and-alignment
7. Labels + Icons
   1. When creating forms and other little components, use text + icons if you can. Text alone is mandatory. Don't use only icons.
   2. For a quick win, use Font Awesome Pro because it has nicer and more icons available.

It was a great experience overall and I'm hoping we can do some more videos!