Wolf X Machina

Back to blog

Recap: My First Video Chat with DNN Dave

Posted in DNN, Design on September 8, 2020

A couple of weeks ago, I had the immense pleasure of chatting with Dave Poindexter of nvisionative about UI / UX design on his DNN Dave YouTube channel.

The topic of the chat was "How To Approach Development With A Design First, Critical UI/UX Mindset" and we spoke about a few things I've always strongly felt could be a better way to creates websites and modules.

In this recap, you can watch the video below and I've listed out my notes as well as some bonus advice not mentioned in the chat. Read on!

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!

I would love to hear your thoughts on this video so please feel free to comment below. And if you're looking to develop something and need some help with the interfaces, check out https://wolfxmachina.com/ui-design-and-development-for-programmers

Aaron Lopez

Aaron Lopez

Founder & Lead Developer at Wolf X Machina

Theme picker

Wolf X Machina

Next Level Interface Development for the DNN CMS

DNN themes, module design, and more from Wolf X Machina.

Learn More