{ "version": "https://jsonfeed.org/version/1", "title": "Designed with ♥", "description": "", "home_page_url": "https://kolakovic.net/design", "feed_url": "https://kolakovic.net/design/feed.json", "user_comment": "", "author": { "name": "PK" }, "items": [ { "id": "https://kolakovic.net/design/flynational-library-of-norway.html", "url": "https://kolakovic.net/design/flynational-library-of-norway.html", "title": "National Library of Norway", "summary": "    Visit to Nasjonalbiblioteket brought some natural insights when discussing the future brand experience. The interplay of color shades, varied textures, and thoughtful lighting…", "content_html": "\n

\n  \n

\n
\n
\n\n

\n  \n

\n\n
\n
\n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n Colors and vibes\n

\n\n

\n Visit to Nasjonalbiblioteket brought some natural insights when discussing the future brand experience. The interplay of color shades, varied textures, and thoughtful lighting creates an atmosphere that invites people to stay, explore, and feel genuinely welcome.
There's a warmth here that feels like a second home. The careful curation makes information approachable rather than overwhelming, and this visual expression became our direction for the visual identity and website.\n

\n\n
\n \"\"\n \n
\n\n

\n \n

\n\n

\n Typography\n

\n\n

\n ITC Clearface represents a thoughtful choice for headline typography, where design balances heritage and contemporary forms. Its narrow serif characteristics meet web design trends and create visual contrast and elegance while maximizing space efficiency. The typeface offers both historical gravitas and modern readability, making it an ideal choice for digital platforms that need to convey authority and accessibility simultaneously.\n

\n\n
\n \"\"\n \n
\n\n

\n Light / Dark mode\n

\n\n

\n We prioritised the dark mode option because visitors who spend more time on the library website tend to use it.\n

\n\n
\n \"\"\n \n
\n\n
\n \"\"\n \n
\n\n

\n Startpage Viewport\n

\n\n
\n \"\"\n \n
\n\n

\n Featured Content Cards\n

\n\n
\n \"\"\n \n
\n\n

\n Opening hours widget\n

\n\n
\n \"\"\n \n
\n\n

\n Mobile view\n

\n\n
\n \"\"\n \n
\n\n

\n Simplified navigation and search\n

\n\n
\n \"\"\n \n
\n\n

\n Light mode version\n

\n\n
\n \"\"\n \n
\n\n

\n  \n

\n
\n\n

\n  \n

\n\n
\n \"\"\n \n
\n
", "image": "https://kolakovic.net/design/media/posts/49/laptop-nb.jpg", "author": { "name": "PK" }, "tags": [ ], "date_published": "2024-08-11T10:14:00+02:00", "date_modified": "2026-04-27T11:23:11+02:00" }, { "id": "https://kolakovic.net/design/humanitatarian-organization-case.html", "url": "https://kolakovic.net/design/humanitatarian-organization-case.html", "title": "SOS Children Villages", "summary": "Project url:  sos-barnebyer.no Main goal was to create accessible and engaging website that will help maintain organisation's leading position within the Norwegian humanitarian NGO sector.", "content_html": "\n

\n Project url:  sos-barnebyer.no\n

\n\n

\n Main goal was to create accessible and engaging website that will help maintain organisation's leading position within the Norwegian humanitarian NGO sector. It's as big as 5 next largest, which presents a challenge to be innovative and introducing new digital strategies. \n

\n\n

\n  \n

\n
\n
\n\n

\n  \n

\n\n
\n \"\"\n \n
\n\n

\n Defining color space that corresponds with international branding while introducing new support colors. Each regional branch of this international organisation has its own expression that corresponds to local culture.  \n

\n\n
\n \"\"\n \n
\n\n

\n SOS Children Villages has one of the most detailed Brand Books which helped organisation's global recognitions. It was very focused on print and physical space, however when it comes to digital it was bit dated. Web technologies, accessibility standards and UX practices had to be improved. \n

\n\n
\n \"\"\n \n
\n\n
\n \"\"\n \n
\n\n
\n \"\"\n \n
\n\n
\n \"\"\n \n
\n\n
\n \"\"\n \n
\n\n
\n \"\"\n \n
\n\n
\n \"\"\n \n
\n\n
\n \"\"\n \n
\n\n

\n \n

\n\n

\n \n

", "image": "https://kolakovic.net/design/media/posts/44/SOS-11-2.png", "author": { "name": "PK" }, "tags": [ ], "date_published": "2024-07-04T01:30:00+02:00", "date_modified": "2025-09-21T13:35:08+02:00" }, { "id": "https://kolakovic.net/design/aaa-accecibility-websites.html", "url": "https://kolakovic.net/design/aaa-accecibility-websites.html", "title": "AAA Accecibility Websites", "summary": "WCAG (Web Content Accessibility Guidelines) is about ensuring that websites and digital content work for everyone, regardless of their abilities or disabilities. WCAG 2.2 is…", "content_html": "\n

\n WCAG (Web Content Accessibility Guidelines) is about ensuring that websites and digital content work for everyone, regardless of their abilities or disabilities.\n

\n\n

\n WCAG 2.2 is about digital equity - ensuring that when you visit a website or use an app, you have the same opportunity to access information, complete tasks, and participate online as anyone else, regardless of whether you use assistive technology or have different needs than the \"typical\" user.
It's essentially a set of standards that, when properly implemented, makes the web more usable and inclusive for everyone.\n

\n\n
\n
\n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n AAA\n

\n\n

\n AAA compliance provides the most comprehensive accessibility experience, this requirements can be extremely difficult to meet for all content. For following project I was a design lead. Strategic approach on these projects was rather than trying to meet technical compliance criteria, focus on enabling specific use cases - like \"support navigation without a mouse\", \"support light sensitive interface\"...\n

\n\n

\n Keyboarding\n

\n\n

\n Users with a wide range of disabilities, or no disability at all, rely on a keyboard. All interactive elements should be accessible with the keyboard.\n

\n\n \n\n

\n Tibi – The Library for Adapted Literature\n

\n\n

\n Tibi is the library for you who have difficulties reading visual text due to disability or illness. Tibi creates and lend out audiobooks, e-books, and books in braille.\n

\n\n

\n  \n

\n
\n
\n\n

\n Soft Dark Mode\n

\n\n
\n \"\"\n \n
\n\n

\n Default mode chosen by Tibi is dark. Tibi's soft dark mode user interface design uses dark colors with softer tones, creating a visually comfortable experience. This design is popular for reducing eye strain, especially in low-light environments.

Key Features of Soft Dark Mode
* Color Palette: Utilizes muted colors rather than pure black, often incorporating shades like dark gray, navy, or deep green.
* Eye Comfort: Softer contrasts help minimize glare and make reading easier on the eyes.
* Customization: Many applications allow users to adjust brightness and contrast settings to suit personal preferences.\n

\n\n
\n \"\"\n \n
\n\n

\n  \n

\n\n

\n LDO – Likestillings- og diskrimineringsombudet\n

\n\n

\n (The Equality and Anti-Discrimination Ombud)\n

\n\n

\n The Equality and Anti-Discrimination Ombud exists to promote equality and combat discrimination based on gender, pregnancy, parental leave, ethnicity, religion, disability, sexual orientation, gender identity, gender expression, age, trade union membership, and political views. The Ombud is professionally independent. They are organized under the Ministry of Culture and Equality, but cannot be instructed by the authorities.\n

\n\n

\n AAA was not requirement for this project but we achieved very high score after being tested by specialised agency.\n

\n\n
\n \"\"\n \n
\n\n

\n Statped\n

\n\n

\n Statped provides services for children and pupils who need permanent and comprehensive accommodations in kindergarten and school. They are helping PPT (Educational and Psychological Counseling Service) with services and competency development, providing education in and through Norwegian sign language, in Sami, and by producing educational materials and resources.\n

\n\n

\n AAA accessibility was the requirement since it provides services and content for kids with special needs. \n

\n\n
\n \"\"\n \n
\n\n

\n Content is in development...\n

", "image": "https://kolakovic.net/design/media/posts/51/cover3.jpg", "author": { "name": "PK" }, "tags": [ ], "date_published": "2024-01-15T21:45:00+01:00", "date_modified": "2025-10-07T10:36:57+02:00" }, { "id": "https://kolakovic.net/design/flyfoto.html", "url": "https://kolakovic.net/design/flyfoto.html", "title": "Areal Photo Mapping App ", "summary": "Visual architecture with functional groups The visual presentation of the content enables users to navigate with ease and keep track of their tasks. The blue…", "content_html": "\n
\n \"Visual\n
Visual architecture with functional groups
\n
\n\n

\n The visual presentation of the content enables users to navigate with ease and keep track of their tasks. The blue colour scheme represents the sky, since the app deals with aerial photography. The large panels and UI elements provide a comfortable experience on both mobile and desktop. The application is designed to be vibrant and fun while remaining highly accessible.\n

\n\n

\n Project Goals\n

\n\n

\n The National Library has 3 million aerial photographs that needs placing on the map. Goal was to crowdsource project where volunteers help geolocate historical aerial photographs by placing them on digital maps. Such App has to be gamified to encourage responsible participation accessible from mobile to desktop.  \n

\n\n
\n
\n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n \n \"\"\n \n \n
\n
\n
\n\n

\n The aerial photographs belong to 2 categories
\n

\n\n

\n Aerial photographs that do not have a location on the map yet
Here we have used information from the digitization to give an approximate location (e.g. municipality).
Aerial photographs that someone has attached to the map represented by a marker
A user has attached a point in the aerial photograph to the map, and you can find it again by navigating the map.
As the aerial photographs are digitized, you will find aerial photos from the entire country and from different time periods. To be able to contribute to geolocating aerial photos yourself, you must log in with ID-porten and accept the terms of use. Logged-in users can compete with each other to place as many aerial photos as possible on the map.
All place names are taken from the Central Place Name Registry Kartverket\n

\n\n

\n Mobile and desktop interface for various user task\n

\n\n
\n \"\"\n
Intro; Placing location on map, ...
\n
\n\n
\n \"\"\n
Location details, Map View, .., Scoreboard
\n
\n\n
\n \"About\n
About the App
\n
\n\n
\n \"Search\n
Search field activated with autosuggestions
\n
\n\n
\n \"\"\n
Navigation and commands
\n
\n\n
\n \"\"\n
Map view with location pins
\n
\n\n
\n \"\"\n
Listing areal photos located on map
\n
", "image": "https://kolakovic.net/design/media/posts/50/start-2.jpg", "author": { "name": "PK" }, "tags": [ ], "date_published": "2024-01-02T11:29:00+01:00", "date_modified": "2025-09-22T22:47:29+02:00" }, { "id": "https://kolakovic.net/design/ansa-branding-and-website.html", "url": "https://kolakovic.net/design/ansa-branding-and-website.html", "title": "Brand and website design", "summary": "The Association of Norwegian Students Abroad is a non-profit and membership based organisation aiming to voice the educational, cultural, political and economic interests of Norwegian…", "content_html": "

The Association of Norwegian Students Abroad is a non-profit and membership based organisation aiming to voice the educational, cultural, political and economic interests of Norwegian students studying outside Norway and to promote overseas students as a valuable resource to domestic employers.

\n
\"\"
\n

Playing with new logo, shapes and colors for SoME

\n
\"\"
\n

New color pallet improves visual communication with mostly very young audience 

\n
\"\"
\n

Examples of mobile interface

\n
\"\"
\n

Webdesign

\n
\"\"
\n
\"\"
\n
\"\"
\n
\"\"
\n

 

\n

CTA blocks

\n
\"\"
\n

UI components and blocs

\n
\"\"
\n

 

", "image": "https://kolakovic.net/design/media/posts/34/Frame-ansa-2.png", "author": { "name": "PK" }, "tags": [ ], "date_published": "2023-02-24T00:35:44+01:00", "date_modified": "2023-12-04T01:20:47+01:00" }, { "id": "https://kolakovic.net/design/website-design-abbl.html", "url": "https://kolakovic.net/design/website-design-abbl.html", "title": "Website Design – ABBL ", "summary": "ABBL is a membership organization with a focus to provide members with affordable housing, as well as to provide services for our affiliated housing companies.", "content_html": "

ABBL is a membership organization with a focus to provide members with affordable housing, as well as to provide services for our affiliated housing companies. As part of membership offer, ABBL have many good discount agreements. With a lang history, ABBL is member-driven since 1945.

\n
\"\"
\n

 

\n

 

\n
\"\"
\n

 

\n
\"\"
", "image": "https://kolakovic.net/design/media/posts/37/ABBL-c-2.png", "author": { "name": "PK" }, "tags": [ ], "date_published": "2022-03-08T22:12:00+01:00", "date_modified": "2025-09-05T21:26:28+02:00" }, { "id": "https://kolakovic.net/design/ms.html", "url": "https://kolakovic.net/design/ms.html", "title": "MS – forbundet", "summary": "The Multiple Sclerosis Society (MSf) helps people who suffer from a chronic inflammatory disease (MS) and their families. The organisation's mission is to inform people…", "content_html": "\n

\n The Multiple Sclerosis Society (MSf) helps people who suffer from a chronic inflammatory disease (MS) and their families. The organisation's mission is to inform people about the most important things they need to know about the disease, its symptoms and research in the field.

With an optimistic message - together we are stronger, a better life despite the disease.
\n

\n\n

\n Refreshing Identity 
Experience\n

\n\n

\n Previous logo that was simplified, but not completely changed. \n

\n\n
\n \"\"\n \n
\n\n

\n The challenge of the previous identity and colours was to support the organisation's vision and messaging. It didn't comply with WCAG either.\n

\n\n
\n \"\"\n \n
\n\n

\n New Colors and visual expressions\n

\n\n

\n Different visual experience defined — clarity, balance focus and optimism\n

\n\n
\n \"\"\n
New Colors of MSF
\n
\n\n

\n Strategic positioning \n

\n\n

\n Scientific and trustworthy, but also humanistic, the language of the people\n

\n\n
\n \"\"\n
Visual Space
\n
\n\n
\n \"\"\n \n
\n\n

\n Website and interface design\n

\n\n

\n Friendly, calm tone. With the support of illustration, we convey a message of hope with the website.\n

\n\n
\n \"\"\n
Website design
\n
\n\n
\n \"\"\n
Mobile website design
\n
\n\n

\n \n

", "image": "https://kolakovic.net/design/media/posts/46/ms-o1.png", "author": { "name": "PK" }, "tags": [ ], "date_published": "2020-12-06T10:54:00+01:00", "date_modified": "2024-01-30T05:15:08+01:00" }, { "id": "https://kolakovic.net/design/union-branding.html", "url": "https://kolakovic.net/design/union-branding.html", "title": "Union Branding and webdesign", "summary": "Making fresh identity to attract young members. Answering the challenge to transform old union vibes (old school, smoky rooms and coffee) to new, vibrant and…", "content_html": "\n

\n Making fresh identity to attract young members. Answering the challenge to transform old union vibes (old school, smoky rooms and coffee) to new, vibrant and fun organisation. \n

\n\n
\n \"\"\n \n
\n\n

\n Common organisation is the community that protects each-other and empowers the social workers. \n

\n\n
\n \"\"\n \n
\n\n
\n \"\"\n \n
\n\n

\n Introducing new playful colour pallet that is dynamic and enables FO to create appealing SoMe companies and web interfaces.  \n

\n\n
\n \"\"\n \n
\n\n
\n \"\"\n \n
\n\n
\n \"\"\n \n
\n\n

\n More details coming...\n

\n\n
\n \"\"\n \n
\n\n
\n \"\"\n
Navigation
\n
\n\n
\n \"\"\n
Footer Color Options
\n
\n\n

\n \n

", "image": "https://kolakovic.net/design/media/posts/45/cover.png", "author": { "name": "PK" }, "tags": [ ], "date_published": "2020-12-06T10:34:00+01:00", "date_modified": "2024-03-16T21:56:41+01:00" }, { "id": "https://kolakovic.net/design/issa-school.html", "url": "https://kolakovic.net/design/issa-school.html", "title": "Island School of Social Autonomy", "summary": "The Island School of Social Autonomy (ISSA) is a place that imagines, experiments with, and cultivates forms of knowledge production and sharing that go beyond…", "content_html": "\n

\n The Island School of Social Autonomy (ISSA) is a place that imagines, experiments with, and cultivates forms of knowledge production and sharing that go beyond traditional notions of education and its purpose.\n

\n\n

\n ISSA school perceives social autonomy as the ability of individuals to function as cooperative group members, engaging in communal self-governance while being aware of the interconnectedness and interdependence of communities within broader networks (or archipelagoes) of human and non-human life-organization. Autonomy does not imply isolation but rather the ability to make autonomous decisions, through mechanisms of collective deliberation, about how to live together and take responsibility for caring for those that are not able to make them (children, non-human living worlds, etc.)

School aims to cultivate ways of living, learning, and teaching together. \n

\n\n

\n Logo design\n

\n\n

\n Custom designed logo typography with Inter font as a support typography\n

\n\n
\n \"\"\n
Logo design– Custom designed logo typography with Inter font as a support typography
\n
\n\n

\n Event branding\n

\n\n
\n \"\"\n
Event promotion banner - To Live Together 2024
\n
\n\n
\n \"\"\n \n
\n\n
\n \"\"\n \n
\n\n
\n \"\"\n
Radio App interface
\n
\n\n
\n \"\"\n
issa-school.org – website
\n
\n\n
\n \"\"\n
Donation form
\n
\n\n

\n Promo banner for school presentation at the Rosa Luxemburg Foundation, Berlin, Bifo's talk on inaugural event. \n

\n\n
\n \"\"\n
Promo banner for school presentation at the Rosa Luxemburg Foundation, Berlin
\n
\n\n
\n \"\"\n \n
", "image": "https://kolakovic.net/design/media/posts/47/logo.png", "author": { "name": "PK" }, "tags": [ ], "date_published": "2020-12-03T23:58:00+01:00", "date_modified": "2025-09-23T12:49:50+02:00" }, { "id": "https://kolakovic.net/design/platform-for-developing-alternative-models-of-living.html", "url": "https://kolakovic.net/design/platform-for-developing-alternative-models-of-living.html", "title": "App for developing alternative models of living", "content_html": "\n
\n \"\"\n \n
\n\n
\n \"\"\n \n
", "image": "https://kolakovic.net/design/media/posts/18/Artboard-d-19-xxxl.png", "author": { "name": "PK" }, "tags": [ ], "date_published": "2020-05-15T16:22:00+02:00", "date_modified": "2021-02-17T21:58:09+01:00" } ] }