The most popular tools of the year – 2017

2017 Banner Image

According to designer from across the globe, these were the most used tools by designers in 2017.

Brainstorming & Ideation – Pencil and Paper

Wire-framing – Sketch

Interface Design – Sketch

Prototyping – InVision

Handoff – InVision

Design System – Sketch

File Management – Google Drive

Monitoring – Hotjar

Vertically center elements with 3 lines of code

Vertically center elements with 3 lines of code banner image

3 short lines of CSS (excluding vendor prefixes) using transform: translateY  will vertically center whatever we want, even if we don’t know the elements height.

The CSS property transform: translateY function allows us to achieve vertical center without having to use absolute positioning or setting line-heights, which require you to either know the height of the element or only works on single-line text etc.

The code you need is below:

.element {
position: relative;
top: 50%;
transform: translateY(-50%);

and if you need full browser support, remember to add the below vendor prefixes:

-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);

An example of the entire setup (including vendor prefixes is viewable in the example below:

As an aside, if you notice your element is being placed on a half pixel, add the following code to the parent element to preserve-3d.

.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

Five Font Trends in 2014

Five Font Trends in 2014 banner image
  1. Handwritten type – encompasses both printing and cursive styles and is separate from formal calligraphy or typeface.
    Brush Up font  |  Ondise font  |  Goodfy font  |  Barber Shop font
  2. Google Fonts – interactive directory of free hosted application programming interfaces for web fonts.
    Open Sans font  |  Roboto font  |  Oswald font
  3. Flat Design type – places a clear emphasis on simplicity, minimalism, and intelligibility.
    Metros font  |  Marianina font  |  Burne Alt font
  4. Mix & Match type – creates an artistic, handcrafted but still polished and purposeful look on a site.
    Native font  |  Hoverage font  |  Pacific Northwest Letters font
  5. Large Type – because of increased screen resolutions, the standard 12 point font is no longer as readable as it was before.
    Cape Rock font  |  CPL Kirkwood font  |  Zona Black font

REM and EM explained!

REM and EM explained banner image
  1. Both REM and EM are relative units.
  2. EM children inherit size by scaling in relation to the parent font size.
  3. REM is only relative to the html(root) font-size.
  4. REM is best used to define the padding and margins.
  5. REM stands for “root em”.
  6. REM units help for responsive design.
  7. REM units are great for rapid prototyping.
  8. All sizes should be in REM units.
  9. REM units do not work in IE8.

Why Designers Fail

Why Designers Fail banner image
  1. No Ambition – Success takes a long time.
  2. No Plan – You’ve got to have a plan to not fail.
  3. No Point of View – Find your voice and sing loudly.
  4. Afraid of Criticism – Designers are private people.
  5. People Pleasers – Design for yourself.
  6. No Exposure – Exposure is critical for success.
  7. Pay Me Syndrome – “Show me the money” mentality.
  8. Runway Addiction – Putting on a fashion show.
  9. Wrong Starting Point – Chasing after the big prize.
  10. Saturated Market – We are global because of the internet.