First Steps With UX Design

UI Design For DSDC79.com

User experience design ( UX ) along with user interface web design ( UI ) are part of a larger infrastructure in today's tech marketplace. For those of you wishing to embark on a career as a lead business analyst with UX design background, this article will be right up your alley. This article will cover a basic UX workflow along with helpful app resources for quickly performing prototypes. My web prototyping workflow begins with quick paper to digital designs. Using MindNode to create a complete site map for DSC79, I began coding the static html5/css/js templates from Boostrap to WP. 

Paper Prototypes 

UXDesign1


" You Have To Know What You Want Before You Can Build It"

--Scott Jensen


 

UXDesign2


 

UXDesign3

The folks @ UI Stencils make an array of wonderful UI-UX related tools. For those of you who are paper to digital centric designers. 


UXDesign4

 


UXDesign6

The home page for DSC79 uses an infinite parallax scroll effect. However, creating additional template pages in addition to the home section ensures a responsive consistency. 


 UXDesign7


UXDesign8

In future iterations of the project, there will be a signup page for the webinar series. My goal is to publish ten articles while I work on developing a comprehensive podcast newsletter. For those of you who wish to subscribe. 


UXDesign9


UXDesign10


UXDesign11

 The home page with the infinite scroll design, along with basic call to action strategy for the user


 

UX-UI Design

Wiki-How

  • OmiGraffle: is for creating precise, beautiful graphics. Like website wireframes, an electrical system design, a family tree, or mapping out software classes. For artists, designers, casual data-mappers, and everyone in-between.

Omigrafle


 

  • 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.
  • As a full stack web developer, I have a solid understanding of UI-UX design. With a high interest on developing new experiences for all mobile devices using these tools. 

MockUps


  • Boostrap: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  • I use Boostrap as both front end web template builder for WP CSM themes and as a dashboard CRM front end. Developers are able to download the compiled source files in able to create fully customizable projects. 

 


MindNode

  • MindNode:  Makes mind mapping easy. Mind maps are a visual representation of your ideas, starting with a central thought and growing from there. This allows you to brainstorm & organize your thoughts in an intuitive way, so you can focus on the idea behind it.

 

 

3 thoughts on “First Steps With UX Design

  • So many good articles i read here, i think you can make
    dsc79.com go viral easily using one tricky method.
    Just search in google:
    Ildis’s Method To Go Viral

    • Cheers Foster,

      Its one of my goals for DSC79 at some point down the pipeline. Currently, I am working on new content iteration with an subscription option with Webinar series. Once these area of the site is complete I will look into viral opportunities for the site. Stay tuned,

Leave a Reply

Your email address will not be published. Required fields are marked *