We have started boxing in class. Not with each other though.
Introducing the CSS Box Model. Ta ta!
For those who don’t know or didn’t until now, here’s a summary of what I mean.
All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. Read more here!
This is what it looks like in a nutshell. I will be adding images from the boxing class later.
Create a CSS class named box with a certain set of rules
Open in HTML
“Mess with the values” and see how it effects the output
I also inserted a paragraph and made one box round (changing the border-radius), is it still called box then? Yup!
Elements that make the Box Model
Understand the display properties
Demonstrating how to achieve different layouts
Result:Yes, I can box this!
A collection of my boxes… 🙂
The purple box would change the colour to purple and its shape from the turquoise circle above, when hovering over with the mouse. #notaveryprettypicture
So you may ask yourself, what are wireframes? Or maybe not… I did! Learn with me if you wish!
“Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. If you’ve yet to use wireframing, it’s time to get your feet wet.”
I guess it’s time to get my feet wet so. What for though? Use wireframing to articulate ideas or even explore ideas before taking the expense of actually building the final product…Makes sense to me!
So the task last week was to come up with mock-ups for an app. While trying to figure out who to target first, we got scissors and paper. Not to play rock-paper-scissors though.
App to be developed: Medical Check for Doctors on their patients
Think about User Interface: Someone who had surgery recently and needs to be monitored still
Some criteria that should be recorded with the app: Mood/ Meals/ Fitness
Chosen Persona: Breast Cancer patient, 39 with kids and active life
She will be greeted with a screen “Hello, Gorgeous!” and asked how she feels today on scale from “moody” to “happy”…