[{"data":1,"prerenderedAt":264},["ShallowReactive",2],{"site-config":3,"project:ecotopia-sphere-ui-ux":36,"related-DESIGN-ecotopia-sphere-ui-ux-en":213},{"id":4,"bio":5,"cv":8,"email":9,"extension":10,"headline":11,"meta":14,"name":15,"roles":16,"seo":24,"social":30,"stem":34,"__hash__":35},"site\u002Fdata\u002Fsite.json",{"id":6,"en":7},"Seorang mahasiswa Jurusan Informatika di Institut Teknologi Kalimantan yang adaptif dan komunikatif, dengan fokus pada pengembangan teknologi inovatif yang memberikan dampak positif bagi masyarakat. Saya memiliki perpaduan antara keahlian teknis termasuk penguasaan Microsoft Office dan kemampuan analitis serta soft skill yang kuat dalam kerja sama tim dan penulisan yang efektif. Dengan pengalaman dalam peran kepengurusan dan manajemen proyek, saya berkomitmen untuk terus belajar, meningkatkan kompetensi saya, dan memberikan kontribusi nyata bagi industri melalui pemikiran kritis dan kolaborasi.","An adaptive and communicative Informatics student at the Institut Teknologi Kalimantan, focused on developing innovative technologies that create a positive impact on society. I possess a blend of technical proficiency including Microsoft Office and analytical skills and strong soft skills in teamwork and effective writing. With experience in organizational roles and project management, I am committed to continuous learning, enhancing my competencies, and making tangible contributions to the industry through critical thinking and collaboration.","","christianimanueladmojo@gmail.com","json",{"id":12,"en":13},"Portofolio ini menampilkan proyek yang telah saya buat selama ini.","This portfolio showcases the projects I have created over the years.",{},"Christian Imanuel Admojo",{"id":17,"en":22},[18,19,20,21],"Mahasiswa Informatika","Front-End Developer","Data Scientist","UI\u002FUX Designer",[23,19,20,21],"Informatics Student",{"title":25,"description":28,"ogImage":29},{"id":26,"en":27},"Portofolio Christian Imanuel Admojo","Christian Imanuel Admojo's Portfolio",{"id":12,"en":13},"\u002Fog-default.png",{"github":31,"linkedin":32,"instagram":33},"https:\u002F\u002Fgithub.com\u002FChrisimana","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fchristian-imanuel-admojo-a78102324\u002F","https:\u002F\u002Fwww.instagram.com\u002Fchrisimana\u002F","data\u002Fsite","QceOmWK4RJZ1zgaal5snUuLjqSKWa8C2AG4m2CJlc7o",{"id":37,"en":132},{"id":38,"title":39,"body":40,"category":112,"cover":113,"description":8,"extension":116,"featured":117,"featuredOrder":118,"gallery":118,"links":119,"meta":121,"navigation":122,"path":123,"placeholder":117,"published":122,"publishedAt":124,"seo":125,"shortDescription":126,"status":127,"stem":128,"technologies":129,"__hash__":131},"projectsId\u002Fid\u002Fprojects\u002Fecotopia-sphere-ui-ux.md","EcoTopia Sphere (Desain UI\u002FUX)",{"type":41,"value":42,"toc":101},"minimark",[43,48,52,56,59,63,66,70,73,77,80,84,87,91,94,98],[44,45,47],"h2",{"id":46},"ringkasan","Ringkasan",[49,50,51],"p",{},"Ini adalah sisi desain dari EcoTopia Sphere, platform web edukasi gaya hidup\nramah lingkungan. Seluruh antarmuka, alur pengguna, dan sistem visualnya saya\nrancang lebih dulu di Figma sebelum diimplementasikan menjadi kode. Halaman\nimplementasinya ada sebagai project tersendiri, EcoTopia Sphere.",[44,53,55],{"id":54},"peran-saya","Peran Saya",[49,57,58],{},"Saya berperan sebagai UI\u002FUX Designer sekaligus yang membangunnya. Pekerjaan\ndesain mencakup penyusunan arsitektur informasi untuk konten edukasi yang\ncukup banyak, perancangan wireframe tiap halaman, pembuatan sistem komponen,\ndan prototipe interaktif di Figma sebagai acuan implementasi.",[44,60,62],{"id":61},"tantangan-desain","Tantangan Desain",[49,64,65],{},"Konten edukasinya banyak, artikel, showcase inovasi, dan ruang aksi komunitas,\nsehingga tantangan utamanya adalah menata semuanya agar tetap mudah\ndijelajahi dan tidak terasa padat. Selain itu, nuansa \"ramah lingkungan\"\nharus terasa tanpa jatuh ke klise hijau yang berlebihan.",[44,67,69],{"id":68},"proses-desain","Proses Desain",[49,71,72],{},"Saya mulai dari pemetaan konten dan alur navigasi, lalu menurunkannya menjadi\nwireframe low-fidelity untuk menguji struktur tiap halaman. Setelah kerangka\nterasa mantap, baru masuk ke high-fidelity: tipografi, skala spasi, warna,\nilustrasi kota hijau, dan state komponen. Layout dirancang mobile-first lalu\ndinaikkan ke breakpoint yang lebih lebar.",[44,74,76],{"id":75},"sistem-desain","Sistem Desain",[49,78,79],{},"Dibangun kumpulan token dan komponen yang dapat dipakai ulang, tombol, kartu,\nkartu artikel, tag kategori, formulir, dan pola statistik, sehingga tampilan\ntetap konsisten saat jumlah halaman bertambah dan implementasinya lebih\nmudah diprediksi.",[44,81,83],{"id":82},"prototipe-dan-serah-terima","Prototipe dan Serah Terima",[49,85,86],{},"Prototipe Figma dengan tautan antar-frame dipakai sebagai satu-satunya acuan\nsaat implementasi. Karena saya juga yang membuat kodenya, keputusan desain\nbisa langsung diuji di browser dan disesuaikan bila ada yang tidak pas.",[44,88,90],{"id":89},"hal-hal-yang-saya-pelajari","Hal-hal yang Saya Pelajari",[49,92,93],{},"Proyek ini mempertajam kemampuan menyusun arsitektur informasi untuk konten\ndalam jumlah besar, menjaga sistem komponen tetap ringkas, dan menutup jarak\nantara file desain dan kode nyata.",[44,95,97],{"id":96},"hasil","Hasil",[49,99,100],{},"Rancangan ini menjadi dasar EcoTopia Sphere yang sudah berjalan, dengan\ntampilan yang konsisten di berbagai ukuran layar. File Figma-nya bisa dilihat\nlewat tautan di atas.",{"title":8,"searchDepth":102,"depth":102,"links":103},2,[104,105,106,107,108,109,110,111],{"id":46,"depth":102,"text":47},{"id":54,"depth":102,"text":55},{"id":61,"depth":102,"text":62},{"id":68,"depth":102,"text":69},{"id":75,"depth":102,"text":76},{"id":82,"depth":102,"text":83},{"id":89,"depth":102,"text":90},{"id":96,"depth":102,"text":97},"DESIGN",{"src":114,"alt":115},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Fcover.webp","Halaman utama EcoTopia Sphere, hasil akhir dari rancangan antarmuka","md",false,null,{"demo":120},"https:\u002F\u002Fwww.figma.com\u002Fdesign\u002FlhdJK3EnwUYlHKJQvdhUNK\u002FWebsite-%7C-EcoTopia-Sphere?node-id=3-11",{},true,"\u002Fid\u002Fprojects\u002Fecotopia-sphere-ui-ux","2025-04-18",{"title":39,"description":8},"Perancangan antarmuka dan alur pengguna untuk platform edukasi gaya hidup ramah lingkungan EcoTopia Sphere, dikerjakan di Figma.","COMPLETED","id\u002Fprojects\u002Fecotopia-sphere-ui-ux",[130],"figma","GvJeOFQ6K9TbcuAgZKiMYOcGQIa_RFY7nW_0JVxGBYY",{"id":133,"title":134,"body":135,"category":112,"cover":203,"description":8,"extension":116,"featured":117,"featuredOrder":118,"gallery":118,"links":205,"meta":206,"navigation":122,"path":207,"placeholder":117,"published":122,"publishedAt":124,"seo":208,"shortDescription":209,"status":127,"stem":210,"technologies":211,"__hash__":212},"projectsEn\u002Fen\u002Fprojects\u002Fecotopia-sphere-ui-ux.md","EcoTopia Sphere (UI\u002FUX Design)",{"type":41,"value":136,"toc":193},[137,141,144,148,151,155,158,162,165,169,172,176,179,183,186,190],[44,138,140],{"id":139},"overview","Overview",[49,142,143],{},"This is the design side of EcoTopia Sphere, a web platform for eco-friendly\nlifestyle education. The entire interface, its user flows, and its visual\nsystem were designed in Figma first, then implemented as code. That\nimplementation lives as a separate project, EcoTopia Sphere.",[44,145,147],{"id":146},"my-role","My Role",[49,149,150],{},"I worked as the UI\u002FUX Designer and also built it. The design work covered the\ninformation architecture for a fairly large body of educational content,\nwireframes for each page, a component system, and an interactive Figma\nprototype used as the implementation reference.",[44,152,154],{"id":153},"design-challenges","Design Challenges",[49,156,157],{},"There is a lot of educational content, articles, an innovation showcase, and a\ncommunity action space, so the main challenge was arranging it all so it stays\neasy to browse without feeling dense. The eco-friendly tone also had to come\nthrough without leaning on an overdone \"green\" cliche.",[44,159,161],{"id":160},"design-process","Design Process",[49,163,164],{},"I started by mapping the content and navigation flow, then turned it into\nlow-fidelity wireframes to test each page's structure. Once the skeleton felt\nsolid, I moved to high fidelity: typography, spacing scale, colour, the\ngreen-city illustration, and component states. Layouts were designed\nmobile-first, then scaled up to wider breakpoints.",[44,166,168],{"id":167},"design-system","Design System",[49,170,171],{},"A set of reusable tokens and components was built, buttons, cards, article\ncards, category tags, forms, and a statistics pattern, so the look stayed\nconsistent as pages were added and the implementation stayed predictable.",[44,173,175],{"id":174},"prototype-and-handoff","Prototype and Handoff",[49,177,178],{},"A linked Figma prototype was the single reference during implementation. Since\nI also wrote the code, design decisions could be tested in the browser right\naway and adjusted where something did not sit right.",[44,180,182],{"id":181},"what-i-learned","What I Learned",[49,184,185],{},"This project sharpened my ability to structure information architecture for a\nlarge volume of content, keep a component system lean, and close the gap\nbetween a design file and real code.",[44,187,189],{"id":188},"result","Result",[49,191,192],{},"This design is the basis of the live EcoTopia Sphere, with a look that holds\nup across screen sizes. The Figma file can be viewed via the link above.",{"title":8,"searchDepth":102,"depth":102,"links":194},[195,196,197,198,199,200,201,202],{"id":139,"depth":102,"text":140},{"id":146,"depth":102,"text":147},{"id":153,"depth":102,"text":154},{"id":160,"depth":102,"text":161},{"id":167,"depth":102,"text":168},{"id":174,"depth":102,"text":175},{"id":181,"depth":102,"text":182},{"id":188,"depth":102,"text":189},{"src":114,"alt":204},"EcoTopia Sphere homepage, the final result of the interface design",{"demo":120},{},"\u002Fen\u002Fprojects\u002Fecotopia-sphere-ui-ux",{"title":134,"description":8},"Interface and user-flow design for EcoTopia Sphere, an eco-friendly lifestyle education platform, done in Figma.","en\u002Fprojects\u002Fecotopia-sphere-ui-ux",[130],"b0NpAZxPuT-NK4NUhFSLJWUyNlo__LIX1FQ0TUScKoQ",[214],{"id":133,"title":134,"body":215,"category":112,"cover":259,"description":8,"extension":116,"featured":117,"featuredOrder":118,"gallery":118,"links":260,"meta":261,"navigation":122,"path":207,"placeholder":117,"published":122,"publishedAt":124,"seo":262,"shortDescription":209,"status":127,"stem":210,"technologies":263,"__hash__":212},{"type":41,"value":216,"toc":249},[217,219,221,223,225,227,229,231,233,235,237,239,241,243,245,247],[44,218,140],{"id":139},[49,220,143],{},[44,222,147],{"id":146},[49,224,150],{},[44,226,154],{"id":153},[49,228,157],{},[44,230,161],{"id":160},[49,232,164],{},[44,234,168],{"id":167},[49,236,171],{},[44,238,175],{"id":174},[49,240,178],{},[44,242,182],{"id":181},[49,244,185],{},[44,246,189],{"id":188},[49,248,192],{},{"title":8,"searchDepth":102,"depth":102,"links":250},[251,252,253,254,255,256,257,258],{"id":139,"depth":102,"text":140},{"id":146,"depth":102,"text":147},{"id":153,"depth":102,"text":154},{"id":160,"depth":102,"text":161},{"id":167,"depth":102,"text":168},{"id":174,"depth":102,"text":175},{"id":181,"depth":102,"text":182},{"id":188,"depth":102,"text":189},{"src":114,"alt":204},{"demo":120},{},{"title":134,"description":8},[130],1788775302390]