This document provides design concepts for the citizen journalism project VivaHiba. It outlines that the branding should be casual, colorful, dynamic, and eye-catching while also sophisticated. The design concepts emphasize making the site dynamic, colorful, sophisticated but not too serious, socially aware, and emotional. Sketches illustrate zones for impressions, articles flow, and extras. The impressions zone aims to give users a feel for the site through a carousel and add article button. The articles flow zone displays articles comfortably while allowing sorting. The extras zone provides additional navigation and services.

1. Design Concept
for the Citizen Journalism Project
VivaHiba!
Dudka Design & Branding 2013
alpha-draft

2. Task Details
Disclaimer
In terms of Branding,
1- vivaHiba needs to be casual, colorful, dynamic and eye-catching. At the same time, it
should have some 'gravitas' and sophistication.
2- The vivaHiba 'mentality' is open-minded, social, just, democratic and emotional. The
'emotional' part is interesting because we will not write news and editorials ourselves.
People will do so. Therefore, the emotional element should come to through the design,
the visual elements.
In terms of Design,
1- Just enough minimalist for the viewers to navigate easily without getting lost but not
minimalist to the point where it loses its "around the clock news from the street"
dynamism.
2- It should have a 'street edge' to it - like a grafitti on the wall. Some hand-drawn images
may add that edge.
To sum it up: vivaHiba is dynamic, colorful (but not messy), sophisticated (but doesn't take
itself too seriously) and socially aware/responsible and emotional.
All provided materials & sketches on this stage is not final: icons(especially), fonts,
details, buttons etc. -- may be changed and imroved, all the materials have the main
purpose to illustrate the design concept of the project.

3. Impression Zone
This zone should give user the image and feel of the
site and provide the hottest topics via carousel, also
due to it’s “establishing” role, it should have the
prominent “add article button” to stimulate user to
be the part of the project.
This is more presentative than informative zone, it
shoud form the vision of the site and headlines rather
than give large amount of information.
ArticlesFlow Zone
The main information zone should give comfortable
and view of the large amount of articles, and provide
on-click resorting the flow. Main challenge of this
zone -- is to make a large amount of the identical
items both comfortable to percept as the whole flow
and to make it possible to hold the attention of user
to direct it to the maximum number of individual
items.
Extras Zone
This zone has two main purposes: to provide
additional navigation and to give users additional
services, special articles, Quates, Ratings, etc.
Except for the basic elements, most items of the
topics will be described in the next draft as “Ideas for
the future deveopment”, because they exeed techical
requirements of the project
Zoning and scenarios (pre-conclusions)
logo menu
carousel
add article
sorting options
articles flow
trending
topics
special
aricles
banners

4. Sketching (full-size scetches is attached)

5. Flag
The classic symbol of any protest or
movement, flags helps to deliver the
main idea of citizen journalizm as a
voice of streets.
Hand-Drawn “Real News”
The definition of the project,
hand-drawn to show the idea of
real news from real people, not
professional journalists.
Top3
Every list has its top3, to make
this zone look more interesting,
and to help emphasize 3 most
releveant sorting results,
they’re formed into separate
block
Colors
We desided to choose energetic
red, as the most emotional
color, but the variant with the
melon color is provided within
the attachment, though we
think it makes the whole site
look too cosy and soft, which is
not the best emotional choise
for the site’s purposes.
Hibarousel
This special carousel combines the idea of being
inside the described event and focusing on the
important things. Using different images we can
create different powerful emphasis (examples are
attached)
Penguin symbol
Special unofficial symbol,
providng explanation if hovered
by mouse. Later, it can be used
on t-shirts, stencils ets.
Add Article Button
Is Located at tha edge of two
zones, to provide it the most
attention and empasize it’s role
Trending topics & tags
Better to be separated into two
different list, to provide both
the information of most actual
events, and the most popular
topis over the whole life of the
projects
VivaHiba Choice
Article, chosen by the editor --
to help empasize some articles
or to bring the messages from
the project administration
Comments & Details