Alexander Skogberg

UX, Web & Design

To content

Blog

How paper wireframing will make you a better designer

There are lots of great tools for drawing wireframes today. However, I still prefer my good ol’ paper wireframing kit. In this post I’ll tell you why and explain how paper wireframing will make you a better designer.

A sketchpad with a thin black marker and a correction tape roller.

In 2012 I was planning on taking my wireframing skills to the next level. I had gotten the excellent app Paper by FiftyThree for my new iPad and had ordered two well-reviewed tablet sketching pens all the way from the US.

Around this time, I also took a paper sketching course by the Swedish designer Mårten Angner. Taking this course completely changed my approach to making wireframes and over the years it has made me a better designer.

Let me tell you why paper wireframing is a must-have skill.

Read all of How paper wireframing will make you a better designer.

Hey designers, take more responsibility for website images!

Today, images stand for about 50 % of a website’s total weight. Since poor performance is so tightly linked to decreased revenue and dissatisfied users, we designers must take more responsibility for website images.

Sonic the hedgehog, but fat.

Websites keep getting heavier and heavier. According to data from httparchive.org, the average website weighed 3686 KB on February 15, 2018. Six years earlier (February 15, 2012), the average website used to weigh 986 KB.

Websites have become 373,8 % heavier during the last six years. It’s mind-blowingly bad!

Video stands for a large part of a website’s weight today compared to a few years ago, but the largest contributor to the total weight is still images.

Wensite statistics for February 2018

On February 15, 2018 images stood for ~49.3 % of the weight of an average website. Data from httparchive.org.

Why performance matters

When arguing for the importance of good performance, it’s easy to find supporting research.

Read all of Hey designers, take more responsibility for website images!.

A guide to getting more speaking gigs

If you’ve ever shared your knowledge and experience in front of a crowd, you know it’s an amazing and very rewarding experience. But getting speaking gigs can be challenging. In this post, I’ll share my advice on how to get them.

Croaw at Telenor during a recent talk.

A lovely crowd at Telenor during a recent talk in February, 2018.

Since 2011 I’ve been giving talks on different topics such as accessibility, mobile first, responsive web design and how to become a macOS power user. It’s something that I enjoy immensely, learn a lot from and will keep doing for as long as I can.

While giving talks is a science on its own, getting speaking gigs is something that doesn’t happen automatically. You have to work on your social and marketing skills. Selling yourself doesn’t come easy to most people. I’ve sure struggled with it.

Luckily, I’ve learnt a thing or two about selling my talks over the years. So, here are my best pieces of advice on getting more speaking gigs.

Read all of A guide to getting more speaking gigs.

The new guidelines in WCAG 2.1 explained

In the Summer of 2018, WCAG 2.0 will be updated to version 2.1 with new guidelines for making websites even more accessible. In this post I’ll try to give simple explanations of these guidelines along with thoughts and advice on how to follow them.

Inclusive design illustration from Microsoft

There are no normal users. Following WCAG 2.1 will improve the user experience for all people browsing websites. Illustration taken from the Microsoft’s toolkit for inclusive design.

WCAG stands for Web Content Accessibility Guidelines and is an International established set of guidelines for accessible content on the Internet. These guidelines are mainly for people with various disabilities, but also for different devices used for browsing websites.

WCAG is maintained by the World Wide Web Consortium (W3C), the main standards organisation for the Internet. The current version (WCAG 2.0) was published in 2008 and became an ISO standard (ISO/IEC 40500:2012) in 2012.

In the Summer of 2018, WCAG 2.1 is set to be released with seventeen new guidelines that focus on improving accessibility for users with cognitive disabilities and for users who browse websites on mobile devices like tablets and smartphones.

Read all of The new guidelines in WCAG 2.1 explained.

How to make great wireframes in Sketch

In recent years, Sketch has risen to one of the top vector graphics editors among designers. I use it several times a week at work and I love it! Here are my tips for making great wireframes in Sketch.

Sketch logo

When I started working as an IT consultant in 2011, my designer colleagues all used different vector graphics editors. Today, almost everyone of them uses Sketch exclusively.

If you’re making wireframes, creating a style guide or drawing illustrations Sketch is the perfect tool! It’s popular, not overburdened with features and costs much less than editors like Photoshop.

Here are my best pieces of advice when making wireframes in Sketch.

Organize your screens with Pages and Artboards

As your wireframes grow, keeping all screens organized is essential for staying efficient. Hence, you should make use of Pages and Artboards.

Create a Page for each set of related screens

In Sketch, a Page offers a new blank canvas. There’s no reason to put all of your screens on the same Page. Instead, create a Page for each set of related screens of the app or website your making wireframes for.

Read all of How to make great wireframes in Sketch.

Much responsive Many CSS Very breakpoint So media query Such HTML Wow