thumbnail_magazyn

magazyn q

magazyn q

Kiedy?

Co?

Dla kogo?

Kiedy?

Co?

Dla kogo?

Marzec 2017

Webdesign

Kurs projektowania graficznego

Maj 2017

Webdesign

Kurs projektowania graficznego

Okoliczności projektu

W marcu 2017 roku miałem okazję wziąć udział w kursie Sztuka Projektowania pod patronatem Karola Śliwki. Na zajęciach z webdesignu, prowadzonych przez Michała Korwina-Piotrkowskiego, otrzymałem zadanie zaprojektowania adaptacyjnego portalu informacyjnego w opraciu o Bootstrap grid.

Okoliczności projektu

W marcu 2017 roku miałem okazję wziąć udział w kursie Sztuka Projektowania pod patronatem Karola Śliwki. Na zajęciach z webdesignu, prowadzonych przez Michała Korwina-Piotrkowskiego, otrzymałem zadanie zaprojektowania adaptacyjnego portalu informacyjnego w opraciu o Bootstrap grid.

Persony

Zawszę wolę projektować dla określonej grupy docelowej, dlatego pracę zacząłem od stworzenia przykładowych person.

Persony

Zawszę wolę projektować dla określonej grupy docelowej, dlatego pracę zacząłem od stworzenia przykładowych person.

persony_magazyn_q

Konteksty

Wiedząc w jakich kontekstach użytkownicy będą korzystać z portalu,
mogę podjąć lepsze decyzję projektowe. Biorąc pod uwagę persony, wyróżniłem parę przykładów.

Konteksty

Wiedząc w jakich kontekstach użytkownicy będą korzystać z portalu, mogę podjąć lepsze decyzję projektowe. Biorąc pod uwagę persony, wyróżniłem parę przykładów.

Konteksty

Wiedząc w jakich kontekstach użytkownicy będą korzystać z portalu,
mogę podjąć lepsze decyzję projektowe. Biorąc pod uwagę persony, wyróżniłem parę przykładów.

Konteksty

Wiedząc w jakich kontekstach użytkownicy będą korzystać z portalu, mogę podjąć lepsze decyzję projektowe. Biorąc pod uwagę persony, wyróżniłem parę przykładów.

konteksty

Wireframe'y

Po naszkicowaniu paru pomysłów, zabrałem się za wireframe'y.
Był to najbardziej czasochłonny etap projektu, ale brak zdjęć czy kolorów pozwolił mi się skupić na dobraniu odpowiednich rozmiarów fontów
i odległości między elementami.

Wireframe'y

Po naszkicowaniu paru pomysłów, zabrałem się za wireframe'y. Był to najbardziej czasochłonny etap projektu, ale brak zdjęć czy kolorów pozwolił mi się skupić na dobraniu odpowiednich rozmiarów fontów i odległości między elementami.

Wireframe'y

Po naszkicowaniu paru pomysłów, zabrałem się za wireframe'y.
Był to najbardziej czasochłonny etap projektu, ale brak zdjęć czy kolorów pozwolił mi się skupić na dobraniu odpowiednich rozmiarów fontów i odległości między elementami.

Wireframe'y

Po naszkicowaniu paru pomysłów, zabrałem się za wireframe'y. Był to najbardziej czasochłonny etap projektu, ale brak zdjęć czy kolorów pozwolił mi się skupić na dobraniu odpowiednich rozmiarów fontów
i odległości między elementami.

magazyn_wireframe

Grid

Za pomocą Bootstrapa dostosowałem projekt do urządzeń mobilnych. Wziąłem też pod uwagę fakt, że portal informacyjny zawiera wiele treści różnego formatu: tekst, wideo czy zdjęcia. Aby równo je poukładać, postanowiłem zastosować baseline grid o odstępach 4 pikseli.

Grid

Za pomocą Bootstrapa dostosowałem projekt do urządzeń mobilnych. Wziąłem też pod uwagę fakt, że portal informacyjny zawiera wiele treści różnego formatu: tekst, wideo czy zdjęcia. Aby równo je poukładać, postanowiłem zastosować baseline grid o odstępach 4 pikseli.

Grid

Za pomocą Bootstrapa dostosowałem projekt do urządzeń mobilnych. Wziąłem też pod uwagę fakt, że portal informacyjny zawiera wiele treści różnego formatu: tekst, wideo czy zdjęcia. Aby równo je poukładać, postanowiłem zastosować baseline grid o odstępach 4 pikseli.

Grid

Za pomocą Bootstrapa dostosowałem projekt do urządzeń mobilnych. Wziąłem też pod uwagę fakt, że portal informacyjny zawiera wiele treści różnego formatu: tekst, wideo
czy zdjęcia. Aby równo je poukładać, postanowiłem zastosować baseline grid
o odstępach 4 pikseli.

magazyn_grid
magazyn_baseline

Projekt końcowy

Projekt końcowy

Projekt końcowy

Projekt końcowy

magazyn_web
magazyn_tablet
magazyn_mobile

©2018 Mikołaj Biernat