Can You Box This, Please?

Hello again!

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.



  1. Create a CSS class named box with a certain set of rules
  2. Open in HTML
  3. “Mess with the values” and see how it effects the output
  4. I also inserted a paragraph and made one box round (changing the border-radius), is it still called box then? Yup!

Learning Outcome:

  • 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… ūüôā

My Box Models
My Box Models

The purple box would change the colour to purple and its shape from the turquoise circle above, when hovering over with the mouse. #notaveryprettypicture

Boxes with different colours

Check the back-end, my box HTML code below.

HTML code


Repeat after me: /b…Ēňźlňąsam…™k,b…ílňąsam…™k/

I must have been hungry because I could only think of salad dressing when I heard “balsamic”. However, it¬†isn’t what I think because I’m sitting in my UX class! And while I cannot make a balsamic chicken dish with it (well I could draw it), this tool “Balsamiq” allows me to get creative.

Balsamiq Mockups is a user interface design tool for creating wireframes or mockups. We can use it to create sketches of our product ideas to share with team members of users before writing any code.

Some of the basic components of Balsamiq include:

  • Toolbar – The primary control interface for common commands (copy, paste, delete)
  • Canvas – The grid area where the drawing occurs
  • UI Library – Controls that can be dragged onto the Canvas at any time.
  • Navigator – Allows navigation to your other mockups through thumbnail images.
  • Property Inspector – Allows the configuration of properties and actions specific to each UI Control (colour, size).
Balsamiq Interface start screen
Balsamiq start screen


Picking up from the wireframe class the other night, where we did a paper mockup of our medical mobile app, the design process has been moved on to the screen now.

Showing the start screen and the first screen below of the app.

Balsamiq Mockup: Medical Check App
Balsamiq Mockup: Medical check mobile app for fitness, mood and eating habits of patients

Learning Outcome:

  • Get the basics
  • Adding controls
  • ¬†Image paper controls
  • Completing the mockup
  • Finishing touches

Result: Liking it! Getting better every class!


Hello again!

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”…

So many ideas, so little time in the end…

The Good, The Bad and The Ugly

Hello World!

We have all had the experience of truly loving an idea, a concept, a particular design or went the other way and lost our minds over something that was not fit for its purpose and failed us greatly.

I am an artist and appreciate good designs as opposed to the ones that make you wonder what they were doing during their production meetings. I like the below principle.

“Form follows function is a principle associated with modernist architecture and industrial design in the 20th century. The principle is that the shape of a building or object should be primarily based upon its intended function or purpose.”

So let’s look at two very good ideas, at least in my opinion, and two very badly designed items.

Sony Earbuds – not made for ears!

Extra bass! Yay! But if¬†I have a hard time getting them into my ears then where is the point of having them? I have lost my Skullcandy earbuds and had to buy new ones at the airport recently. The choice was slim and they were all in boxes so I couldn’t take a good look at¬†them, plus pressing time¬†catching¬†a plane. Then I saw these for 20‚ā¨ and thought they’ll do for now. The fact they had them in¬†my favourite colour¬†was an added bonus.

Earbuds (Sony)

Little did I know that I would have a hard time getting these into my ears. First, you have to ensure to pair the left one with your left ear and the right one with your right ear. Otherwise they won’t fit at all. They¬†are quite big,¬†the material is rather¬†hard and therefore they are not very comfortable to wear. Perhaps my ears are too delicate! So thumbs down from me.

Staying with airports and planes. Don’t we all¬†love the middle seat?! Unless you are travelling with people you are close to, those middle seats are not ideal if you want a bit of space or privacy. Not that there is much on a plane.

The Middle Seat – should there be one?

I am never sure if I am “entitled” to the armrest to my left or to my right, or both? Either way, while not trying to get too close to the neighbouring shoulders I am framed with, I will unfold the table top in front of me and rest my case there. So for me it’s definitely worth spending the extra cash to book the seat I feel comfy in as far as airplane comfort goes.

The Middle Seat (airplane seat row)

Now, on to the good ones!

Screwpull Bottle Opener

I love wine, our group project in college was about wine ( I’m getting better of finding good wines. In order to get the “juice” out of the bottle, you need to open it. Easy if it is a screw cap. Not so easy¬†when there is a cork. Bottle between the legs, pulling like crazy. Bottle on the floor between the feet pulling like crazy. Pulling so hard, because the cork screw is stuck, that you break the cork by ripping bits out of it. Still no wine. Alternatively, you manage to remove the corkscrew and force the cork into the bottle. Cool, when you are alone, not so cool when you have guests. You may want to offer beer instead!

A while back I got a gift, a¬†Screwpull Bottle Opener. “How fancy”, I hear you say. Well, it is. While I failed at first (user error, trying to use it like the old-fashioned ones. doh!), it is the¬†easiest way of getting the cork out of a bottle and¬†a great way to ¬†impress your guests with this gadget. It is easy to use, fast and looks¬†really neat. No more messing around! I cannot believe you don’t have one yet.

Screwpull Bottle Opener (Le Creuset)

Last but not least. Something very simple. Without further ado and introduction, I present you…

Match Sticks!

Mentioned first in a book called the Records of the Unworldly and the Strange written by Chinese author Tao Gu in about 950 AD.

I use them every day not to burn the house down but to light candles (which may burn the house down) and burn incense (to cover up). Kidding!

Match Stick Heart