MAKING
OF
before we became
before we became
DESKTOP LANDING PAGE - FINAL ITERATION
WEBSITE: ITERATION 01
WEBSITE: ITERATION 01
THE ITERATION BEFORE YELLOW FISH STUDIO
THE ITERATION BEFORE YELLOW FISH STUDIO
DONE BY:
DONE BY:
CASEY NG
CASEY NG
EARLY
DEVELOP-
MENTS
The inspiration came from browsing through Pinterest. The flat in the picture reminded me of the buildings I used to visit during my service. Initially, the flow of the site was meant for the user to come home from work from the MRT station, and I had planned for the site to start from the bottom and the viewer would scroll up.
Throughout my process of this website, my goal was to spark curiosity, aiming to create an experience reminiscent of playing a new game.
I have to constantly remind myself that this is a website, and it should still look and feel like a website.
The inspiration came from browsing through Pinterest. The flat in the picture reminded me of the buildings I used to visit during my service. Initially, the flow of the site was meant for the user to come home from work from the MRT station, and I had planned for the site to start from the bottom and the viewer would scroll up.
Throughout my process of this website, my goal was to spark curiosity, aiming to create an experience reminiscent of playing a new game.
I have to constantly remind myself that this is a website, and it should still look and feel like a website.
LANDING PAGE
ANIMATION
ANIMATION
The individual unit functions as individual portals to each project
The void deck functions as a footer for the website, where the contact us, and booking button is located at.
In the second iteration, the inclusion of the void deck is introduced.
The website is designed to be divided into two distinct sections, with the top half dedicated to showcasing projects, while the bottom half is dedicated to providing information. Each unit is presented as a project, mirroring the organization found in real-life scenarios.
In the second iteration, the inclusion of the void deck is introduced.
The website is designed to be divided into two distinct sections, with the top half dedicated to showcasing projects, while the bottom half is dedicated to providing information. Each unit is presented as a project, mirroring the organization found in real-life scenarios.
The individual unit functions as individual portals to each project
The void deck functions as a footer for the website, where the contact us, and booking button is located at.
The individual unit functions as individual portals to each project
The void deck functions as a footer for the website, where the contact us, and booking button is located at.
OVERALL LANDING PAGE LANDING PAGE
VOID LIGHT // ANIMATION [TESTING]
STATIC LANDING PAGE
VOID LIGHT // ANIMATION TESTING
The white square frame that appears on the top left side of the STATIC LANDING PAGE, is a viewport / border of where it is fixed and sized based on the size of your browser, it was supposed to mimic a printed photo, and that is the direction moving forward.
4TH FLOOR
3RD FLOOR
2ND FLOOR
These subtle elements portray everyday objects that we often take for granted, seldom pausing to consider their significance.
I am inclined towards showcasing these commonplace elements, with the intention of embracing it, rather than obscuring it.
LETTER BOX
SERVICES OFFERED
NOTICE BOARD
These subtle elements portray everyday objects that we often take for granted, seldom pausing to consider their significance.
I am inclined towards showcasing these commonplace elements, with the intention of embracing it, rather than obscuring it.
These subtle elements portray everyday objects that we often take for granted, seldom pausing to consider their significance.
I am inclined towards showcasing these commonplace elements, with the intention of embracing it, rather than obscuring it.
4TH FLOOR
3RD FLOOR
2ND FLOOR
LETTER BOX
SERVICES OFFERED
NOTICE BOARD
DOOR UNIT COMBO
DRAG ME TOO
DRAG ME TOO
While it is understandable that "HUANG"【黄】translates to yellow in Mandarin, I personally find that orange better encapsulates my personality and concept. The aspiration to establish my own workspace for honing my craft has been a longstanding goal, albeit one approached gradually.
The shelf, originally a component of my previous project,
Home Studio, caught my attention due to its mobility.
Transforming it into a vector graphic accentuated
its appeal, and I found the outcome to be
particularly gratifying.
While it is understandable that "HUANG"【黄】translates to yellow in Mandarin, I personally find that orange better encapsulates my personality and concept. The aspiration to establish my own workspace for honing my craft has been a longstanding goal, albeit one approached gradually.
The shelf, originally a component of my previous project,
Home Studio, caught my attention due to its mobility.
Transforming it into a vector graphic accentuated its appeal, and I found the outcome to be particularly gratifying.
EARLY ITERATIONS OF LOGO [DIGITAL]
FINAL ITERATIONS OF LOGO [DIGITAL]
DRAG ME
LOGO
EARLY ITERATIONS OF LOGO [DIGITAL]
FINAL ITERATIONS OF LOGO [DIGITAL]
<-
The phone symbolizes the action of reaching for your device and initiating contact with someone else.
Within the website, buttons serve functional purposes, I took the opportunity to infuse them with personality through custom graphics. This approach follows games, where each skill is visually represented by an illustration depicting its effect and function.
The tablet icon embodies the process of conducting research and exploring options before making a commitment, reflecting the typical approach to decision-making and scouting possibilities.
The book symbolizes a journal containing all conceptualizations, each project meticulously crafted with thoughtful consideration and planning.
The conceptualisation behind each graphic aims to vividly portray the dynamics inherent in our everyday actions—capturing the essence of mundane activities often overlooked. Take, for instance, the representation of a phone; it symbolises the initiation of communication. Typically facilitated through social and messaging applications, the graphic serves as a visual embodiment of the inception of such interactions.
The phone symbolizes the action of reaching for your device and initiating contact.
Within the website, buttons serve functional purposes, I took the opportunity to infuse them with personality through custom graphics. This approach follows games, where each skill is visually represented by an illustration depicting its effect and function.
The tablet iteration shows the process of conducting research and exploring options before making a commitment, reflecting the typical approach to decision-making and scouting possibilities.
The book symbolizes a journal containing all conceptualizations, each project meticulously crafted with thoughtful consideration and planning.
The conceptualisation behind each graphic aims to portray the dynamics inherent in our everyday actions—capturing the essence of mundane activities often overlooked. Take, for instance, the representation of a phone; it symbolises the initiation of communication. Typically facilitated through social and messaging applications, the graphic serves as a visual embodiment of the inception of such interactions.
DRAG TO VIEW
<-
The challenge arises from the substantial graphics featured on the desktop site's landing page. Replicating this on the mobile version poses difficulties, as the limited screen space makes scrolling potentially cumbersome without compromising the user experience.
I approached the phone site to be an abstraction of the desktop site, capturing the essence of it, and translating it onto a smaller screen.
The challenge arises from the substantial graphics featured on the desktop site's landing page. Replicating this on the mobile version poses difficulties, as the limited screen space makes scrolling potentially cumbersome without compromising the user experience.
I approached the phone site to be an abstraction of the desktop site, capturing the essence of it, and translating it onto a smaller screen.
The challenge arises from the substantial graphics featured on the desktop site's landing page. Replicating this on the mobile version poses difficulties, as the limited screen space makes scrolling potentially cumbersome without compromising the user experience.
I approached the phone site to be an abstraction of the desktop site, capturing the essence of it, and translating it onto a smaller screen.
It is recommended to view the site on a desktop for a better viewing experience!
INITIAL ITERATION
interior
Studio
Huang
about me
pull me
↱
2ND ITERATION
The challenge arises from the substantial graphics featured on the desktop site's landing page. Replicating this on the mobile version poses difficulties, as the limited screen space makes scrolling potentially cumbersome without compromising the user experience.
I approached the phone site to be an abstraction of the desktop site, capturing the essence of it, and translating it onto a smaller screen.
The final iteration of the menu can be interacted with from the slide before this, on the phone, it is a combination of both the initial iteration and the second one, which looks like a tab, and upon activating, it still resembles a photo strip, which is what it was intended to be.
Curious about how we got to
Yellow Fish Studio?
Curious about how we got to
?
◄
◄
VIEW HERE
VIEW HERE
→
WE ARE
CREATIVES
SPECIALISING IN INTERIOR DESIGN
LANDING
Design
The design service I offer encompasses the conceptualisation and construction of your project. We will engage in meetings and discussions regarding your home, and once that phase concludes, I will coordinate and schedule the necessary tasks with my associates to bring your vision to life.
here are all we offer
Consultation
Consultation services are similar to designing, but we won't oversee the construction process. Instead, we will supply relevant materials, such as renders, drawings, and other necessary mateirlas for you to execute your own build.
Custom
If there are other services or jobs that you are interested that we don't currently list here, please do not hesitate to contact us via email or a text! We will further discuss there!
SERVICES OFFERED
SERVICES OFFERED
PROJECT FLOW
PROJECT FLOW
The journey that we will be going through together
Design
Welcome to the start of our journey together! There will be a form waiting for you to fill up. The form consists of the parameters of the projects, as well as an option for you to include a design brief for your desired home!
Consultation
We'll start by discussing your vision and requirement for your home. We'll delve into the specifics of your living space to create a tailored design that aligns seamlessly with your lifestyle.
Conceptualisation
We'll start by discussing your vision and requirement for your home. We'll delve into the specifics of your living space to create a tailored design that aligns seamlessly with your lifestyle.
Selection
Here, we'll have the material selection process, from choosing laminates and paint colours to tiles, as well as home fittings.
Finalisation
During this step, we will refine your selected choices, including built-in furniture, to ensure a smooth transition to the next step with minimal room for mishaps.
Realisation
We will collaborate closely with our associates, relaying instructions. Expect regular updates on progress and schedules, using "All in one". This would eliminate any potential confusion during this crucial and stressful process.
Completion
In this phase, we'll address any defects or issues that may arise. Once resolved, we will hand over your keys, home sweet home.
PROJECT FLOW
PROJECT FLOW
We understand that the process of renovation can be stressful sometimes lucrative and confusing. We will streamline and simplify the process by keeping everything all in one place.
Keep track of your renovation schedule and updates all in one place, for a peace of mind.
Introducing
<SCHEDULED>
<SCHEDULED> is feature that we are implementing with the aim of providing you with all the details that will happen during STEP 6 ▶ Realisation. <SCHEDULED> will contain details of works that will be taking place during realisation.
It will include expected hacking dates, removal dates, and the date of installing carpentry, and other jobs that are mandatory to complete your project.
Also, images will be uploaded and categorised per each work that has already taken place.
<SCHEDULED> will be available for your viewing throughout the duration of your project.
ALL IN ONE
ALL IN ONE
About us
we are a pair of sweetheart creatives that specialises in interior design.
and we are eager to help another pair of sweetheart with their home.
About Yellow
we are a pair of sweetheart creatives that specialises in interior design.
and we are eager to help another pair of sweetheart with their home.
About Fish
we are a pair of sweetheart creatives that specialises in interior design.
and we are eager to help another pair of sweetheart with their home.
ABOUT US
ABOUT US
Home Studio
Case Study
2023
Sama-Sama
LASALLE FINAL YEAR
2023
jojo proj
jojo here
2023
SELECTED PROJECTS
SELECTED PROJECTS
Email not your kind of thing? No worries, drop us a text on Telegram. Whatsapp, or Instagram
TEL
91231234
91231234
TELEGRAM
@yellowfish.studio
@yellowfish.studio
casey@huang.studio
CONTACT US
CONTACT US
Hey there, you can book us from 1 of 2 ways.
Option 1
Please fill up the project brief with the link below. This will speed up the process.
Option 2
Don't know what you want? No problem, you may book us through text, and we can discuss from there on! You may contact us from one of few ways below!
TEL
91231234
91231234
TELEGRAM
@yellowfish.studio
@yellowfish.studio
casey@huang.studio
BOOK US
BOOK US
YELLOW FISH
STUDIO
BOOK US
MENU
◄
CONTACT
TEXT US
Copyright © 2024 Yellow Fish Studio. All rights reserved. UEN: T24LL1037L
>><^,«'>
Dog eating ice cream.mov
SELECTED
PROJECTS
ABOUT US
MENU
>><^,«'>
◄
CONTACT
TEXT US
Copyright © 2024 Yellow Fish Studio. All rights reserved. UEN: T24LL1037L
CLOSE DEMO
Dog eating ice cream.mov
fish's mixtape
Book us
All in one.pkg
About us
Selected Projects
Welcome home.itr
Yes
No
===|ERROR|===
Yellow Computinator is unable to read Welcome
home.itr cartridge.Would you like to be redirected on your own browser?
Welcome home.itr
Yes
No
insert khafei
logo here
Yellow Computinator is able to read KHAFEI.ITR.
Would you like to view it now?
Contact us
yellow's mixtape
Contact us
Yellow Computinator
[100]-px, 2024
Chip
fish & chip
Memory
goldfish GB
Operating System
yellowOS 1.02
no Regulatory Certification
Yellow Computinator & yellowOS is an interactive manifestation conjured up by【黄】Huang, with the supervision & discipline of【余】Fish, of Yellow Fish Studio
Monday, June 2, 2025
4:53:42 AM
yellowOS
BOOK US
Are you looking to get your house dressed?
yes/no?
MENU
>><^,«'>
CLOSE DEMO
Dog eating ice cream.mov
fish's mixtape
Book us
All in one.pkg
About us
Selected Projects
Welcome home.itr
Yes
No
===|ERROR|===
Yellow Computinator is unable to read Welcome
home.itr cartridge.Would you like to be redirected on your own browser?
Welcome home.itr
Yes
No
insert khafei
logo here
Yellow Computinator is able to read KHAFEI.ITR.
Would you like to view it now?
Contact us
yellow's mixtape
Contact us
Yellow Computinator
[100]-px, 2024
Chip
fish & chip
Memory
goldfish GB
Operating System
yellowOS 1.02
no Regulatory Certification
Yellow Computinator & yellowOS is an interactive manifestation conjured up by【黄】Huang, with the supervision & discipline of【余】Fish, of Yellow Fish Studio
Monday, June 2, 2025
4:53:42 AM
yellowOS
BOOK US
Are you looking to get your house dressed?
yes/no?
MENU
>><^,«'>