thumbnail_magazyn

magazyn q

magazyn q

When?

What?

For whom?

When?

What?

For whom?

March 2017

Webdesign

Graphic design course

May 2017

Webdesign

Graphic design course

Project circumstances

In March 2017 I had an opportunnity to participate in a design course Sztuka Projektowania (The Art of Design) patronized by Karol Śliwka. During the web design classes, led by Michał Korwin-Piotrkowski, I got the task to design an adaptive news website with the Bootstrap grid.

Project circumstances

In March 2017 I had an opportunnity to participate in a design course Sztuka Projektowania (The Art of Design) patronized by Karol Śliwka. During the web design classes, led by Michał Korwin-Piotrkowski, I got the task to design an adaptive news website with the Bootstrap grid.

Project circumstances

In March 2017 I had an opportunnity to participate in a design course Sztuka Projektowania (The Art of Design) patronized by Karol Śliwka. During the web design classes, led by Michał Korwin-Piotrkowski, I got the task to design an adaptive news website with the Bootstrap grid.

Personas

I always prefer to design for a defined target group, so I started by creating example personas.

Personas

I always prefer to design for a defined target group, so I started by creating example personas.

Personas

I always prefer to design for a defined target group, so I started by creating example personas.

persony_magazyn_q_EN

Contexts

Knowing the contexts users will interact with the website, I can make better decisions. With personas in mind, I distinguished several examples.

Contexts

Knowing the contexts users will interact with the website, I can make better decisions. With personas in mind, I distinguished several examples.

Contexts

Knowing the contexts users will interact with the website, I can make better decisions. With personas in mind, I distinguished several examples.

Contexts

Knowing the contexts users will interact with the website, I can make better decisions. With personas in mind, I distinguished several examples.

konteksty_EN

Wireframes

After sketching some ideas, I got on with wireframes. It was the most time consuming part of the project. However, the lack of photos or colors helped me focus on font sizes and spacing.

Wireframes

After sketching some ideas, I got on with wireframes. It was the most time consuming part of the project. However, the lack of photos or colors helped me focus on font sizes and spacing.

Wireframes

After sketching some ideas, I got on with wireframes. It was the most time consuming part of the project. However, the lack of photos or colors helped me focus on font sizes and spacing.

Wireframes

After sketching some ideas, I got on with wireframes. It was the most time consuming part of the project. However, the lack of photos or colors helped me focus on font sizes and spacing.

magazyn_wireframe

Grid

Using the Bootstrap grid I adjusted the layout to mobile devices. I also concidered the fact that a news website has a lot of content of different format: text, video or photos. To align them, I used a 4px baseline grid.

Grid

Using the Bootstrap grid I adjusted the layout to mobile devices. I also concidered the fact that a news website has a lot of content of different format: text, video or photos. To align them, I used a 4px baseline grid.

Grid

Using the Bootstrap grid I adjusted the layout to mobile devices. I also concidered the fact that a news website has a lot of content of different format: text, video or photos. To align them, I used a 4px baseline grid.

Grid

Using the Bootstrap grid I adjusted the layout to mobile devices. I also concidered the fact that a news website has a lot of content of different format: text, video or photos. To align them, I used a 4px baseline grid.

magazyn_grid
magazyn_baseline

Final outcome

Final outcome

Final outcome

Final outcome

magazyn_web
magazyn_tablet
magazyn_mobile

©2018 Mikołaj Biernat