April 3, 2017 - No Comments!

Becoming more design conscious

Like I mentioned in my last blog post I want to move more into UI and UX design. Therefore, I recently started an online course by a guy called Erik Kennedy.  The course is based on several chapters of streamed videos featuring Erik, followed by small assignments. There's also a Slack team connected to the course, where you can discuss your results, questions or other related subject with fellow students and Erik himself. So far the course looks promising as a good start for someone who like me, have worked a couple of years in the design industry and is familiar with the fundamentals of design, but who want to adapt their design process to work more with UI.

One of the first assignments I was set upon was to find a couple of websites that I liked and analyse why I liked them in terms of design. This is standard procedure if you're already working as a designer, you find inspiration and analyse things all the time. Only for me it's something that I've mostly done subconsciously. It's not very often that I look at something I like and actively ask myself why I like it. Therefore I thought that this assignment was helpful in honing my design senses a bit and reminding myself what design is all about, to find what can be improved and to solve the problem.

Since this blog works much lika a personal journal and documentation of my development as a designer I wanted to share my assignment below. I've posted the insights that popped into my head during this one-and-a-half hour when I devoted myself to the task of analysing five websites that I liked. Feel free to leave a comment below if you want to share your own analysis.


B&O Play


What I like
  • Generous margins makes the site feel airy and uncluttered
  • The subtle grey background makes the cards pop and works well together with the product images and the Bang Olufsen brand
  • The white and grey color theme let the content speak for itself while still keeping the site interesting
  • The grid, using both square and rectangular images in portrait and landscape format, makes the site feel structured and dynamic at the same time
  • Price tags and buttons are clear and give me a hint on where I’ll end up if I press them
  • Both the top menu and the footer are very clear with their big fonts and generous whitespace and makes it easy for me to find what I’m looking for
  • Subtle use of animations adds interest without being intrusive
What I don't like
  • I’d make the font a little bigger within the cards for increased readability
  • The shopping bag icon looks a bit like a baby carrier seat, I would change the look of it to more resemble a shopping basket


2016 Web Design Report by Avocode


What I like
  • I like how clean and fresh the site feels with all that white space in combination with one high saturated color
  • Animation follows direction (it animates only along the Y-axis)
  • The navigation on the right is very un-intrusive, yet very clear. I especially like how the title of the section animates in and then disappears
  • The site allows me to navigate using four different methods, scroll, keyboard arrows, pressing up and down buttons or skipping section by using navbar on the right
  • Small typographical elements make the content feel more interesting
What I don't like
  • Green color hurts my eyes a bit and makes me a little dizzy




What I like
  • I love how the background changes color when I scroll
  • Big and bold font draws my attention and is easy to read
  • Big buttons, boxes, fonts and icons in combination with lots of white space makes the site feel easy to navigate and understand
  • Color coded category tags on blog posts makes it easy for me to find stuff that interest me
  • Playful use of colors goes well in line with the ustwo brand and makes the site more fun
  • In spite of the playful use of colors the site gives me a “no bullshit”-feel. Probably because of the contrast to the more serious typography
What I don't like
  • The site feels a tiny bit oversized, almost like it’s meant for people with bad eyesight
  • The content of the fullscreen videos is a bit confusing, what am I looking at and why?




What I like
  • Very few distracting elements makes site easy to understand
  • Big buttons and interactive areas makes site easy to use on mobile as well as desktop
  • Filters on the search page use visual elements like icons to make things really easy to understand
  • I like how the map responds to my cursor hovering over accommodations on the search page
  • Search page uses big images and minimal amount of information to give the user a quick overview
  • Table with sections and icons on the accommodation page makes information easy to find and easy to compare
  • The site in general makes good use of lines, icons and coloured buttons. Different size fonts also give the site a clear message hierarchy so the user can find the most important info really quick.
What I don't like
  • Landing page feels a bit jagged when loading new content




What I like
  • Same parallax background gives the site some nice depth without being too annoying
  • I like how the content overlap sections. Makes the site feel like it has some depth
  • Big bold typography is easy to read
  • Neon colors feel young and modern
What I don't like
  • The cookie policy pop-up is using some blue color never seen anywhere else on the site
  • I feel like there are a bit too many colors used on the site with no clear pattern. I’d stick with two or maybe three and keep the same color theme on all pages

March 13, 2017 - No Comments!

Getting to know Sketch

I'm working on expanding my skill set since I want to focus more on UI/UX as a designer. So I bought myself a Sketch 3 license and thought I would start out by just following a few simple tutorials. While I was browsing around, I found this excellent beginner's tutorial by Sebastien Gabriel, designer at Google, on how to make a colorful switch icon-thing. The tutorial was easy to follow and gave me a good idea of the basics of the Sketch app. I don't usually have the patience to follow a tutorial to the letter, but I thought I would try a new approach this time and did exactly that. However, I took the liberty of changing the colors to a fresh yellow/green hue instead of pink/purple. Here's my result.

Colorful switch tutorial