• Add to Collection
  • Tools Used
  • About

    About

    A user profile for a Pattern Designer named Maggie Wilson. You are able to learn more about the user's profile, view their skill level's, and con… Read More
    A user profile for a Pattern Designer named Maggie Wilson. You are able to learn more about the user's profile, view their skill level's, and contact them via a form through the tabs. This project is being expanded and you can view the code via Codepen through the link below. This is an example of a User Profile. I used Bootstrap, FontAwesome Icons, HTML/Jade, CSS/Sass, some Creative Commons Images from Flickr and UIFaces. Read Less
    Published:
A user profile for a Pattern Designer named Maggie Wilson. You are able to learn more about the user's profile, view their skill levels, and contact them via a form through the tabs. This project is being expanded and you can view the code via Codepen through the link below. Used Boostrap as a framework for responsive design and create the tabbed components. In addition, used Jade, a Node template engine that makes HTML development faster, and Sass, a scripting language that uses mixens, variables, and functions to output CSS.
 
Before moving to any sort of code or even begin to think about color palettes, you want to begin the UI design process by first gathering information. What is the purpose? What are the goals? What is the content? Once you have gathered these things it's time to start sketching. A lot of people start with the computer, I am old fashioned and always start low fidelity wireframing with good old pencil and paper. Once I have established a layout, for presentation purposes, I will move to a tool like Balsamiq Mockups or Adobe Illustrator and layout the building blocks of the layout. For this project, I went from the sketch to markup and layout in CodePen.