Všechny projekty

Centrum pro dítě

a rodinu Valika

Role : UI / UX / Development / Design System 

Klient : Valika

O projektu

Centrum pro dítě a rodinu Valika, které poskytuje pomoc ohroženým dětem a jejich rodinám formou sociálně aktivizačních služeb. Další oblastí, na kterou se Centrum Valika zaměřuje, je rozvoj a podpora náhradní rodinné péče.

Vidět projekt ONLINE.

Challenge

Cílem projektu bylo posunout web vizuelně k aktuálním trendům, dodržet brand ( neziskovka je již léta funguje, a tak jakýkoliv zásah do brandu by mohl spíše uškodit.) Z pohledu UX vylepšit funkčnost a zbavit se wordpressu. 

Research

Nejsložitější bylo pochopit, jak péče a celkově sociální služby okolo dětí fungují. Jakým způsobem zažádat, připadně kam zajít nebo kde informace získat. Jaké akce se na podporu dělají, a jak může centrum lidem process zjednodušit.

valika_macvalika_mac

Grid System - 1200px / 12 Col

valika_gridvalika_grid

Process

  • Briefing, Research

  • Design System

  • Flowchart, Wireframes

  • Design, Development

Timeline

  • Planning - 2 hodiny

  • Wireframes - 8+ hodin

  • Design - 10+ hodin

  • Assets - 1 hodina

Tools

  • Sketch, Flowmapp

  • Slack

  • Trello

  • Nette

Colors

Barevnost vycházela z brandu neziskovky. Tedy všechny barvy, které využívá logo. Dále bylo potřeba vytvořit odstíny šedé pro typografii.

valika_colorsvalika_colors

Typografie

Původní Oxygen Font jsem nahradil rodinou Montserrat a Nunito. Kde mi nejvíce vyhovuje kontrast mezi ostrým a rounded fontem v řezech Bold, Medium a Regular. Z pohledu neziskovky bylo nejlepší využít free Google Fonty.

valika_typo_3valika_typo_3

Icon Pack

Lehce poupravený defaultní Simple Line Icon Pack z pluginu Icon Font od Kerem Sevencan pro Sketch. V budgetu již nebylo místo na vytvoření vlastního icon packu.

valika_iconsvalika_icons

Flowcharts

Velice jednoduchá flowchart definující pouze průchod webem. Zde nebylo moc co vymýšlet. Díky low budgetu neziskovky, se pouze zpřeházela původní kostra webu. Pro Flowcharty jsem s i v poslední době velice oblíbil jednoduchý Flowmapp, a opustil jsem Overflow, který využívám již pouze na složitější projekty.

valika_flow_darkvalika_flow_dark

Wireframes

Abychom si v rychlosti odsouhlasili styl vizuálu, použil jsem rovnou hi-fi wireframy namísto lo-fi wireframu a jakýchkoliv skic.

valika_wf2valika_wf2

Design

Home1Home1
Home2Home2
Home3Home3

Další podstrany

landings_2landings_2
[unex_ce_button id="content_i6p1znlwz" button_text_color="#a5a7b3" button_font="light" button_font_size="24px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="transparent" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="transparent" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="transparent" button_border_hover_color="transparent" button_link="/" button_link_type="url" button_link_target="_self" has_container="1" in_column=""]Zpět[/ce_button]