It starts with people.
Lifestyle and space needs are put at the beginning of the story of the work. Instead of just looking at the results, have them read the reasons for their choices.
BLUECANVAS SELECTED WORK / 01ARCHITECTURE & INTERIOR
ZIUMN
Brand website
Planning · Design · Development
FROM A WAY OF LIVING, TO A WAY OF SEEING.
Listen to life,
show space.
The story of translating ZIUMN's thoughts into website experience01 / THE STARTING POINTWhere did it start?
Rather than showing the house,
conveying the attitude toward the house
came first.
ZIUMN's materials contained stories of different houses and the people who would live in them. Sa Ae-heon's space for his dog, the scenery in the window of Sojaejae, and even the courtyard of Pyeonggyeongjae. The reasons for choosing each work were different.
The difference had to be visible on the website as well. Beyond putting the photos together, I organized it so that you can understand why this space was built like this.
Visit the completed homepage344+
Started from a data image
9
Each work tells a different story.
4
Different design directions were developed
READ THE SPACE, BEFORE DESIGNING THE PAGE.From hundreds of photos,
From hundreds of photos,
through one view.
Appearance, life, light, materials.
The criteria for selecting an image are also part of the brand.
02 / BRAND THINKINGBased on the brand’s attitude on the screen
A brand you listen to before building.
Before showing
A website you understand.
The focus of the brand was on ‘the people who live there’ rather than on ‘awesome architecture’. So the first sentence also starts with the order of life rather than focusing on the scale or technology of architecture.
The existing brand name and individuality of the work were maintained, and on the web, the size of the photo, tone of sentence, space and movement were tailored to convey the same attitude.
Focus on space.
Remove decorations and repetitive boxes on the photo. Let the scenery, light and materials create the impression of the scene.
Continue to the next conversation.
It allows you to move naturally from the work you like to the brand's thoughts, and from the work process to project inquiries.
THE WORDS THAT GUIDE THE EXPERIENCE
Life comes first,
space comes next.
Brand's attitude → Sentence on the first screenStandards for showing photos set before photos
A QUIET PALETTE, A CLEAR POINT OF VIEW.
By borrowing the colors of nature, we leave the color of the space.
Wood and stone, wall and paper.
We looked at the color temperature that goes well with different textures.
03 / COLOR & TYPOGRAPHYVisual rules that make your photos stand out
Make sure the color of the screen
does not outpace the work.
Dark olive makes the light in the photo clear, and sage creates a zone where the eye rests. Long text is placed on soft white. The point where the color changes is also the point where the scene in the story changes.
Depth to support the photo
It brings out the light and dark in the photo of the work and supports the transition between scenes calmly.
Colors that connect with nature
Green is used for sentences and lines. It is in line with the brand's attitude of considering landscapes and gardens together.
When the gaze rests
It is the basis for showing line drawings and spatial stories. Add brightness to dark photo scenes.
margin for reading
This is the color in which work descriptions and long sentences are placed. It blends into the photo more smoothly than pure white.
TYPE EXPLORATIONThe same sentence
The same sentence
sounds differently depending on the font.
Myeongjo creates the impression of reading a story, while sans-serif creates the impression of clearly showing the space. The final draft focuses on a large sans-serif title and adds the softness of italics to the secondary English text.
SANS / The center of the final plan
A space that contains life.
The form is clear and the sentences are simple.SERIF / Editorial design proposal
A space that contains life.
Slow-reading titles and wide margins.EDITORIAL / Secondary English
A life, well framed.
04 / DESIGN EXPLORATIONSame brand, four approaches
Rather than drawing the correct answer at once,
different possibilities.
The way you immerse yourself in photography, the way you read it like a magazine, the way you start with a model and light, the way you structure information and work. Even with the same material, first impressions and reading speeds vary.
The design proposal below is the screen that was actually produced. You can compare what each direction emphasizes and even open the design to see the movement.
01 / CinematicConfirmed design draft
First impression upon entering the space
Open the photo of the actual house larger and scroll from the exterior to the interior. The direction is to allow people to experience the space built by ZIUMN first.
Bold Sans Serif / Olive / Photo FocusView the proposal02 / EditorialDesign Exploration
Like an architecture magazine
Read the work slowly with the Myeongjo title, paper-like background, and ample space. I attached a story next to the photo to check for a calm impression.
Myeongjo / Warm Ivory / Asymmetric EditView the proposal03 / SpatialDesign exploration
Architecture explained through time and light
The architectural model and daylight were used as the first scene. Before introducing the actual work, this is a direction that visually shows the process of transforming thoughts into space.
Large Myeongjo / Neutral / Transition of TimeView the proposal04 / StructuredDesign Exploration
Philosophy and works as one system
A combination of ZIUM& notation, geometric lines, work cards and step-by-step instructions. The direction is to help you understand everything from the brand philosophy to the work process.
Sans Serif / Sage / Geometric StructureView the proposalTHE CHOSEN DIRECTION / CINEMATIC
In the end, I was the first to encounter the space built by ZIUMN.
In the first confirmed design, a photo of the actual work creates the first impression. The large title briefly conveys the brand's attitude, and the scroll continues from the outside to the inside of the space. The stories and information examined in other designs are also continued through the introduction of the work and the work process.
The actual work appears in the first sceneA short and clear brand statementAn explanatory movement
05 / INTERACTION WITH A REASONFrom the outside in.
From the outside in.
From someone who sees to someone who stays.
The picture gets bigger and the gaze moves inward.
It contains the order of experiencing the space in one scroll.
OUTSIDEINSIDE
06 / THE DIGITAL EXPERIENCEFollowing the movement, read information
If you stayed at the photo,
now it's time to read the reason.
To ensure that the immersion from the first screen continues on the next page, we linked the work, brand introduction, building process together, materials, details, and inquiries. This is the order in which the person who appreciates the work can think of their own project.
- 01Encounter the spaceActual work and first impressions
- 02Understanding AttitudeThe Story and Philosophy of the Work
- 03Looking at the processBuilding a house and choosing materials
- 04Start a conversationProject inquiry
We distinguish between houses, interiors, and commercial spaces, and the stories of each work are continued on detailed pages.
Divide the materials into the exterior, interior walls, and interior of the home to help you understand what is being considered.
EVERY SPACE HAS A DIFFERENT REASON.Even within the same framework,
Even within the same framework,
The expression of the work is different.
Sa Ae-heon
A home for everyone living together
The lives of the two building owners and their dog determine the composition of the windows, yard, and space.
small material
white house with scenery
The position and proportions of the windows and the different shapes in each space tell the story of the house.
Pyeonggyeongjae
Courtyard between landscape and daily life
The yard, deck, and even the light at night are shown as one living scene.
Moonlight Bar
The alley in my memory becomes a space
The atmosphere of homes and other commercial spaces also continues within the same brand.
07 / IN YOUR HANDSOn mobile, at mobile speed
Even on a small screen
there is plenty of space.
The horizontal expansion of the PC was not reduced to a small screen. The work runs vertically, and sentences remain at a readable size. It allows you to browse works and stories with one hand and move to the next page.
Large photos and readable textVertical navigation of worksFinger-open menu and photo enlargementReflect device's motion reduction settings
08 / MEET THE WEBSITENow, experience it for yourself.
The choices explained
into one website.
From the first impression, the order of reading the work, the color and movement.
All connected as one on ZIUMN's homepage.
ziumn.com
YOUR BRAND, SEEN WITH CARE.
What is the reason for your brand?
Let's take a look at the photos we have, the stories we haven't yet organized, and even the direction we're considering.
ZIUMN / BRAND WEBSITEPlanning · Design · Interaction · DevelopmentBLUECANVAS