Our Work

Selected projects showcasing our expertise in design and development

UI-UX

Go Tour

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Travel With Someone Who Knows — Go Tour connects travelers with trusted local guides, turning unfamiliar places into curated, meaningful journeys."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/go-tour.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Mobile App Design — Go Tour"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Travel & Tourism · Tour Guide Service · Local Experience · UI/UX Design"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A mobile application designed to simplify and enrich the travel experience — Go Tour connects tourists with professional local guides, making exploration more structured, personal, and insightful."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The experience centers on discovery and trust. Instead of navigating destinations alone, users can browse, select, and connect with guides who understand the local culture, routes, and hidden gems. This transforms travel from self-directed exploration into a guided journey with context and depth."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The interface likely emphasizes clarity and ease of planning. Key actions — finding destinations, viewing guide profiles, booking services, and managing itineraries — are streamlined into a cohesive flow that reduces friction for travelers, especially in unfamiliar environments."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Go Tour positions itself as more than a booking platform. It is a bridge between visitors and local knowledge — enabling more authentic, efficient, and meaningful travel experiences."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Visually, the design is expected to evoke a sense of exploration and openness, while maintaining structure and reliability. Information is presented in a way that supports quick decisions without overwhelming the user."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"This project reflects a shift in modern tourism — where travelers seek not just places, but stories, context, and human connection."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A thoughtful approach to travel design, where guidance is not optional, but essential — and every journey becomes more than just movement from one place to another."}]},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":" "},{"type":"text","marks":[{"type":"bold"},{"type":"italic"}],"text":"Go Ride X"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"2019-11-01 19:46:14"},{"type":"text","text":" "}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/go-ride-x.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"."}]}]}

Geonk Radio Logo

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Turn up the frequency — Geonk Radio's identity hits like a drop on the airwaves, raw, electric, and impossible to tune out."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/C5hLTFMh_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Brand Identity — Geonk Radio"},{"type":"text","text":" "},{"type":"hardBreak"},{"type":"text","marks":[{"type":"italic"}],"text":"Logo Design · Independent Radio Station · Music & Broadcasting"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A high-voltage, street-culture-inspired brand identity for Geonk Radio — an independent radio station that wears its sonic personality on its sleeve. The logo is a bold fusion of music, attitude, and visual energy, assembled with the confident hand of a designer who understands that a radio brand must sound as good as it looks."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The logomark centers on a stylized human head wearing oversized headphones — the universal symbol of immersive listening — rendered as a stark, graphic silhouette in acid yellow-green against deep charcoal black. The head is not a smooth, corporate avatar; it is angular and abstracted, with a sharp triangular face built from bold geometric planes, communicating the edgy, independent character of a station that plays by its own rules."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The standout detail is the halftone stripe treatment — a series of bold vertical lines that fill the triangular face, referencing both the visual noise of a radio signal and the graphic language of underground print culture, zines, and street posters. The \"GR\" monogram is embedded within this striped form, functioning as both a lettermark and a visual texture that rewards close inspection."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The headphone arc that crowns the head is rendered in the same electric yellow-green, with circular ear cups that pop with graphic weight — clean circles against the dark background that give the mark its iconic, badge-like silhouette. Below, the wordmark \"Geonk Radio\" is hand-lettered in a flowing script — loose, expressive, and entirely at odds with the geometric rigidity of the icon above — creating a deliberate tension between structure and freedom that perfectly mirrors the spirit of independent radio."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The two-color palette — electric acid green on near-black — is a neon-in-the-dark choice: maximum contrast, maximum presence, zero compromise."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A logo that doesn't ask for your attention — it takes it, tunes you in, and never lets go."}]}]}

Brandinglogoradio

Illustration

Bakso Burger Sandwich T-Shirt

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Bakso meets burger meets sandwich — this t-shirt design is the delicious collision of Indonesian street food and global fast food, served bold on a yellow tee."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/jDIWQR6Z_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"T-Shirt Design — Bakso Burger Sandwich"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Apparel Design · Indonesian Food Culture · Street Food · Graphic Tee"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A visually explosive t-shirt design that celebrates the ultimate Indonesian food fusion fantasy: a towering burger-bakso-sandwich hybrid stack — all-caps flavor, no apologies. The design lives on a vibrant, screen-print-ready yellow ground that announces itself across a room before the details are even legible."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The central illustration is a gloriously impractical food tower: a classic burger bun on top, layered patty and fresh vegetables cascading downward into a full bakso bowl — the traditional Indonesian meatball soup vessel sitting at the base, complete with its distinctive ceramic bowl and broth — each layer rendered in a detailed, appetite-first illustration style. The entire stack is held together by the sheer force of design confidence. A red lightning bolt slash cuts through the upper right of the composition, adding kinetic energy and the visual shorthand of something so good it strikes like electricity."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The \"Bakso Burger Sandwich\" logotype below is set in a warm, retro-groovy script — yellow letters with deep red and black outlines, the typography of a 1970s food stall that accidentally became iconic. The thick outlined lettering has the street-food menu energy of something hand-painted on a warung wall, but designed with the craft of a brand that knows exactly what it's doing."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"On yellow, with black and red outlines throughout, the design achieves maximum visual impact — bold, graphic, and screen-printable in three colors or fewer."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A t-shirt that celebrates the best of Indonesian street food culture with the confidence of something that was always destined to be worn."}]}]}

IllustrationT-ShirtBakso

UI-UX

The Pixel - Website Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Built on Magento, built for growth — The Pixel's website design positions the agency as the expert partner for businesses ready to take their e-commerce seriously."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/0qUmt8MF_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — The Pixel"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Website Design · Magento E-Commerce Agency · Web Development Services"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, technology-forward website design for The Pixel — a web agency specializing in Magento e-commerce solutions — whose homepage communicates platform expertise and technical credibility from the first scroll, designed for the specific audience of business owners evaluating e-commerce partners."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero section is built around a bold product endorsement: the Magento logomark and wordmark dominate the left half of the hero field — \"Magento® eCommerce Platform for Growth\" — a direct declaration of partnership and specialization that tells the visitor exactly what platform the agency builds on before a single service description has been read. The right side of the hero is a dramatic 3D render of the Magento \"M\" icon in warm orange-gold, oversized and dimensional, floating against a deep sky-blue and polygon-network background that communicates technical sophistication and digital infrastructure depth."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The Magento mark's characteristic interlocking loop form — rendered here in both flat orange and full 3D gold — is treated as the hero's centrepiece visual, demonstrating The Pixel's comfort with and ownership of the platform identity. An agency that dedicates its entire homepage hero to a platform endorsement is an agency that has made a clear market bet — and communicates that confidence explicitly."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The \"thepixel\" logo anchors the upper left in a clean sans-serif with a distinctive lowercase \"p\" letterform mark — simple, memorable, and technical. The navigation — Home, E-Commerce, Hosting, Support, Blog — maps the agency's full service stack, confirming The Pixel offers the complete lifecycle of Magento services from build to hosting to ongoing support."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A web design that positions the agency as a specialist rather than a generalist — and in e-commerce, specialization is the strongest possible signal of competence."}]}]}

UI-UXWebWebsite

UI-UX

KREATE - App UI Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Overnight Oats, Savory Oats, Gourmet Salad — Kreaté's app UI makes healthy eating feel like a lifestyle choice you actually want to make."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/syWPFwQv_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"App UI Design — KREATÉ"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mobile App · Healthy Food Ordering"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, minimal app UI design for Kreaté — a healthy food brand serving Overnight Oats, Savory Oats, and Gourmet Salads with a \"Rejuvenating your Lifestyle\" philosophy. The onboarding screen is held in hand — an intentional presentation choice that connects the digital product to its real-world context."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The app leads with the Kreaté wordmark in a light sans-serif paired with a minimal botanical leaf icon — fresh, contemporary, and entirely aligned with the brand's health-forward identity. The white background with fresh green as the sole accent color communicates cleanliness and natural goodness without visual noise."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The auth flow is frictionless: a prominent green \"Register\" CTA, a quiet \"Log In\" link below, and terms copy that doesn't intimidate. A bottom tab bar with three icons (Order, Menu, More) is already visible — confirming the app's core structure is simple and task-focused from the very first screen."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A healthy food app UI that looks as clean as what it serves."}]}]}

UI-UXWebWebsite

UI-UX

Arroudhah - Website

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"\"Jaga selalu Kesehatan Keluarga Anda\" — Ar Raudhah's website brings the warmth of Thibbun Nabawi tradition into a clean, family-focused digital storefront."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/small/LqsoQHxf_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — Ar Raudhah (Arroudhah)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Herbal Health Product Website · Habbatussauda, Madu & Thibbun Nabawi · Indonesia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A warm, trust-centered website for Ar Raudhah — an Indonesian herbal health brand selling habbatussauda (black seed), madu (honey), and a range of Thibbun Nabawi (Prophetic medicine) products."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero centers on a happy Saudi-styled family — a father in thobe, mother in hijab, child — communicating the brand's core promise: \"Jaga selalu Kesehatan Keluarga Anda\" (Always Protect Your Family's Health). The family imagery is a deliberate trust signal for a Muslim-market brand: health products framed as an act of care for those you love, rooted in Islamic tradition."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The deep forest green and gold palette carries the brand's Islamic heritage identity — green as the color of the deen, gold as a signal of quality. Product card thumbnails below the hero showcase habbatussauda seeds and honey — natural, high-quality imagery that reinforces the \"alami dan berkualitas\" positioning expected by health-conscious Muslim consumers."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A herbal product website that sells the belief system as much as the product — and for its audience, that's exactly the right approach."}]}]}

UI-UXWebWebsite

UI-UX

Kalaweit

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"For the safeguard of biodiversity in Indonesia — Kalaweit's app splash screen gives one of Borneo's most important wild animal rescue organizations a digital identity worthy of the work they do."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/details/254-kalaweit/kalaweit.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"App UI Design — Kalaweit"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mobile App · Wild Animal Rescue NGO · Borneo, Indonesia · "},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://kalaweit.org","target":"_blank","rel":"noopener noreferrer nofollow","class":null,"title":null}},{"type":"italic"}],"text":"kalaweit.org"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, purposeful splash screen design for the Kalaweit mobile app — representing one of Indonesia's most established wildlife conservation organizations, founded 28 years ago and dedicated to the rescue, rehabilitation, and protection of gibbons and other wild animals across Borneo and Sumatra."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The splash screen is a single, confident statement: a deep forest green background — the color of the jungle Kalaweit works to protect — bearing the organization's logo centered on screen. The logomark is a shield containing a stylized gibbon face rendered in white, arms raised in the characteristic gibbon posture — simultaneously a primate portrait and a symbol of protection. Below it, \"KALAWEIT\" in bold white type and \"Wild Animal Rescue\" as a clean subtitle."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The design achieves what every NGO mobile identity needs to achieve in its opening moment: instant recognition, clear mission, and emotional resonance. You know what this organization does before you have read a word. The green communicates conservation; the shield communicates protection; the gibbon face communicates exactly whose story this is."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Kalaweit's mission by the numbers is extraordinary — 1,554 friends/supporters, 3,179 protected hectares, 318 animals across 2 centers — and this app splash screen is the first digital touchpoint connecting that mission to the people who want to support it."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A mobile identity that honors the animals it represents — and the 28 years of work behind it."}]},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"image","attrs":{"src":"https://hyperfantasy.web.app/assets/images/portfolios/36bc89b6-0979-48ba-8ef9-747d59b8b424/kalaweit.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null}}]}

UI-UXappmobile

Development

Geonk Retro - Profile Flash App

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Every designer has a \"first\" — and this is mine: a retro Flash profile app built in 2011 that sparked everything that came after."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/ATExggLP_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Digital Design — Geret · Geonk Retro"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Personal Profile Flash App · 2011 · Where It All Began"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A deeply personal artifact in this portfolio — Geret is the Flash-based interactive profile application built in 2011, the very project that marked the beginning of a design journey now spanning well over a decade. It is included here not despite its age, but because of it: as honest evidence of where the craft began, and how far it has traveled since."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The visual is a carefully composited digital scene — a figure seated on a vintage sofa against a warm exposed brick wall, framed photographs hanging behind, a retro boombox on a side table. The aesthetic is deliberate and cohesive: moody, cinematic, and unmistakably retro. Even at this earliest stage, there is instinct at work — an understanding that a profile is not just information, it is atmosphere. That the best way to introduce yourself is not with a list of facts, but with a world the viewer steps into."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The \"GERET — GEONK RETRO\" title card, set in a worn serif on a torn paper texture, sits as a handmade banner in the upper left — a typography choice that was already reaching for character and tone rather than defaulting to the generic."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Built entirely in Adobe Flash at a time when Flash was the frontier of interactive web design, this piece represents the first collision of storytelling instinct and digital craft — the origin point of a designer who has never stopped pushing both."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A reminder that every expert was once a beginner — and that the best beginnings are the ones made with genuine curiosity and zero shortcuts."}]}]}

Developmentprofileinteractive

UI-UX

Arabian Loan Service Landing Page - Fun Version

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Bold, bilingual-ready, and built for a Saudi audience — this Arabian loan service landing page makes financing feel less like a transaction and more like a solution designed just for you."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/1863357/screenshots/11646573/media/3942bfae29ff1b981ab3fb50f83c1f20.png?compress=1&resize=1600x1200&vertical=top","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"UI/UX Design — Arabian Loan Service Landing Page"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Web & Mobile Design · Tammwel · Loan Marketplace · Saudi Arabia · Fun Version"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A vibrant, full-responsive landing page design for Tammwel — an Arabian loan marketplace application — presented in both desktop and mobile layouts that demonstrate a cohesive, conversion-optimized UI system built for the Saudi digital finance market."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero section leads with maximum confidence: a bold, left-aligned headline \"The Best Loan Just for You\" — direct, personal, and consumer-first — paired with a dynamic illustrated hero of a Saudi man in thobe mid-stride on a golden platform, exuding the energy of someone who just solved a financial problem. The dual CTA buttons — PlayStore and AppStore — position the platform as mobile-first without abandoning the web experience. The hero illustration's blue-and-yellow color geometry gives the section visual drama without sacrificing readability."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The \"Fun Version\" design direction is immediately apparent in the palette choices: the deep indigo-to-violet gradient background frames the white card layout, while yellow accent shapes, pink curves, and purple icon circles inject playful energy into what is typically a conservative category. The result is a fintech landing page that feels accessible and approachable — designed for everyday Saudis discovering digital financing for the first time, not just tech-savvy early adopters."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The product categories — Personal Loan, Riding Loan, and Property Loan — are organized as a clean three-column icon grid, each with a purple circular icon and a concise benefit description. Below, an interactive loan calculator prompt (\"Find the loan offers that match with your preferences\") with amount input, sector dropdown, and a prominent yellow \"Find It Now\" CTA completes the discovery-to-action flow in a single scroll."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The mobile layout mirrors every section in a perfectly adapted single-column format — responsive thinking applied at every breakpoint, not as an afterthought."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A loan marketplace design that proves financial services can be warm, bold, and genuinely enjoyable to navigate."}]}]}

IllustrationUI/UXweb

Illustration

Illustration Bali.js - Hero Section Website

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Where Balinese culture meets JavaScript — this hero illustration captures a developer community as vibrant, warm, and alive as the island it's named after."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/illustration-balijs-website.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Hero Illustration — Bali.js"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Website Hero Section · JavaScript Community · Bali, Indonesia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A richly atmospheric hero illustration for Bali.js — the JavaScript developer community rooted in Bali, Indonesia — that achieves something rare in tech community branding: it makes code feel like culture, and culture feel like code."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The composition places two characters at the center of a lush, golden-purple landscape that is unmistakably Balinese in spirit — tropical foliage rendered in deep plum and aubergine, warm amber-gold backgrounds, and the soft haze of a Balinese sunset bathing the entire scene in a palette that could only belong to this island. Yet floating through this landscape are the unmistakable icons of the JavaScript ecosystem: the JS logo, the React atom, the Node.js hexagon, the Angular shield — technology badges orbiting the scene like spirits, bridging the digital and the natural with effortless elegance."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The female character — flowing auburn hair, yellow Balinese-style outfit, flower in her hair — holds a smartphone with a peace sign, connecting the traditional Balinese aesthetic with contemporary digital life. The male character — JS t-shirt, Balinese udeng headband, flip-flops — runs forward with a laptop outstretched, the physical embodiment of a developer community that builds things with urgency and joy. The laptop itself glows between them — the shared object, the meeting point of culture and craft."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The illustration style is warm painterly flat-vector — layered organic shapes, gradient fills, and expressive character design that feels handcrafted rather than generated. The overall composition reads as a poster for a community you'd want to join not just for the code, but for everything around it."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A hero illustration that says: we are developers, we are Balinese, and where we build is as important as what we build."}]}]}

Illustrationflatvector

Illustration

Beer Lover - Character Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Beer can on his head, \"I ❤️ BEER\" sign raised high, grin absolutely unrepentant — Beer Lover is the character design that knows exactly what it is and commits completely."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/Xo4TxRrJ_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Character Design — Beer Lover"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Chibi Character Illustration · Personal Expression · Humor"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A cheerfully shameless chibi character illustration of the archetypal beer enthusiast — rendered with warm humor, clean vector linework, and the kind of unashamed commitment to a single personality trait that makes character design genuinely joyful to look at."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The character is a compact, oversized-head chibi figure with a wide, ear-to-ear grin — the face of someone who has decided that life is short, beer is good, and there is no reason to pretend otherwise. A blue cap sits on his head, and perched on top of the cap — with the casual permanence of someone who has simply always had a beer can on their head — sits a branded beer can, label visible, perfectly balanced. The yellow t-shirt and red shorts complete the look: casual, cheerful, and entirely comfortable."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"In one raised hand he holds a small placard: \"I ❤️ BEER\" — the red heart emoji rendered in actual illustrated form, the message delivered with the earnest directness of someone making a public announcement they have never felt the need to keep private. The sign's proportions are just large enough to be the first thing you read in the composition, ensuring the character's position on the matter is established before you've taken in the rest of the details."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The minimal linework treatment on the body — sketchy, semi-finished — gives the lower half a spontaneous, doodle-like quality that contrasts playfully with the more polished face and upper body, as if the character materialized from a quick sketch that took on a life of its own."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Presented on folded paper on a warm salmon surface — a medium that suits the character's casual, personal energy perfectly."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A character that celebrates one specific love with total, unembarrassed sincerity. We respect it."}]}]}

Illustrationflatvector

UI-UX

Karmagroup Modern

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Karma Kandara, Ungasan Bali — the most refined iteration of Karma Group's mobile presence yet, clean and editorial with the brand's luxury credentials front and center."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/karmagroup-modern.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — Karma Group Modern"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mobile Web · Luxury Hospitality · Redesign Concept"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The most refined of Karma Group's mobile web design iterations — a clean, light, editorial approach that lets the property photography do the talking while the interface stays completely out of the way."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero is Karma Kandara, Ungasan Bali — the same clifftop infinity pool in its signature twilight palette, now rendered as a full-bleed card with the property name and location overlaid in elegant gold script directly on the image. The carousel navigation arrows are the only UI elements visible within the hero frame, communicating that this is an explorable, immersive content surface — not a static banner."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The Karma Group wordmark in gold script anchors the top center — centered, confident, and immediately communicating premium brand positioning. A hamburger menu left and search icon right are the only navigation elements, creating a UI that trusts the content hierarchy to guide the user rather than relying on visible structure."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"\"Exclusive Offers\" surfaces below the hero in a horizontal scroll strip — Save 35% Book Direct at Karma Resorts, Spring Spa Escape at Karma Rottnest, Fish at Karma... — real promotional offers with warm lifestyle photography that converts discovery into booking intent."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The bottom navigation — Home, Messages, Reservations, Call, Chat — maps every guest touchpoint in five icons, prioritizing communication channels alongside booking functionality."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A mobile hospitality design that achieves what the most sophisticated luxury brands demand: total visual clarity, zero clutter, and a product experience that feels as premium as the properties it presents."}]}]}

UI-UXresorthotel

UI-UX

Kolektibles - Dashboard

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A sleek admin dashboard that gives collectibles platform managers full visibility — from total collection value to real-time community activity, all in one dark interface."}]},{"type":"image","attrs":{"src":"https://mir-s3-cdn-cf.behance.net/project_modules/fs/385dc2146771155.62b5f6fca9c5d.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"UI/UX Design — Kolektibles Dashboard"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Web App · Backoffice · Admin Dashboard · Collector Community"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The Kolektibles backoffice dashboard gives platform admins a comprehensive overview of community health and platform activity. Key metrics are front and center: 24,568 collection items and 1,568 collectors, each with a growth delta indicator and a sparkline trend chart. Below, a dual-line area chart tracks the growth trajectory of both Collections and Collectors over time — giving admins an at-a-glance read on platform momentum."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The right column surfaces operational priorities: an active event banner (Helloctofest Auction), a queue of 6 pending events, 3 contact messages, and 12 listed categories. A live activity log tracks user interactions in real time — likes, comments, and engagement on specific collection items — keeping admins connected to the community pulse without leaving the dashboard."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The total value card anchors the bottom with a bold $5,406,896 figure, reinforcing the platform's marketplace weight. The dark navy palette, teal-green chart accents, and sidebar navigation (Category Setting, Home Setting, Events, Contacts) keep the backoffice functional and visually consistent with the front-facing product."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"hardBreak"},{"type":"text","marks":[{"type":"bold"}],"text":"2021-11-15 19:26:22"}]}]}

UI-UXcollectoritem

UI-UX

Djava

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Watch a video about Tahu Pong Semarang — then buy it directly from the same screen. Djava is where Javanese cultural content and commerce finally share the same stage."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/djava.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"App UI Design — Djava"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mobile App · Social Video Sharing + Embedded E-Commerce · Javanese Culture"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A culturally rich, concept-forward mobile app UI for Djava — a platform combining social video sharing with embedded e-commerce, built specifically around Javanese cultural content: culinary, craft, and heritage."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The app logo — a stylized wayang head merged with a play button icon in warm gold — communicates the platform's dual identity instantly: Javanese cultural content, delivered digitally."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Screen 1 — Video Detail with Commerce:"},{"type":"text","text":" A food video plays — \"Seharian Menjajal Enaknya Kuliner Unik Tahu Pong Semarang\" — with 2,457 views, 1,023 likes, and 32 dislikes. Below the video metrics sits the app's defining feature: a prominent gold \"Beli Tahu Pong Ini\" (Buy This Tahu Pong) CTA — an embedded commerce button that lets viewers purchase the product featured in the video without leaving the content experience. The related video list below surfaces more Javanese content: Sate Klatak, Mengenal Keris Pamor Rojo."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Screen 2 — Discovery Feed:"},{"type":"text","text":" Popular videos curated by category — \"Perbedaan Antara Blangkon Jogja dan Blangkon Solo\" (15:25), traditional crafts, keris — alongside a search bar with category filter. The bottom tab bar — Videos, Store, Events, News — confirms a complete cultural platform ecosystem, not just a video feed."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The warm dark UI with gold accents communicates the premium, culturally respectful positioning of a platform that treats Javanese heritage as something worth preserving — and worth buying into."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A platform where watching becomes knowing, and knowing becomes owning."}]}]}

UI-UXMobileApp

Branding

Maleeka Logo

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Graceful, confident, and unapologetically feminine — Maleeka dresses the modern Muslimah not just in fabric, but in identity."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/bPYeDwer_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Brand Identity — Maleeka"},{"type":"text","text":" "}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Logo Design · Muslimah Fashion Brand · Modest Women's Clothing"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A vibrant, personality-driven wordmark logo for Maleeka — a Muslimah women's clothing brand whose very name speaks its positioning: "},{"type":"text","marks":[{"type":"italic"}],"text":"Maleeka"},{"type":"text","text":" (ملیکة), meaning \"queen\" in Arabic — a declaration of dignity, elegance, and feminine power embedded directly into the brand's identity."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The wordmark is rendered in a flowing, hand-lettered script with confident strokes that move with natural energy from left to right — the kind of typographic character that feels personal, warm, and alive. The letterforms carry an expressive rhythm, with playful ascenders and deliberate ink variation that gives the mark a boutique, handcrafted sensibility perfectly suited to a fashion brand built on individual style and modest self-expression."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The crown icon — perched delicately above the letter \"k\" — is the logo's crowning detail in every sense. Small in scale but significant in meaning, it reinforces the royal etymology of the name with a light touch, avoiding ostentation while planting the brand's queenly aspiration firmly in the mark. It is a detail that rewards attention — the kind of logo element that customers notice, remember, and identify with."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The color is a bold, confident magenta-pink — vibrant and unapologetic, yet deeply feminine. In the modest fashion space, where brand identities can sometimes default to muted, safe palettes, Maleeka's vivid pink is a deliberate statement: that modesty and joy, coverage and color, faith and fashion are not in conflict — they belong together."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Presented on a clean white textured paper mockup, the logo demonstrates strong print performance and natural elegance — at home on garment labels, shopping bags, social media, and storefront signage alike."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A brand identity that tells every Muslimah customer: "},{"type":"text","marks":[{"type":"italic"}],"text":"you are a queen — and your wardrobe should know it."}]}]}

Brandinglogomuslimah

Graphic Design

Ale-Ale Product Photo

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Pure citrus energy, captured in a single frame — this Ale-Ale product photo makes you thirsty before you've even read the label."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/WzfGbZEC_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Product Photography — Ale-Ale"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Commercial Product Photo · Orange Drink · F&B · Indonesia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A vibrant commercial product photograph for Ale-Ale — one of Indonesia's most beloved fruity drink brands — executed with the visual language of appetite-first FMCG photography. The composition centers on the iconic Ale-Ale orange cup, flanked by a halved orange and a whole orange fruit, all erupting within a dramatic liquid splash of golden orange juice frozen mid-air."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The splash element is the hero of the shot — dynamic, energetic, and deeply effective at communicating the product's core promise of fresh, real fruit flavor. The white background keeps the composition clean and commercially versatile, ready for use across print, digital, and packaging applications without distraction."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A product photo that does exactly one job — and does it perfectly: make you want to drink it, right now."}]}]}

Graphic DesignPhotographyProduct

Illustration

Gus Baha - Fans Club

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"That unmistakable grin, that green peci, that warmth you feel before he's even spoken — the Gus Baha fans club logo captures the ulama in a single joyful face."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/gus-baha-fansclub.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Logo Design — Gus Bahá Fans Club"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Fan Community Identity · Santri Online Seduluran · Islamic Scholar Tribute"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A warmly affectionate community logo designed for the Gus Bahá fans club — a digital community of santri and Islamic knowledge seekers who gather online in the spirit of "},{"type":"text","marks":[{"type":"italic"}],"text":"seduluran"},{"type":"text","text":" (brotherhood and kinship) around the teachings of KH. Ahmad Bahauddin Nursalim, one of Indonesia's most beloved and widely followed ulama."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The logo centers on a caricature portrait of Gus Bahá himself — a cherubic, cartoon-style face rendered with genuine affection: wide grin, rosy cheeks, eyes closed in the expression of someone mid-laugh or mid-wisdom, wearing the iconic green peci that has become one of his most recognizable visual signatures. The caricature style is not satirical but celebratory — it captures the warmth, humor, and approachability that has made Gus Bahá's lectures viral across YouTube, WhatsApp groups, and Indonesian social media."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The circular badge format frames the portrait within a layered green medallion — the color of Islam, of pesantren tradition, and of the peci atop his head — with \"SANTRI ONLINE\" arcing above and \"SEDULURAN\" arcing below, completing the community's identity statement: we are online santri, and we are family."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The \"GusBahá\" script wordmark at the base is rendered in a warm, hand-lettered style — flowing and organic, like a signature passed between friends — in a yellow-green tone that lifts off the darker green background with gentle warmth."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The sticker card mockup on a dark teal surface gives the logo its physical, collectible quality — a badge worn with pride by anyone who finds joy, peace, and wisdom in the ulama's legendary laughter."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A logo built not from a brand brief, but from genuine love for a teacher."}]}]}

Illustrationfansvector

Illustration

Vaccine Creation

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A flat vector illustration of a research doctor conducting experiments in a lab to find a vaccine against a virus."}]},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"One drop at a time, one experiment closer — this research doctor illustration captures the quiet, meticulous heroism of vaccine creation in its most human moment."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/5057025/screenshots/10997184/media/9762ed7cdcc04a8b7f74eb1e8ee7e15b.jpg?compress=1&resize=1200x900&vertical=top","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Flat Vector Illustration — Vaccine Creation"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Medical Research · Virology · Public Health · Flat Vector"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A focused, intimately composed flat vector illustration of a research doctor in full protective gear — face shield, N95 respirator, glasses, white hazmat suit, and bright yellow rubber gloves — carefully dispensing a single drop from a pipette into a blue-liquid Erlenmeyer flask. The moment captured is small and precise: one drop, held in suspension above the flask, representing the entire concentrated effort of a scientific mind working toward something the world desperately needed."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The character's expression is wide-eyed and intent — mouth slightly open behind the mask, eyes focused on the drop with the absorbed concentration of someone who understands the weight of what they are doing. This is not a generic lab scene; it is a portrait of purpose. The yellow rubber gloves provide a warm chromatic accent against the cool white suit and soft lavender-purple background blob, directing visual attention naturally to the hands — the instruments of the work."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The composition is a tight bust portrait, framing the researcher from mid-torso up within an organic lavender shape that provides focus without distraction. Two small abstract circles float above — molecules? Bubbles? Ideas? — adding a gentle sense of scientific activity beyond the immediate frame."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The illustration is versatile and deployable across public health campaigns, science education content, vaccine awareness materials, and editorial contexts — a single image that communicates the complexity of the research process through the simplicity of one decisive gesture."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A flat vector illustration that makes the laboratory feel as important as the frontline — because it always was."}]}]}

Illustrationflatvector

Branding

Dian Istana Logo Design Improvement

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A brand that already had presence — refined into one that commands it."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/31CRDdij_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Brand Identity Proposal — Dian Istana"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Logo Redesign · Property Company · Brand Improvement"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A logo improvement project for Dian Istana, presented as a comprehensive proposal sheet exploring multiple color directions — gold on black, gold on white, and deep crimson — each variant offering a distinct positioning while maintaining the same refined core mark."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The logomark is a fluid, flame-like \"D\" — elegant and upward-reaching, communicating growth, warmth, and architectural aspiration in a single continuous stroke. The form carries a natural luxury quality, befitting a property brand whose name translates to \"Light of the Palace.\""}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The multi-variant proposal demonstrates strategic thinking beyond aesthetics: giving the client real choices between premium-dark, clean-light, and bold-heritage directions — all grounded in the same cohesive identity foundation."}]}]}

Brandinglogoproperty

UI-UX

Taxfix - Website Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"£300,000,000 goes unclaimed in overpaid taxes every year — Taxfix's website design makes that number impossible to ignore, and the solution impossible to refuse."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/qdrAsJob_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — Taxfix"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Website Design · Tax Rebate Service · UK Market"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, conversion-focused website design for Taxfix — a UK-based tax rebate service — built around a single, startling statistic that functions as the most powerful possible hero headline: \"Each Year Over £300.000.000 Goes Unclaimed in Overpaid Taxes.\" The design's entire job is to make that number land, and then make the path to a refund feel effortless."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero section splits between a professional female consultant figure — confident, arms crossed, business-appropriate — and the bold blue stat typography that dominates the right frame. The combination communicates the dual promise of every good financial service website: human expertise and real money. The consultant's presence says \"there are people here who know what they're doing\"; the £300 million figure says \"and here's why you should care.\""}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The color system — sky blue, fresh green, and clean white — is the established palette of trustworthy financial and health services: approachable, credible, and nothing that raises alarm. The green navigation bar with \"Services\" highlighted in white provides the primary conversion pathway without aggression."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The three-panel benefit strip anchoring the lower hero is the design's sharpest structural decision: Tax Rebate, One Week, No Risk — three green and blue icon panels that compress the entire service value proposition into a single scannable row. For a service where the customer's primary objections are \"is it real?\", \"how long does it take?\", and \"what do I risk?\" — this strip answers all three simultaneously, before the user has scrolled an inch."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A tax service website that earns trust, communicates urgency, and removes every obstacle between the visitor and the claim form."}]}]}

UI-UXWebWebsite

UI-UX

Swabina - Frontend Development

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Mudah & Cepat, Terpercaya, Pilihan Tiket Terlengkap — Swabina delivers online travel ticketing with the calm efficiency of a brand that knows its users just want to get moving."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/azKaxl36_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Frontend Development — Swabina Garira Travel"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Ticketing Web App · Online Travel & Transportation · Surabaya"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, trust-focused frontend for Swabina Garira — a Surabaya-based travel and ticketing service offering bus, train, and transportation tickets online."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The page structure hits the key trust signals any ticketing platform needs: a three-column value prop at the top (Mudah & Cepat / Terpercaya / Pilihan Tiket Terlengkap), a company about section establishing credibility, and a footer band with a prominent customer service number (0804-1500-308), physical address, Google Maps link, and payment method logos — BCA, Mastercard, and a third gateway."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The blue-dominant palette communicates reliability and ease — the color language of travel and logistics services that want to feel both approachable and professional. The customer service agent illustration adds a human touch to what could otherwise be a purely transactional interface."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A solid, functional travel ticketing frontend built to convert browsers into booked passengers."}]}]}

UI-UXWebWebsite

Illustration

Learn Practice Feedback

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/pd/1/lgf-square.png","alt":null,"title":null,"width":1140,"height":1140}}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/pd/1/adin_adin.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"hardBreak"},{"type":"text","text":"Barefoot, shorts on, laptop in hand — this is what maximizing a once-in-a-career opportunity looks like during a pandemic, and it's more honest than any professional headshot."}]},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Illustration Design — Learn · Practice · Feedback"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Personal Illustration · Tokopedia Trainee Program · WFH 2021"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A candid, self-portrait illustration capturing the spirit of the Tokopedia Trainee Program experience — distilled into three words floating above the character's head: Learn, Practice, Feedback. The illustration is personal, specific, and entirely true to the moment it documents."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The character — glasses on, green Tokopedia cap, dark grey t-shirt, light shorts, and completely barefoot — sits mid-air with a laptop balanced in their hands, fully in the flow of work. The barefoot detail is the illustration's most honest touch: 2021, full pandemic, fully WFH, and the office was wherever the WiFi router reached. The router sits in the lower left corner as a quiet supporting character — the infrastructure of an entire year of professional growth, rendered in cartoon form."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A glowing lightbulb character floats to the left, eyes wide with the electricity of a new idea — the visual embodiment of what happens when Learn and Practice converge. Wireless headphones orbit to the right, a nod to the deep focus sessions and virtual calls that defined the trainee experience. An empty office chair in the lower right completes the WFH tableau — technically the workspace, practically the whole world that year."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The three speech bubble labels — LEARN, PRACTICE, FEEDBACK — connected by dotted arrows in a cycle, communicate the deliberate mindset brought into the program: not just showing up, but actively extracting every layer of value from every opportunity, every mentor, every critique."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An illustration that turns a pandemic work-from-home moment into a creative statement of intent — and proves that the best learning environments don't always have shoes."}]}]}

Illustrationvectorlearn

Illustration

Zombie Bassist - Character Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Blue-skinned, hollow-eyed, bass guitar in hand — the Zombie Bassist is the undead musician who never stopped playing, even after everything else stopped."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/rYhfgWJw_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Character Design — Zombie Bassist"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Chibi Character Illustration · Horror Rock · Original Character"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A boldly expressive chibi character illustration of a zombie bass player — executed in a vivid, high-contrast flat-vector style that combines the exaggerated cuteness of chibi proportions with the visual vocabulary of punk horror, producing a character that is simultaneously grotesque and completely irresistible."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The Zombie Bassist stands in a compact, mid-strum pose — knees slightly bent, body leaning forward with the muscle memory of someone who has been playing bass for longer than they've been alive (and continues to do so after). The bass guitar is rendered in a warm pink and gold tone, held with the casual confidence of an undead musician who has long since stopped caring about technique and simply plays because that's what the body knows how to do."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The character's most arresting features: a blue-grey zombie complexion rendered with flat vector precision; hollow, oversized dark eye sockets that dominate the face; a jagged, stitched grin that conveys both menace and the stubborn joy of someone who refuses to let death interrupt their set; and a crown of spiky yellow hair — bright, almost comedic — that clashes perfectly with the skull face below. The pink drip on the torso adds a horror-gore detail that is more cartoon than disturbing, leaning fully into the character's horror-comedy register."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The tattered clothing — a shredded pink jacket, worn brown pants, red shoes that have seen better days — confirms the character's commitment to the look: this zombie dressed for the gig before the apocalypse, and kept the outfit."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Presented on a folded paper mockup — the same format as the Bassist Sketch and Zombrema — completing a trilogy of music-and-horror character work that shares a visual universe and a creative voice."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A character that proves: some musicians are too into it to ever stop."}]}]}

IllustrationMascotZombie

Illustration

Icon Deposit & Withdraw

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"One concept, nine expressions — this deposit and withdraw icon exploration demonstrates how a single fintech action can be designed with depth, versatility, and visual system thinking."}]},{"type":"image","attrs":{"src":"https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/d7e6aa145783977.62a46dab6ad3f.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Icon Design Exploration — Deposit & Withdraw"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"UI Icon Set · Fintech · App Icon Design"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A thorough icon design exploration for deposit and withdraw actions — two of the most fundamental interactions in any fintech or digital wallet application. The project presents a single core concept iterated across nine distinct visual treatments, demonstrating a mature, system-aware approach to icon design that goes far beyond a single deliverable."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The icon's core metaphor is elegant and immediately legible: a coin or token dropping into or emerging from a tray-like container, with a directional arrow indicating the flow of funds. This abstraction is precise enough to convey financial transaction, yet simple enough to read at 24px — the true test of any UI icon."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The nine variants explore the full design system spectrum systematically: light mode on white, light mode on blue, monochrome on white, monochrome on dark, full-color on dark with yellow accent, glassmorphism with frosted white background, sticker-style with shadow peel, and solid app icon formats in both light and dark themes. Each treatment answers a different UI context question — what does this icon look like in dark mode? In a colored CTA button? As an app icon on a home screen?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero variant — a large glassmorphism treatment in blue with a frosted white card — is the most refined, demonstrating current design trend literacy while maintaining functional clarity. The yellow-accent dark variant signals a secondary action state, while the monochrome versions confirm the icon's structural integrity when color is removed entirely."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An icon exploration that doesn't just design one icon — it designs an entire icon system."}]}]}

IllustrationDepositWithdraw

UI-UX

HeySaladin Website

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"I'm Designing Solutions for Human — HeySaladin's 2019 portfolio website is where the designer's mascot first stepped into the frame, waving hello to the world with a yellow \"Let's Go!\" button."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/heysaladin.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — HeySaladin"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Personal Portfolio Website · UI/UX Designer & Frontend Developer · 2019"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The original iteration of Adin's personal portfolio website — HeySaladin — photographed live on a MacBook in a real workspace, hands on the keyboard, the designer visibly present in his own presentation."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero delivers the same professional declaration as its successor: \"I'M DESIGNING SOLUTIONS FOR HUMAN\" in bold, heavy display type — the same mission statement, the same three-discipline subtext (user experience research, user interface design, frontend development), the same direct confidence. What differs is the visual language and the era."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Where the later HeyHeySaladin features the Adinstronaut in a purple cosmos, this version introduces an earlier mascot iteration — a chibi-style character in a black cap and dark outfit, waving with casual energy, floating in the same dark background scattered with geometric shapes. The character is more grounded, more street-level, less cosmic — a designer who has arrived and is ready to work, rather than one exploring the universe."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The yellow \"Let's Go!\" CTA — warm, energetic, and distinctly different from the purple \"Let's Talk\" of the later version — communicates the momentum of a designer in his earlier career: eager, direct, moving."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The dark/light mode toggle on the left edge confirms the technical craft that goes beyond visual design. The HeySaladin gold script wordmark centered at top is consistent across both iterations — the signature that has remained even as the character around it evolved."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Copyright HeySaladin 2019 — the timestamp of a designer who was already building his identity before the industry caught up."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An earlier self-portrait from a designer who has always known exactly what he wanted to say — and kept saying it better with every iteration."}]}]}

UI-UXwebwebsite

UI-UX

Kolektibles - Web App

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A dark, immersive web platform built for serious toy collectors — discover rare pieces, share your collection, and connect with a community that gets the obsession."}]},{"type":"image","attrs":{"src":"https://mir-s3-cdn-cf.behance.net/project_modules/fs/6afb60146771155.62b5f6fcaa37a.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"UI/UX Design — Kolektibles"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Web App · Collector Community · Toys & Collectibles"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Kolektibles is a community platform for toy and collectibles enthusiasts, spanning categories from Bearbrick and Gundam to Action Figures, Antiques, Paintings, and Trading Cards. The hero section leads with \"For Collectors to Inspire\" — a positioning that frames the platform as much about community storytelling as it is about cataloging items."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The deep teal-green dark interface sets a premium, gallery-like atmosphere that lets the collectibles themselves take center stage. A search bar with Popular Keywords filter and Top Collectors spotlight sit directly below the hero, encouraging discovery and social connection from the first scroll. The Collection Categories grid — 25,765 items across 10 categories — gives immediate scale to the platform's depth."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Secondary screens reveal a community sharing angle (sharing stories with other collectors) and a monetization layer, with wallet integration and item pricing (e.g. $79.10 on a Gundam figure), hinting at a marketplace beneath the community surface."}]},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"2021-11-15 19:26:22"}]}]}

UI-UXcollectoritem

Illustration

Food Icons

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"From satay to seafood — this Indonesian food icon set brings the richness of the archipelago's culinary identity into a clean, scalable UI system built for Tokopedia's marketplace."}]},{"type":"image","attrs":{"src":"https://mir-s3-cdn-cf.behance.net/project_modules/fs/4e0ea8147011375.62badd30434ef.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Icon Design — Indonesian Food Icons"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"UI Icon Set · Food Category Icons · Tokopedia · E-Commerce"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A thoughtfully crafted food icon set designed for Tokopedia's Indonesian food marketplace — built to represent the diverse culinary categories of Indonesian cuisine in a consistent, scalable, and visually cohesive system."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The icon set is organized around a three-color variant system: active green, accent orange, and neutral grey — a deliberate design decision that gives the system maximum UI flexibility. The green variant signals selection or primary state; the orange variant communicates action, promotion, or secondary highlight; the grey variant serves inactive or disabled states. All three maintain identical form and weight, ensuring seamless state transitions in any UI context."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The icons visible in this panel represent three essential Indonesian food categories: a crossed fork-and-spoon for the general dining category — the universal restaurant marker given a local, approachable stroke weight; a prawn/shrimp icon for seafood — rendered with enough anatomical accuracy to be instantly recognizable yet simple enough to read at 24px; a grilled meat or fish steak for the protein category, with characteristic grill lines that communicate texture and cooking method in four strokes; and a satay skewer cluster — two bamboo skewers with three rounds each — the most distinctly Indonesian icon in the set, immediately grounding the icon system in local culinary culture."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Each icon shares a consistent stroke weight, rounded terminals, and a 2:3 aspect ratio that scales from mobile nav bars to desktop category headers without loss of clarity. The outlined style with selective fill creates visual warmth while maintaining the technical precision a product icon system demands."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An icon set that speaks the visual language of Indonesian food culture — precise, familiar, and built to perform at every size."}]}]}

IllustrationvectorProject

UI-UX

MamaMPASI

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"MamaMPASI is the app that helps Indonesian mothers navigate the most critical 1,000 days of their child's nutrition with confidence and clarity."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/mamampasi.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"App UI Design — MamaMPASI"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mobile App · Baby Nutrition & MPASI Guide · Indonesia · Anti-Stunting"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, nurturing app UI for MamaMPASI — a baby nutrition platform focused on MPASI (Makanan Pendamping ASI, complementary feeding) and stunting prevention in Indonesia, where childhood stunting remains one of the country's most critical public health priorities."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero banner delivers the app's mission without softening it: \"Nutrisi Penting agar Bebas Stunting — Penuhi asupan vital terbaik bagi bayi pada 1000 hari pertama kehidupan\" (Important Nutrition to be Free from Stunting — Fulfill the best vital intake for babies in the first 1000 days of life). A cheerful baby in a green bib eating from a spoon anchors the banner with warmth — this is a platform about childhood flourishing, not just clinical nutrition compliance."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The nutrient category grid below organizes MPASI guidance by key nutritional pillars: Zinc, Zat Besi (Iron), Kalsium (Calcium), Omega 3, Vitamin, and Lainnya (More) — each with a clean illustrated icon in the app's fresh green palette. The categories map precisely to the nutrients most commonly deficient in Indonesian infants, making the app a practical daily reference for mothers planning meals."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The bottom navigation confirms a complete platform — recipe browsing, meal tracking, gallery, and profile — everything a young Indonesian mother needs to plan and track her baby's nutritional intake through the MPASI journey."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The fresh green palette communicates health, growth, and natural ingredients — photographed in hand against a warm wooden table with artisan bread, the mockup placing the app exactly where Indonesian mothers use it: in the kitchen, while cooking."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An app built around one of the most important design briefs possible — helping Indonesia's next generation grow up strong."}]}]}

UI-UXappmobile

UI-UX

Sapa Sekolah

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"“Learning Is No Longer Confined by Space.”"},{"type":"text","text":" — Sapa Sekolah reimagines home learning as a structured, human-centered digital experience where students stay connected, guided, and in control."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/details/241-sapa-sekolah/sapa-sekolah.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Mobile App Design — Sapa Sekolah"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"EdTech · Learn from Home · Student Experience · UI/UX Design"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A mobile learning application designed to support structured, accessible, and engaging education from home — Sapa Sekolah positions itself as a bridge between formal schooling and the realities of remote learning."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The design emphasizes clarity and approachability. Clean layouts, friendly visual language, and intuitive navigation reduce cognitive load, allowing students to focus on what matters most: learning. The interface likely prioritizes core actions — accessing lessons, tracking progress, and staying connected with teachers — without overwhelming the user."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"At its core, Sapa Sekolah is not just a digital classroom, but a learning companion. It transforms the home into an extension of the school environment, maintaining rhythm, accountability, and interaction even at a distance."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The “learn from home” positioning reflects a broader shift in education — where flexibility is no longer optional, and digital platforms must balance structure with empathy. This project embraces that challenge by crafting an experience that feels guided, supportive, and human, rather than mechanical."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A thoughtful exploration of how education can remain consistent and meaningful, even when the classroom is no longer a physical space."}]}]}

UI-UXExperimentalEXPERIMENTAL

UI-UX

Setenda

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"\"Deeply moved at the summit of Mount Lawu\", 12 hari lagi, 5/10 slots filled — Setenda is the open trip platform that turns the dream of hiking Indonesia's mountains into a group adventure you can join today."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/details/188-sejalan/setenda.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"App UI Design — Setenda"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mobile App · Open Trip Outdoor Hiking Platform · Indonesia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A dark, atmospheric app UI for Setenda — an open trip platform connecting hikers with organized mountain climbing trips across Indonesia. The design is set against a real mountain backdrop, a hiker with full pack visible in the right frame — grounding the app in the physical experience it enables."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The home screen is organized around three discovery filters at the top: Kurang dari 3 hari (Less than 3 days), Kurang dari 10 orang (Less than 10 people), and a third filter — quick-filter chips that let hikers find trips matching their schedule and group preference before scrolling a single result."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The search bar — \"Cari tentang pendakian\" (Search about hiking) — sits above the filters, confirming the platform serves both casual browsers and users with a specific destination in mind."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The trip feed is tabbed: Terbaru (Latest), Segera (Soon), Terdekat (Nearest) — three sorting modes that serve different user intents. The featured trip card shows \"Mengharu biru di puncak Gunung Lawu\" (Deeply moving at the summit of Mount Lawu) — participant avatars (5/10 slots filled), departure countdown (12 hari lagi / 12 days left, 10 Juli pagi), and meeting point (Candi Ceto, Karanganyar). The availability indicator and countdown create natural urgency without manufactured pressure."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The dark navy palette with orange accent CTAs communicates the outdoors at night — the pre-dawn departure, the summit before sunrise, the atmosphere every serious hiker knows and loves."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An app that makes finding your next mountain feel as easy as finding your next movie."}]}]}

UI-UXappmobile

Illustration

Desert Project - Mascot Design

{"type":"doc","content":[{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/details/247-tammwel-design/tammwel-design.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Sun-golden, bow-tied, and holding a bag of riyals — this Dhab mascot turns the Arabian desert's most recognizable lizard into a fintech character with unmistakable local charm."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/5057025/screenshots/14280115/media/746f2e091fb8f44d15aa88dfbc3eaec6.jpg?compress=1&resize=1200x900&vertical=top","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Mascot Design — Desert Project"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Character Design · Uromastyx aegyptia (Dhab) · Loan Marketplace Fintech · Arabian Market"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A richly detailed mascot illustration inspired by the Uromastyx aegyptia — the Dhab, a ground-dwelling lizard native to the arid deserts of the Arabian Peninsula — reimagined here as the charming brand ambassador for a desert-rooted loan marketplace fintech. The result is a character that is unmistakably local, instantly trustworthy, and commercially purposeful."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The Dhab mascot stands upright in a confident, welcoming pose — left hand open in a presenting gesture, right hand raised holding a light blue money bag inscribed with the Arabic \"ريال\" (Riyal) — a direct, culturally grounded visual cue to the platform's financial services context. The character wears a sky blue top hat bearing a golden square emblem and a matching blue bow tie, elevating the desert reptile from wildlife to distinguished brand representative in a single costume choice."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The choice of the Dhab as mascot is deeply intentional. Uromastyx aegyptia is a beloved, familiar creature across Gulf and Arabian cultures — known to locals, rooted in the land, and carrying none of the negative connotations of other reptiles. For a fintech operating in this market, it is a mascot that signals regional pride and cultural intelligence, building immediate trust with a local audience."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The illustration is executed in a warm golden-amber palette that mirrors the Dhab's natural coloration and the sun-baked tones of the Arabian desert — making the character feel native rather than imported. The scaly armored tail, the cream belly, and the wide expressive eyes are rendered with confident cartoon accuracy, while the blue accessory system provides the brand color contrast needed for a versatile, scalable identity."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A mascot that turns local wildlife into global brand equity — and makes every loan feel like it's being offered by a friend of the desert."}]}]}

Illustrationvectormascot

Branding

Last Memory Logo Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Because every life deserves to be remembered with dignity — Last Memory is the digital space where love, loss, and legacy are preserved forever."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/qh4hvY2u_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Brand Identity — Last Memory"},{"type":"text","text":" "},{"type":"hardBreak"},{"type":"text","marks":[{"type":"italic"}],"text":"Logo Design · Online Obituary Platform · Memorial & Remembrance Services"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A deeply considered brand identity for Last Memory — an online obituary and memorial platform dedicated to preserving the stories, legacies, and lives of those who have passed. In a category where trust, sensitivity, and timeless dignity are non-negotiable, every element of this identity has been crafted with quiet intentionality."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The logomark is a circular funeral wreath — rendered in fine, intricate detail from dark botanical elements — forming a complete, unbroken ring that speaks to the cycle of life, the continuity of memory, and the act of honoring those we have lost. The wreath is one of humanity's oldest symbols of remembrance and tribute, carrying cultural resonance across traditions, faiths, and generations. Its circular form is both a crown of honor and a frame — a space that holds memory complete and intact."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The wordmark \"Last Memory\" is set in a refined, classical serif typeface with generous letter-spacing — unhurried, composed, and respectful. The choice of serif over sans-serif is deliberate: it carries the weight of permanence, of printed words in a book of remembrance rather than a digital notification. The two-word stacking \"Last / Memory\" creates a natural pause — a breath — that mirrors the solemnity of the service itself."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The logo is presented on an elegant oval hanging signage mounted beneath ornate wrought-iron scrollwork — a presentation choice of exceptional contextual intelligence. The Victorian ironwork bracket frames the brand in a tradition of enduring craftsmanship and dignified permanence, while the white oval sign provides clean contrast for the mark to breathe."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The monochromatic palette — near-black botanical wreath, dark green oval border, classic black wordmark on white — removes all color distraction, leaving only form, memory, and meaning."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A brand identity that carries grief gently, honors life completely, and reminds us that remembrance is one of the most human acts we share."}]}]}

Brandinglogoobituary

UI-UX

Oishi Hut - Kiosk Display Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Crispy Chicken, Geprek Chicken, French Fries, Iced Tea — $56.84 total, scan to pay with GoPay — Oishi Hut's kiosk display design brings the full restaurant ordering experience to a self-service screen without losing a single ounce of appetite appeal."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2794935/file/original-11be58166680d21f304c481d4df054b1.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"UI Design Exploration — Oishi Hut Kiosk Display"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Self-Service Kiosk · Restaurant Order Terminal · GoPay / OVO / Dana / PayPal"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A three-screen kiosk display UI exploration for Oishi Hut — extending the restaurant's mobile app design into the physical self-service terminal format, covering the complete in-store ordering journey from arrival to payment."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Screen 1 — Welcome / Dine Mode Selection:"},{"type":"text","text":" The kiosk splash screen greets arriving customers with the Oishi Hut branding — the warm yellow sun logo — and a clear two-mode selection: Take Away (illustrated with a takeout bag) and Eat In (illustrated with a tray and drink, highlighted in red as the default). A \"Connect with app\" option at the bottom offers a hybrid physical-digital experience for returning customers. Clean, immediate, zero friction."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Screen 2 — Menu & Order:"},{"type":"text","text":" The core ordering screen splits into a menu catalog (left) and a live order summary (right). The catalog shows: Crispy Chicken ($1.24), Geprek Chicken ($1.56), French Fries ($0.56), Pure Rice ($0.56), Extra Sambal ($0.26), Iced Tea ($1.06) — each with product photography, quantity controls (add/remove), and a Special Packages section below. The live order panel tracks 8 items — Geprek Chicken ×1, Iced Tea ×2, Crispy Combo ×1 — with a running total of $56.84 and a prominent yellow \"Order\" CTA. The bilingual toggle (EN) confirms international market positioning."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Screen 3 — Payment:"},{"type":"text","text":" Total $56.84, four payment methods — GoPay, Dana, OVO, PayPal — with a large branded QR code center screen. \"Waiting to be scanned for payment with GoPay...\" confirms real-time payment state. The order summary below (Geprek Chicken, Iced Tea, Crispy Combo, Geprek Combo) with a \"Back to menu\" option gives the customer full visibility and control before committing."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A kiosk UI that respects the customer's time — fast to navigate, clear to read, and honest about every item in the order before the payment screen appears."}]},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Have a great project idea?"},{"type":"text","text":" Let us know ✅"}]},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Services we provide:"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🖼️ UI Design | 😄 UX Design | 🎉 Illustration | 🛍 Brand Identity | 📝 Graphic Design | 🌐 Web Development | 📱 Mobile App Development"}]}]}

UI-UXKioskRestaurant

UI-UX

Sang Kiyai

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"KH. Bahauddin Nursalim, KH. Maimoen Zubair, Yusuf Mansur, Gus Mitah — Sang Kiyai is the platform that brings Indonesia's most beloved Islamic scholars into a single, beautifully organized app."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/sang-kiyai.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"App UI Design — Sang Kiyai"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mobile App · Islamic Religious Figure Platform · Indonesia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, respectful five-screen app UI for Sang Kiyai — a platform dedicated to Indonesia's kiyai (Islamic religious scholars), presenting their profiles, scholarly lineage, lectures, and content in one organized digital home."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Activity Feed:"},{"type":"text","text":" A social content stream featuring lecture posters and content from prominent figures — Ustadz Yusuf Mansur's Tabligh Akbar announcement, Muhammad Sholihudin's post \"Damai Negriku, Maju Bangsaku, Membongkar Bayas Imaginary Umat\" — the platform functioning as a content hub for the Islamic scholarly community."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Kiyai Directory:"},{"type":"text","text":" A photo grid of Indonesia's most recognized scholars — KH. Bahauddin Nursalim / Gus Baha (559,352 likes), Yusuf Mansur (230,852), KH. Muhammad Zainul Majdi (120,352), Gus Mitah M. Hababurrahman (103,852) — ranked by follower appreciation, giving the platform a discovery layer for users exploring beyond their familiar scholars."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Scholar Profile — Gus Baha:"},{"type":"text","text":" KH. Bahauddin Nursalim Bin Kiyai Nursalim (Gus Baha'), Rembang, 36 Tahun — a full profile with photo, biographical description, and action CTAs: Lihat Kajian Ilmu Beliau (View His Lectures), Nasab Ilmu (Scholarly Lineage), Kitab yang dibutuhkan (Recommended Books), Suka Banget Kiyai Ini / Tidak Suka Kiyai Ini / Kirim Kritik dan Saran — a feedback system that treats scholarly appreciation and critique with equal dignity."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Nasab Ilmu (Scholarly Lineage):"},{"type":"text","text":" A vertical flowchart tracing Gus Baha's chain of Islamic knowledge transmission — Mbah Manuf → Mbah Manuf → KH. Maimoen Zubair → KH. Bahauddin Nursalim — the sanad (chain of transmission) that connects contemporary scholars back through generations of Islamic learning. This feature is unique to Islamic scholarly culture and demonstrates deep understanding of the tradition the app serves."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The fresh green palette — the color of Islam — communicates reverence and accessibility simultaneously. A platform that honors its subjects while making them discoverable to a new generation of Indonesian Muslims."}]}]}

UI-UXreligionfigure

UI-UX

Multinas - Website Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Growing with Commitment — Multinas Indonesia's website carries the weight of an engineering company that means exactly what it says."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/small/sVdiiT71_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — PT. Multinas Indonesia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Corporate Website · Engineering Company · Surabaya · \"Global Technologies Go Local\""}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A bold, industrial corporate website for PT. Multinas Indonesia — an engineering company operating under the concept \"Global Technologies Go Local,\" bringing international-grade technical solutions to the Indonesian market."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero is dark and authoritative: a deep navy industrial backdrop with an engineer in full PPE — hard hat, safety glasses, blue coverall, radio in hand — communicating a company that works in real environments with real stakes. The headline \"Growing with Commitment\" paired with the company's brief positioning statement sets the tone: this is a company with a track record, not a startup pitch."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The deep navy and red accent color system communicates industrial precision and institutional trust — a palette that reads as credible to the B2B clients, contractors, and government partners Multinas serves. The English-language navigation with a language toggle confirms the company's international positioning despite its Surabaya roots."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A corporate engineering website that looks as solid as the infrastructure it builds."}]}]}

UI-UXWebWebsite

UI-UX

David Jack - Website Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Dark, bold, and built to impress — David Jack's construction company website makes \"Powerful Design\" feel like a promise the building in the hero image has already kept."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/small/RragmKzj_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — David Jack"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Website Design · Construction Company · Corporate Web"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A striking, high-contrast website design for David Jack — a construction company whose digital presence communicates the same qualities as its physical work: strength, precision, and visual authority. Presented in an iMac desktop mockup that grounds the design in its natural viewing context."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero section is built on a dramatic black-dominant palette — a full-width background mosaic of architectural project photography, desaturated to near-black, creating a rich textural depth that positions the company as an organization with a substantial portfolio behind every claim it makes. The visual effect is that of a construction legacy made tangible: every building they've touched, present on the page at once."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Center stage: a sharp, modern high-rise tower rendered in grey-silver architectural photography, its angular profile piercing upward with the kind of vertical ambition that only confident structural engineering produces. Beside it, the hero headline \"POWERFUL DESIGN\" is set in a bold, condensed white display typeface — maximum weight, maximum confidence. A bilingual subtext in Chinese characters beneath the English headline confirms the brand's international market orientation, communicating fluency across two of the world's most significant construction economies."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A gold CTA button — the site's single accent color — anchors the action call at the base of the hero text block, providing the warmth and premium signal that black-and-white corporate sites need to feel inviting rather than merely authoritative. The gold carries through into a horizontal accent bar at the footer section, tying the brand color system with quiet consistency."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A web design that looks as structural as the buildings it represents — and performs just as reliably."}]}]}

UI-UXWebWebsite

Illustration

Balinese Boy Technology

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A flat illustration that bridges two worlds — a young Balinese woman in traditional dress, laptop open, proving that cultural roots and digital futures are not opposites."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/5057025/screenshots/10862676/media/52854d80f2d4fa4e479690f58a2130b4.jpg?compress=1&resize=800x600&vertical=top","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Illustration — Balinese Youth & Technology"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Flat Illustration · Editorial · Culture · Technology · Bali"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A flat-style vector illustration depicting a young Balinese woman in traditional attire working on a laptop — a single image that communicates a layered message about identity, progress, and coexistence. The character design intentionally blends cultural markers (traditional Balinese dress, natural surroundings) with modern tools (laptop, digital interface), creating a visual narrative about a generation that does not have to choose between heritage and innovation."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The flat illustration style keeps the tone warm and accessible — appropriate for educational materials, social campaigns, or editorial use that celebrates the spirit of young Indonesians who carry their culture forward while embracing the possibilities of the digital age. Nature elements in the composition reinforce Bali's deep relationship with the environment, grounding the technology angle in a context of preservation rather than disruption."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A quiet but powerful statement: tradition and technology, growing side by side."}]}]}

IllustrationBaliBoy

Illustration

Water Tiger Illustration

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/pd/watig-illustration/watig-sketch.png","alt":null,"title":null,"width":1140,"height":1140}}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/pd/watig-illustration/watig-tiger.png","alt":null,"title":null,"width":1140,"height":1140}}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/pd/watig-illustration/watig-color.png","alt":null,"title":null,"width":1140,"height":1140}}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/pd/watig-illustration/tiger-fullcolor.png","alt":null,"title":null,"width":1140,"height":1140}}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/pd/watig-illustration/tiger-water-vector.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Fierce yet fluid — this Water Tiger illustration captures the rare power of a zodiac that commands both land and sea, rendered in a style as vibrant as the year it celebrates."}]},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Vector Illustration — Water Tiger"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Chinese New Year Illustration · Shio Tiger · Year of the Water Tiger"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A beautifully composed vector illustration celebrating the Year of the Water Tiger — the rare zodiac combination that unites the Tiger's fierce, courageous nature with the fluid adaptability of the Water element. The result is an illustration of extraordinary visual balance: raw power softened by flow, strength made graceful."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The tiger is rendered in a rich amber-orange palette with deep brown stripe detailing — voluminous, rounded body forms that draw from both classical Chinese zodiac iconography and contemporary flat illustration technique. The fur texture is achieved through fine directional linework layered over bold color fills, giving the figure tactile warmth without photographic complexity. The tiger's expression — confident, composed, one paw raised mid-stride — communicates the Water Tiger's defining quality: strength that doesn't need to shout."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Surrounding the figure, stylized water scroll elements in cooling cerulean blue float across the composition — intricate wave spirals rendered in a traditional Chinese seigaiha (fish-scale) pattern that visually anchors the \"Water\" in the zodiac combination. These elements frame the tiger without constraining it, creating a sense of the animal moving through its element rather than being contained by it."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The circular seigaiha background field grounds the composition with a soft, patterned disc — a classic East Asian visual device that gives the illustration a medallion-like, celebratory quality perfect for New Year greetings, red packets, editorial use, or cultural merchandise."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An illustration that honors both the zodiac's energy and the craft of East Asian visual tradition — powerful, balanced, and entirely at peace with itself."}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

IllustrationWaterTiger

Development

Pinjam Web Development

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Fast money when you need it most — "},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://Pinjam.co.id","target":"_blank","rel":"noopener noreferrer nofollow","class":null,"title":null}}],"text":"Pinjam.co.id"},{"type":"text","text":" is a regulated Indonesian fintech platform built with React.js to make personal and business lending as simple as a tap."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/pinjam.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Development — "},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://Pinjam.co.id","target":"_blank","rel":"noopener noreferrer nofollow","class":null,"title":null}},{"type":"bold"}],"text":"Pinjam.co.id"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Frontend Development · Fintech Lending Platform · React.js & JavaScript"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A polished, responsive web development project for "},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://Pinjam.co.id","target":"_blank","rel":"noopener noreferrer nofollow","class":null,"title":null}}],"text":"Pinjam.co.id"},{"type":"text","text":" — an OJK-regulated Indonesian fintech platform offering online lending and gadai (collateral) services in partnership with Kantor Pos across 18 locations in Jakarta. Built with React.js and JavaScript, the platform demonstrates the power of component-based frontend architecture to deliver a fast, trust-inspiring financial product experience."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The desktop and mobile mockup side-by-side confirms the project's primary achievement: a fully responsive layout that performs seamlessly across screen sizes — from wide desktop browsers to compact mobile viewports — without sacrificing visual fidelity or UX clarity. The hero section leads with confident financial copywriting — \"Butuh dana cepat untuk keperluan pribadi atau usaha?\" — paired with aspirational lifestyle photography and a clear red CTA button, creating an immediate conversion-focused landing experience."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Below the hero, two service cards — \"Gadai Online\" and \"Pinjaman\" — organize the platform's core offerings with clean iconography and short action-oriented descriptions, guiding users toward their relevant product path in seconds. The OJK and BK regulatory badges in the header are strategically positioned trust signals, communicating compliance and legitimacy to a financial audience where trust is the primary conversion factor."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The clean white UI, navy hero section, and coral-red accent palette work together to project a brand that is simultaneously professional, approachable, and urgently helpful — exactly the tone a lending platform needs to strike."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A production-grade fintech frontend built with React.js — responsive, regulated, and ready to convert."}]}]}

DevelopmentFintechWebApp

Illustration

Balinese Boy Warrior

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Small but unstoppable — the Balinese Boy Warrior charges into battle with a golden shield, a crystal sword, and the kind of fearless energy that only a child warrior can carry."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/5057025/screenshots/10880374/media/f50c563fd3c4c84235d9f745aceb8529.jpg?compress=1&resize=800x600&vertical=top","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Character Design — Balinese Boy Warrior"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mascot Illustration · Chibi Character · Cultural Hero"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A spirited chibi character illustration depicting a young Balinese warrior boy — fully armored, fully committed, and absolutely ready for whatever comes next. The character fuses Balinese ceremonial warrior aesthetics with the rounded, exaggerated proportions of chibi character design, producing a figure that is simultaneously heroic and utterly endearing."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The character stands in a dynamic semi-battle stance — mouth open mid-battle cry, sword lowered at his side, golden shield raised forward — the posture of a fighter who has already decided the outcome in his favor. Every armor element speaks to the Balinese warrior tradition: a golden headband adorned with a feather, pale blue armor with gold button studs across the pauldrons and greaves, a flowing red cape that adds movement and drama to the otherwise compact chibi silhouette."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The color palette is deliberately vibrant and celebratory — sky blue armor, gold accessories, crimson cape, and a crystal-blue sword that catches imaginary light — communicating the richness of Balinese ceremonial costume translated into a game-ready, sticker-ready, brand-ready character format."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The expression — wide eyes, open mouth, rosy cheeks — perfectly balances the warrior seriousness of the pose with the irresistible charm of a child playing the hero role with complete conviction. This is not a character who doubts himself for a single frame."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A character design that carries cultural pride, visual energy, and pure charm in equal measure — the kind of mascot that works equally well on a game screen, a children's book cover, or a regional tourism campaign."}]}]}

Illustrationvectorboy

Illustration

Alien Octopus - Character Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Six eyes, ten tentacles, zero personal space — the Alien Octopus is the character design that makes you wonder what planet it came from and immediately want to visit."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/hn4HxM8R_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Character Design — Alien Octopus"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Original Character · Sci-Fi · Horror Comedy · Illustration"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A delightfully unsettling character illustration introducing the Alien Octopus — an extraterrestrial cephalopod rendered in a bold, graphic flat-illustration style that lands squarely at the intersection of cute and deeply weird, exactly where the best character designs live."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The character is built on a rounded, bulbous blue body — the soft, inflated form of a cartoon creature that looks harmless until you notice the details. Six eyes of varying sizes are distributed across the upper face in an irregular, asymmetric arrangement that is the illustration's most immediately arresting feature: not two, not even four — six, placed with the casual disregard of something that evolved somewhere the rules of bilateral symmetry simply did not apply. Each eye has a classic cartoon white sclera and dark iris, giving the creature an expression that oscillates between bewilderment and knowing too much."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The mouth is wide, prominent, and full of irregular teeth — open, expressive, and impossible to read as either threatening or friendly, which is precisely the point. A tongue visible between the teeth adds a final touch of comic grotesquerie. Below the face, a mass of curling, intertwining blue tentacles spreads outward and downward — each one rendered with fluid movement that suggests the character is perpetually in gentle, thoughtless motion."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Small accent details — toy-like objects tucked into some of the tentacles, a star and small candy-like shapes orbiting the body — give the character the chaotic energy of a creature that picks up objects simply because it has enough limbs to carry them all."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A character that is impossible to categorize — and entirely impossible to forget."}]}]}

Illustrationmonsteroctopus

UI-UX

Gloria Cell - Frontend Development

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Semua Pembayaran dalam Tiga Langkah mudah — Gloria Cell puts pulsa top-up and transaction history exactly where you need them, nothing more."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/R4icUt4o_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Frontend Development — Gloria Cell"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mobile App UI · Pulsa Top-Up Service · Indonesia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, focused mobile frontend for Gloria Cell — a pulsa (mobile credit) buy and sell service. The UI is held in hand in a real-world context, confirming this is a built, deployed product — not a mockup."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The home screen is ruthlessly simple: two large circular red action buttons — \"Isi Pulsa\" (Top Up) and \"Cek Transaksi\" (Check Transaction) — centered on a white background with a circuit-pattern texture. Two actions, zero friction. The Gloria Cell logo sits above in bold orange-red, and the tagline below — \"Semua Pembayaran dalam Tiga Langkah mudah\" — confirms the product's core UX promise."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The dark bottom panel with the tagline creates a receipt-style tear effect — a visual metaphor that communicates the transactional nature of the service with personality rather than convention."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A utility app that gets out of the user's way and delivers exactly what they came for."}]}]}

UI-UXWebWebApp

UI-UX

IDN Times - Web Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"What's Hot, Trending, News, Hype, Life, Girls, Community — IDN Times' web design brings Indonesia's millennial-first media platform to life with a clean editorial layout that keeps the content moving and the audience coming back."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/small/h3slJWTU_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — IDN Times"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Online Media Website · News & Lifestyle · Indonesia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, editorial web design for IDN Times — one of Indonesia's largest millennial-focused digital media platforms, covering news, pop culture, lifestyle, entertainment, and community content."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The homepage opens with a \"What's Hot\" editorial banner — a scrolling ticker that surfaces the most urgent headlines before the user has even registered the navigation. It's an effective media UX device: acknowledge that readers are always mid-news-cycle, and meet them there."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero grid is a classic editorial mosaic: a large primary story card (a musician on stage under stage lights) anchors the left two-thirds, with four secondary story cards filling the right column — each with a thumbnail, headline, and timestamp. The image-first, text-second layout communicates IDN Times' audience-first philosophy: show the story visually before asking for a click."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The navigation — News, Hype, Life, Girls, Community — maps the publication's editorial verticals, each representing a distinct reader segment and content tone. The red IDN Times wordmark with its characteristic stylized \"I\" letterform is instantly recognizable across the Indonesian digital media landscape."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A \"Trending\" section begins below the hero, surfacing the content that's driving the most engagement in real time — the algorithmic layer of a modern news platform built into the page architecture rather than bolted on."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A news website that understands its audience reads quickly, shares freely, and always wants to know what's happening right now."}]}]}

UI-UXWebWebsite

UI-UX

Proteksi

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Rp. 367.050.653 collected, 367.050 members — Proteksi turns collective community contributions into a financial safety net that grows stronger with every new member who joins."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/details/235-proteksi/proteksi.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"App UI Design — Proteksi"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mobile App · Crowdfunding / Community Protection Fund · Indonesia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, trust-forward app UI for Proteksi — a community crowdfunding and mutual protection platform where members pool funds to provide financial safety nets for one another."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The home screen communicates the platform's two most important trust signals immediately and at scale: Dana PROTEKSI Terkumpul (Total Funds Collected) — Rp. 367.050.653 — displayed in large, bold numerals that communicate both the platform's legitimacy and the weight of collective contribution. Below it, 367.050 Anggota telah bergabung (Members who have joined) — a community size figure that reinforces the \"strength in numbers\" proposition at the heart of any mutual protection platform."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Budi Adhi Setiawan, 27 th, Pegawai Swasta (Private Employee) — the platform's target user persona, confirmed as \"Anggota Resmi PROTEKSI\" with a badge. The avatar illustration style is warm and accessible, communicating that this platform is designed for everyday Indonesians, not financial experts."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The \"Tambah Dana\" (Add Funds) CTA sits cleanly below the collected amount — actionable and unambiguous. The community illustration below — a diverse group of Indonesians in everyday attire including hijab — visualizes the mutual protection community itself: different people, same shared purpose."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"\"Kabar PROTEKSI Terbaru\" (Latest PROTEKSI News) begins below, confirming a content and community layer beyond the financial mechanics."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The sky blue palette communicates calm, trust, and openness — the emotional register a mutual protection platform needs to earn the confidence of members who are entrusting it with their financial safety."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An app that makes community-based financial protection feel as natural and accessible as joining a neighborhood group."}]}]}

UI-UXfundingapp

Illustration

Bubumbu - Interactive Education Media

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Chili, garlic, ginger, and galangal — Bubumbu brings Indonesian spices to life with faces, feelings, and a little girl who makes learning to cook the most fun thing in the room."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/cMLsQat3_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Interactive Media Design — Bubumbu"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Interactive Education Media · Indonesian Culinary Learning · Character Design · App Icon"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A delightfully charming interactive education media identity for Bubumbu — a digital learning platform designed to introduce Indonesian culinary culture, spices, and cooking knowledge to young learners through playful, character-driven interaction."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The icon composition is a celebration of the Indonesian dapur (kitchen) reimagined as an animated world: a warm brown mortar and pestle at the center holds a gathering of personified spices — garlic with a shy smile, tiny peppercorns huddled together, and other bumbu characters rendered in the round, expressive chibi style of children's educational media. Flying and floating above them: a red chili with spirited eyes, a shallot (bawang merah) in playful pink, a kaffir lime in cheerful green, and galangal rendered as a friendly root creature — each one a distinct character with its own personality, embodying the ingredient it represents."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The central figure is a young Javanese girl — dark hair in a braid, yellow frangipani flower tucked behind her ear, warm brown skin — smiling with the open delight of someone who loves everything happening in her kitchen. Her presence grounds the spice characters in human warmth and cultural identity: this is Indonesian cooking, through Indonesian eyes, for Indonesian children."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The \"BUBUMBU\" wordmark is set in a chunky, rounded display typeface on a warm wooden brown panel — earthy, tactile, and reminiscent of a carved wooden kitchen sign. The sky-blue background gives the composition airiness and warmth — a kitchen that feels like play rather than work."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An educational media identity that makes Indonesian culinary heritage feel like an adventure — one spice character at a time."}]}]}

IllustrationSpiceGirl

Graphic Design

Corporate Business Brochure

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A printed tri-fold brochure layout exploration in a formal business style."}]},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Structured, professional, and built to inform — this corporate brochure layout demonstrates how good print design turns business services into a conversation worth having."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/small/s2Sev9hP_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Print Design — Corporate Business Brochure"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Tri-Fold Brochure · General Business Services · Print Layout Exploration"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A printed tri-fold brochure layout exploration in a formal business style — demonstrating confident command of corporate print design across a three-panel folded format. The piece is presented in a dynamic angled mockup that reveals both the cover panel and the full interior spread simultaneously, showcasing the complete design system in a single view."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The color palette is a sophisticated pairing of amber-gold and deep charcoal — warm and authoritative in equal measure, communicating a business brand that is approachable but serious. The amber operates as the accent system: section headers, CTA bands, icon backgrounds, and Venn diagram elements all carry the same warm tone, creating visual cohesion across a content-dense layout without visual chaos."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The cover panel leads with a professional team photography — suited business figures presented with editorial confidence — anchored by a bold headline and supported by a dark lower panel carrying contact details and the \"#1 International Business Services\" brand claim. The interior columns are organized with clear typographic hierarchy: section titles in amber, body copy in light grey, supporting icons for service categories, and a Preparation vs. Opportunity Venn diagram that adds a consultative, analytical dimension to the layout."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"White panels and dark panels alternate across the three-column interior, creating rhythm and preventing monotony across what is a content-heavy format. Every panel has a clear purpose — cover, services overview, team credentials, contact — and the layout ensures the reader moves through them in natural sequence."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A corporate brochure layout that earns its place in a business folder — and gets read rather than filed."}]}]}

Graphic DesignBrochureTri-Fold Brochure

Illustration

Man & Woman Doctors Pose

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Two doctors, two open gestures, one empty space between them — this multipurpose illustration is the perfect frame for any health message that needs a trusted voice to deliver it."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/5057025/screenshots/11031359/media/bc95ae2a14b29daa9a6f4b78b10cf48f.jpg?compress=1&resize=1200x900&vertical=top","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Vector Illustration — Multipurpose Doctor Poses"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"UI Illustration · Healthcare · Male & Female Doctor · Presentation Asset · Flat Vector"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, versatile flat vector illustration featuring a male and female doctor in mirrored presentation poses — each gesturing with open palms toward the center of the composition, framing a generous lavender-purple oval space designed to hold any content the context demands: a headline, a statistic, a product, a CTA, or simply a message."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The design is a masterclass in deliberate emptiness. The two doctors face each other across a central void — not a gap, but an invitation. Their synchronized open-hand gestures are the universal visual language of \"here, look at this\" — a presentation pose that communicates authority, warmth, and trustworthiness without a single word. Used in clinic signage, they say: pay attention to what's between us. Used in app onboarding, they say: here's what you need to know. Used in health campaigns, they say: this matters, and we're the ones telling you."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Both figures wear matching white medical coats with teal-blue scrub collars — a consistent, gender-neutral uniform that signals professional medical authority. The male doctor carries the casual confidence of an experienced practitioner; the female doctor's long dark hair and relaxed posture communicate approachability and calm. Neither figure is masked, giving both characters full facial expressiveness — warm, slightly smiling, and entirely trustworthy."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The lavender-purple abstract background blob unites the two figures in a shared visual space without crowding them, providing just enough environmental context to ground the illustration while leaving the center entirely open for customization."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A UI illustration asset that does its one job perfectly: make whatever it frames feel like it's worth listening to."}]}]}

Illustrationflatvector

Branding

BACOK Logo Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Straight from the concrete courts of Surabaya — BACOK plays with the raw hunger of a crocodile, a street basketball club that bites as hard as it hoops."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/PfmH0XO0_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"hardBreak"},{"type":"text","marks":[{"type":"bold"}],"text":"Brand Identity — BACOK"},{"type":"text","text":" "},{"type":"hardBreak"},{"type":"text","marks":[{"type":"italic"}],"text":"Logo Design · Street Basketball Club · Surabaya, East Java"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"italic"}],"text":"\"Spirit Anti Misuh\""}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A fiercely characterful sports identity for BACOK — a street basketball club born from the concrete courts of Surabaya — that channels the raw, unfiltered energy of street ball culture into a mascot logo dripping with attitude, local pride, and visual muscle."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The centerpiece of the identity is an illustrated crocodile — the apex predator of the waterways — wrapping its powerful body around a full-sized basketball in a stranglehold grip. Jaws wide open, claws locked in, the croc dominates the ball with the same intensity a street baller brings to every possession. The mascot is rendered in a bold, retro-sports illustration style: thick outlines, flat color fills in reptilian green and burnt orange, with expressive detail in the teeth and scales that rewards a close look without losing clarity at a distance."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The choice of the crocodile as mascot is deeply rooted in Surabaya's cultural identity — the city's iconic symbol is the legendary battle between a "},{"type":"text","marks":[{"type":"italic"}],"text":"suro"},{"type":"text","text":" (shark) and a "},{"type":"text","marks":[{"type":"italic"}],"text":"boyo"},{"type":"text","text":" (crocodile), making this mascot not just fierce but unmistakably local. BACOK — Surabaya's own, through and through."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The club name \"BACOK\" is set on a bold sky-blue ribbon banner that bisects the composition, rendered in a heavy collegiate typeface with strong ink-trap character — the typographic equivalent of a hard screen. The tagline "},{"type":"text","marks":[{"type":"italic"}],"text":"\"Spirit Anti Misuh\""},{"type":"text","text":" arcs beneath in a smaller weight, a defiant, self-aware rallying cry that captures the club's community spirit and no-nonsense court etiquette."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The circular badge format — a wreath of illustrated foliage framing the composition — gives the mark the authority of a traditional sports crest while keeping its feet firmly planted on the street."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A mascot logo that plays as hard as the team it represents — loud, local, and impossible to ignore."}]}]}

Brandingbrandlogo

UI-UX

Ride Sharing

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Need Seat or Open Seat — RideSharing's two-button home screen makes the entire carpooling proposition clear before a single scroll."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/ride-sharing.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"App UI Design — RideSharing"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mobile App Concept · Ride Sharing / Carpooling · Jakarta"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, single-screen app concept for RideSharing — a peer-to-peer carpooling platform where commuters either offer seats in their vehicle or look for a ride heading the same direction."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The home screen is built around a binary user intent split: two large, equal-weight action cards — \"Need Seat\" (I need a ride) and \"Open Seat\" (I'm offering a ride) — positioned side by side as the primary navigation. The icon design reinforces each mode: a scheduled car icon for Need Seat, a phone with a heart/search for Open Seat. It's a rare two-option home screen that works precisely because the product has exactly two user modes and no ambiguity between them."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Below the action cards, \"Available to pick up!\" surfaces three live ride offers — all Jakarta routes: to Kuningan City from St. Setiabudi 255 C, to Gandaria City from St. Tanah Abang 67, to Grand Indonesia from St. Petamburan 2E. Each listing shows the driver/rider profile photo, destination, and departure point — the minimum viable information for a commuter deciding in seconds whether a route matches theirs."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The all-blue palette — deep cobalt background, lighter blue card surfaces, blue icon line work — creates a cohesive, trust-forward visual identity appropriate for a service built on sharing a car with a stranger. The card float on the blue background gives the UI a clean, modern depth."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A carpooling app concept that solves the UX challenge of serving two distinct user types — passenger and driver — with a single home screen that handles both without confusion."}]}]}

UI-UXmobileapp

Illustration

Examining Infected Lungs

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Three researchers, one infected lung, and the urgent energy of science racing against a virus — this illustration captures medical research at its most human and its most heroic."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/5057025/screenshots/11019165/media/d71b3e257e881397746c6d5ca07ca42d.jpg?compress=1&resize=1200x900&vertical=top","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Vector Illustration — Examining Infected Lungs"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Medical Research Illustration · COVID-19 · Virology · Flat Vector"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A compositionally striking flat vector illustration depicting three virus researchers in dynamic motion around a giant, laboratory-encased lung specimen — the central visual metaphor of a science community in urgent, coordinated pursuit of understanding."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The giant lung dominates the center of the composition — displayed in a transparent cylindrical specimen container, illuminated from within in deep violet-purple, its surface visibly colonized by bright yellow-orange virus particles with characteristic spike-crown forms. The scale relationship between the tiny researchers and the enormous specimen creates an immediate sense of the microscopic made tangible — a device that communicates scientific examination without a single technical word."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The three researchers orbit the specimen with the kinetic energy of people who know time matters: a left figure in white coat with green-tipped hair runs forward with a magnifying glass raised — the classic symbol of investigation and close analysis; an upper-right figure dashes with a clipboard tucked under one arm, data in hand, ready to record; a lower-right figure moves urgently with a tablet — digital tools of modern diagnostics in motion."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"All three are rendered in the same flat-vector white coat uniform that signals scientific authority, with colorful accent details — pink shoes, orange trainers, teal footwear — that humanize the figures and prevent the illustration from feeling sterile. Their floating, running poses give the composition a weightless, urgent quality — researchers moving through knowledge as much as through space."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The lavender-purple background and the soft circular spotlight around the specimen create a theatrical framing — the lung as exhibit, the researchers as audience and investigators simultaneously."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A medical research illustration that communicates urgency, collaboration, and the quiet drama of science doing its work."}]}]}

Illustrationlungcovid

Branding

Kebun Anggrek Clai

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A hidden garden where rare orchids bloom and visitors fall in love — Kebun Anggrek Clai is where the beauty of nature becomes a brand worth remembering."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/5057025/screenshots/10851459/media/6a2004d2c7624ab504291e101a1fb2c7.jpg?compress=1&resize=800x600&vertical=top","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/kebun-anggrek-clai.jpg","alt":null,"title":null,"width":1140,"height":1140}}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Brand Identity — Kebun Anggrek Clai"},{"type":"text","text":" "},{"type":"hardBreak"},{"type":"text","marks":[{"type":"italic"}],"text":"Logo Design · Orchid Garden · Retail & Agrotourism · Indonesia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A delicate yet characterful brand identity for Kebun Anggrek Clai — a small Indonesian orchid garden that offers both a curated plant retail experience and a living recreational destination for flower enthusiasts and nature seekers alike. The identity centers on what the brand is at its very heart: the orchid itself, rendered with botanical accuracy and artistic warmth."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The logomark is a front-facing phalaenopsis orchid illustration — the most iconic and beloved of the orchid family — captured in full bloom with its distinctive symmetrical petals spreading wide and the characteristic labellum at its center rendered in rich plum purple. The petals are illustrated in a warm yellow-green gradient, giving the mark a luminous, almost glowing quality that speaks to the living, breathing nature of the garden. Fine linework traces the natural veining of each petal, adding botanical credibility and illustrative craftsmanship that elevates the mark beyond a generic floral icon."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The deep royal purple background — the color most universally associated with orchids, elegance, and rare beauty — creates an immediate emotional anchor. Against it, the wordmark \"ORCHID\" sits in clean, widely-spaced uppercase letters in crisp white, exuding quiet sophistication without overshadowing the illustrated centerpiece above."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"For Kebun Anggrek Clai, this visual language translates perfectly: it communicates a space that is simultaneously intimate and extraordinary — a neighborhood garden with the soul of a botanical sanctuary. The identity works equally well on signage at the garden entrance, plant tags, packaging for sold specimens, social media content, and printed merchandise for recreational visitors."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A brand identity that blooms as beautifully as the flowers it represents."}]}]}

Brandingorchidflower

Illustration

Love Illustrations

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Swipe, verify, say hello — this dating app illustration set captures the full emotional arc of modern digital romance in three warm, human moments."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/5057025/screenshots/11632226/media/e8989d704c97cf08c0103d5bcd1ce601.jpg?compress=1&resize=1200x900&vertical=top","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Illustration Set — Love Illustrations"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"UI Illustration · Dating App · Love & Connection Platform · Flat Vector"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A charming, warmly composed set of three flat vector illustrations designed for a love and dating application — each capturing a distinct moment in the modern digital dating journey, rendered in a cohesive blush-pink and violet palette that feels intimate, optimistic, and entirely inviting."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The first illustration depicts the browsing moment: a smiling woman in a purple top scrolls through a grid of user profile silhouettes surrounding her — the selection process personified. Her confident expression and peace-sign gesture communicate a user in control of her choices, comfortable with the platform, and genuinely excited by the possibilities in front of her. The circular blob background frames the scene as a portal — the digital world made warm and personal."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The second illustration captures profile verification: a dark-haired woman seen from behind holds up an ID card while a large \"VERIFIED\" badge with a checkmark glows on the screen before her. The moment is simple but communicates something essential — trust, safety, and the platform's commitment to authentic connections. For a dating app, this scene is quietly powerful: showing users that who they see is who they get."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The third illustration is the first spark — a young man in purple, hands open in a welcoming gesture, flanked by two pink speech bubbles: one carrying a hand-lettered \"Hello\" in his direction, another showing a female silhouette responding. The composition captures the hopeful, slightly nervous energy of a first message sent — the moment before everything begins."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Together the three scenes tell a complete story: discover, trust, connect. A dating app UI illustration set that makes the platform feel safe, joyful, and genuinely worth opening."}]}]}

IllustrationLoveDate

Illustration

Chubby Boy

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Round, rosy, and ready for work — Chubby Boy is the character design that proves the most endearing mascots are the ones that look exactly like someone you know."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/5057025/screenshots/10880398/media/65825b8e68d7cda81039fc8e6a866e59.jpg?compress=1&resize=800x600&vertical=top","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Character Design — Chubby Boy"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mascot Illustration · General Purpose Character · Flat Vector"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A delightfully round, instantly lovable character illustration — Chubby Boy stands quietly confident in a purple turtleneck sweater, terracotta trousers, and matching purple slip-on shoes, a yellow lanyard holding a blank ID badge against his chest. The ID badge is a deliberate open canvas: a character designed to represent anyone — an office worker, an event attendee, a student, a team member — whoever the context calls for."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The character design is built on maximum roundness: a perfectly spherical head with rosy cheeks and a small, content smile; a body wider than it is tall; arms that barely clear the torso; and feet so compact they function more as anchors than appendages. This geometric simplicity is the illustration's greatest strength — instantly readable at any size, infinitely scalable across UI, marketing, and animation contexts."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The warm, muted palette — violet purple, burnt orange, deep auburn hair — creates a character that feels approachable and contemporary without being garish. The slight smile and relaxed posture communicate a character at ease in any situation: the kind of mascot that shows up in onboarding flows, empty state illustrations, loading screens, and event materials with equal charm."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The blank ID badge is a subtle but smart design choice — it leaves room for customization, naming, or branding, making Chubby Boy a genuinely versatile character asset rather than a one-context illustration."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A character that wears its personality in its proportions — because sometimes the most memorable designs are simply the ones that make you smile without knowing why."}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Illustrationvectorboy

UI-UX

MotoCamp Motocross Training Camp Website

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Hey extreme lovers 👋"}]},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"This is my Exploration for ..."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"\"MotoCamp - Motocross Training Camp Website\""}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A website about motocross training camps."}]},{"type":"image","attrs":{"src":"https://mir-s3-cdn-cf.behance.net/project_modules/fs/b00c1e142316759.6264a79d96960.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"What do you think guys? Let me know in the comments section!"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Hope you enjoy it guys. Click “❤️‍Like” if you like it."}]},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Have a great project idea?"},{"type":"text","text":" Let us know ✅"}]},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Services we provide:"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🖼️ UI Design | 😄 UX Design | 🎉 Illustration | 🛍 Brand Identity | 📝 Graphic Design | 🌐 Web Development | 📱 Mobile App Development"}]},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Thanks!"}]}]}

UI-UXMotocrossLanding Page

UI-UX

DIPUJA

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Learn, Share, and Grow — Stockwise turns stock market education into an interactive, community-driven experience for learners at every level."}]},{"type":"image","attrs":{"src":"https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/184ddd164614065.63f99abd76873.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Mobile App Design — Stockwise"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Stock Market Education · Learning Platform · Community Sharing · UI/UX Design"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A mobile application designed to teach and empower users about the stock market — Stockwise combines interactive learning with community engagement to make investing accessible and understandable."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The final version focuses on clarity, engagement, and collaboration. Users can access structured lessons, track their progress, and share insights with peers, creating a social learning ecosystem that encourages participation and discussion."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The interface likely balances content richness with usability. Charts, tutorials, and real-time examples are presented in a digestible way, making complex financial concepts approachable even for beginners. Community features enable users to ask questions, exchange strategies, and celebrate learning milestones together."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Stockwise positions itself as more than an educational tool — it is a platform for continuous growth. By connecting learners, providing structured knowledge, and promoting discussion, it fosters both confidence and competence in navigating the stock market."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Visually, the design likely emphasizes clarity, hierarchy, and motivational cues. Key metrics, progress tracking, and interactive elements guide users without overwhelming them, creating an engaging and supportive learning experience."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"This project reflects a broader trend toward democratizing finance education — blending technology, social learning, and actionable knowledge to make investing approachable for everyone."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A polished exploration of how digital platforms can teach, connect, and inspire — where learning about stocks becomes an interactive, social, and empowering journey."}]},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"DIPUJA"}]},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"image","attrs":{"src":"https://hyperfantasy.web.app/assets/images/portfolios/dc0924ec-746d-4636-8e01-23217ffc83cc/dipuja.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null}}]}

UI-UXmobileapp

Branding

Astary

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"When the human hand becomes the brand — Astary transforms artisan craft into a luxury identity that hotels and villas reach for without hesitation."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/astary.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Brand Identity — Astary"},{"type":"text","text":" "},{"type":"hardBreak"},{"type":"text","marks":[{"type":"italic"}],"text":"Logo & Brand Identity · Artisan Craft Supplier · Hospitality & Luxury Interiors"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A luminous, handcrafted brand identity for Astary — a premium craft supplier serving the hotel and villa hospitality sector with bespoke resin creations, from soap containers and decorative bottles to curated interior accessories. The name itself carries the mark of its origin: "},{"type":"text","marks":[{"type":"italic"}],"text":"Asta"},{"type":"text","text":", meaning hand in Sanskrit — and the identity honors that etymology with extraordinary visual precision."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The logomark is an abstracted open hand rendered in upward-reaching geometric flame-like forms, rising with quiet elegance from a single base point. The five finger-like elements taper and flow naturally, simultaneously evoking an open palm, a blooming flower, and a flame — three archetypes of creation, warmth, and living craftsmanship. The form is unmistakably human yet refined beyond the literal, occupying the rare space where symbolic and figurative design converge seamlessly."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The gold gradient treatment applied to the icon is where the identity truly ascends. A rich, warm gradient transitions from deep amber at the base to brilliant champagne gold at the tips — mimicking the way light catches the surface of polished resin, the very material Astary works with. This is not decorative gold; it is material gold — a direct reference to the product's essence embedded in the brand's visual DNA."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The wordmark \"ASTARY\" is set in a clean, widely-spaced uppercase serif against the deep charcoal card — cool white letterforms that provide stark, elegant contrast to the warmth of the icon above. The all-caps treatment adds formality and scale, positioning the brand as a premium supplier worthy of five-star hospitality procurement lists."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Currently rooted in Bali — Indonesia's global capital of luxury hospitality and artisan craft — Astary is building its reputation among the island's world-class hotels and villas, with a clear vision to expand its handcrafted offerings to the international hospitality market."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Presented across a multi-card stationery mockup in dramatic dark-surface flat-lay, the identity demonstrates flawless consistency at every size — from full business card to reduced secondary mark — a hallmark of a mature, considered brand system."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A brand identity as refined as the objects it represents — where every element is placed by hand, with purpose."}]}]}

Brandinglogocraft

Development

Karma Group React Native App Development

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Where luxury hospitality meets mobile elegance — the Karma Group app brings world-class resort destinations to your fingertips, built with the precision of React Native."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/odyssey.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Mobile App Development — Karma Group · Odyssey Club"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"React Native · Cross-Platform Mobile App · Luxury Hospitality & Resort Group"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A premium mobile application built with React Native for Karma Group — one of Asia-Pacific's leading luxury hospitality and resort brands — delivering a curated destination discovery experience across the group's prestigious portfolio of properties, including Odyssey Club Resorts, Karma Resorts Indonesia, and Karma Royal Residences."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The app's home screen opens on a \"Destination\" view with a clean search bar and a \"Today\" feed — a content-first approach that immediately surfaces the most relevant resort experiences to the user. The hero card features Odyssey Club Resorts with a sweeping aerial landscape photograph of a Southeast Asian temple district bathed in golden hour light — the kind of image that makes booking feel inevitable. Below, additional property cards for Karma Resorts Indonesia and Karma Royal Residences complete a destination grid that communicates the group's geographic breadth and property diversity."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The dual-phone mockup — one upright in focus, one tilted and partially visible above — creates a dynamic, layered composition that adds visual depth to the portfolio presentation, suggesting an app that works beautifully at any angle, on any device."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The UI palette is deliberately restrained: white content cards, clean typography, and photography that does the heavy lifting — a design philosophy perfectly calibrated for a luxury brand whose visual assets speak louder than any UI decoration. React Native ensures the experience is natively fluid across both iOS and Android, matching the seamless standard a premium resort brand demands."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An app as effortless to use as checking into one of its properties."}]}]}

DevelopmentMobile AppApp

Illustration

Hazmat Suit in Super Heros Pose

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Cape optional, hazmat suit mandatory — this health worker flies through a viral battlefield with a raised fist and a disinfectant sprayer, the superhero the pandemic actually needed."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/5057025/screenshots/11031408/media/7eecb6a8e7154de6581c170263406160.jpg?compress=1&resize=1200x900&vertical=top","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Illustration — Hazmat Suit in Super Hero's Pose"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Public Health Illustration · Healthcare Hero · COVID-19 · Flat Vector"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A bold, cinematic flat vector illustration that does what the best public health communication always does — it makes the extraordinary work of ordinary people feel legendary. A health worker in full yellow PPE — hazmat suit, respirator mask, protective goggles, rubber boots — soars through a dark void, fist raised in the classic superhero flying pose, disinfectant spray gun in the other hand, surrounded by a scattered constellation of pink virus particles that haven't yet met their match."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The yellow hazmat suit is the illustration's most deliberate visual choice: a color of caution transformed into a color of courage. Against the near-black background, the figure glows — radiant, warm, impossible to miss — the same way the real health workers who wore these suits were impossible to forget for anyone who witnessed the pandemic up close. The suit's seams and goggle reflections are rendered with enough detail to be recognizable, while the flat-vector style keeps the illustration accessible and deployable across poster, digital, and campaign contexts."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The pose is pure superhero vocabulary: horizontal flight, one fist forward, one arm back holding the tool of their trade — the disinfectant sprayer replacing the magic wand, the web-shooter, the repulsor blast. It is a deliberate, joyful act of framing: the health worker IS the superhero, the PPE IS the costume, and the sprayer IS the superpower."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The pink virus particles drifting through the dark background — some large, some small, all with that distinctive crown-spike form — complete the narrative: this is a battlefield, and the hero is already in it."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An illustration that gives health workers the visual mythology they earned every single day of the pandemic."}]}]}

Illustrationhazmatcovid

UI-UX

PotFol - Website Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Dark, image-first, and unapologetically bold — PotFol's photography portfolio website puts the work exactly where it belongs: front, center, and impossible to look away from."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/details/51-potfol-website-design/pofol.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — PotFol"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Photography Portfolio Website · Personal Portfolio Design Exploration"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A sleek, image-forward photography portfolio website design exploration for PotFol — a personal photography portfolio platform — built around the fundamental principle of all great portfolio design: get out of the way and let the work speak."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The layout is a confident two-column split: a dark charcoal left sidebar carries the navigation and branding, while the right three-quarters of the viewport is given entirely to a masonry-style photo grid — a collection of portrait and fashion photography in high-contrast black and white, punctuated by a single bold colour accent at the center that draws the eye with the precision of a carefully placed spotlight."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The left sidebar is a masterclass in minimal navigation design: the \"POTFOL\" wordmark anchors the top in a mixed-weight typeface — bold \"POT\" against lighter \"FOL\" — with a hot pink \"Photography Portfolio\" sub-label that introduces the brand's accent color with quiet authority. The navigation links — About Me (active, highlighted in magenta pink), Gallery, Awards, Services, Contact — are clean, light-weight, and organized in a vertical stack that keeps the interface completely scannable. Social media icons anchor the footer of the sidebar, completing the professional photographer's digital identity without clutter."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The photo grid dominates with deliberate variety: portrait close-ups, full-body fashion shots, couples, movement studies — a range that demonstrates breadth of subject matter and technical versatility. The monochromatic treatment unifies the disparate subjects into a single cohesive visual language, making the portfolio feel curated rather than simply collected."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A photography portfolio design that respects the photographer's most important asset — the photographs — by giving them the space they deserve."}]}]}

UI-UXWebWebsite

Illustration

Geonk Design - Illustration 3D

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"When your design studio has its own 3D robot mascot that leaps off the render floor with its own brand on its chest — you know the designer is having fun."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/W8qF7pzj_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"3D Illustration — Geonk Design"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Brand Illustration · 3D Character · Personal Studio Identity"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, energetic 3D illustration for Geonk Design — a personal design studio identity brought to life through a compact, expressive robot mascot captured mid-leap in a studio-white render environment. The piece is equal parts brand statement and creative self-expression — a designer saying: this is what I do, and this is how I feel about it."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The robot mascot is a small, rounded white mech — squat proportions, visor-style head unit, articulated arms and legs spread wide in a joyful jumping pose — frozen at the apex of its energy, as if permanently in the state of enthusiastic motion. The word \"GEONK\" is printed directly on the robot's chest panel, claiming the mascot as the studio's official representative with a confidence that only a self-designed brand character can carry."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The 3D text \"GEONK DESIGN\" casts alongside the character in a matching near-white tone, with subtle reflections and shadows grounding both elements on a soft, seamless white surface. The monochromatic render — white robot, white text, warm white environment — communicates a studio that understands restraint: when your concept is strong, color is optional."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The character's jumping pose is the emotional core of the piece: this is not a robot standing at attention waiting for a brief. It is a robot mid-celebration, mid-idea, mid-flight — the physical embodiment of creative momentum."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A 3D brand illustration that doubles as a personality statement — Geonk Design, in motion, always."}]}]}

Illustration3DRobot

Illustration

Special Ambulance Virus

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Sirens on, hazmat suit buckled, anti-virus symbol blazing on the side — the Special Ambulance Virus illustration is the pandemic response vehicle that means business from every angle."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/5057025/screenshots/11058366/media/052a24f6c0d165444721ff011ebdcccd.jpg?compress=1&resize=1200x900&vertical=top","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Vector Illustration — Special Ambulance Virus"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Public Health Illustration · COVID-19 · Emergency Response · Flat Vector"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A bold, immediately legible flat vector illustration depicting a specially equipped pandemic ambulance — a vehicle purpose-built for the COVID-19 era, driven by a health worker in full PPE and branded with the universal visual language of viral combat."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The ambulance is rendered in a clean white body with the characteristic \"AMBULANCE\" mirror text printed across the roof in red — a detail of functional realism that gives the illustration documentary accuracy alongside its illustrative style. The red and blue emergency lights atop the cab flash with rendered urgency, communicating active deployment rather than standby status."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Behind the wheel sits a health worker in full protective gear — white hazmat suit, goggles, respirator mask — the dedicated face of a system that showed up every day during the pandemic, masked and suited and driving. The figure is calm, purposeful, entirely present — a visual tribute rendered with the simplicity and directness the subject deserves."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The vehicle's rear panel carries the illustration's most striking graphic element: a large anti-virus symbol — a purple COVID-19 particle within a red circle crossed by a diagonal red slash, accompanied by a red medical cross. The combination reads instantly across cultures and languages as a single, unambiguous message: this vehicle fights the virus. The symbol is bold enough to read from across an editorial layout at any size, making the illustration equally deployable across health campaigns, infographics, editorial articles, and public awareness posters."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The teal-blue background provides a clean, clinical backdrop that keeps the white ambulance sharply defined while giving the overall composition the calm urgency of a public health communication piece."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An illustration of a vehicle that represents the human infrastructure of pandemic response — unglamorous, essential, and perpetually on the way."}]}]}

Illustrationflatvector

Illustration

No Mask No Entry

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Stop — but here's a mask. The security officer in this illustration enforces the rule and offers the solution in the same breath."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/5057025/screenshots/11013386/media/77b52fe7755d9c2766e52e6d32dc1d65.jpg?compress=1&resize=1200x900&vertical=top","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Vector Illustration — No Mask, No Entry!"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Public Health Illustration · COVID-19 Compliance · Security Officer · Flat Vector"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A sharply composed flat vector illustration of a security officer enforcing one of the pandemic era's most universal rules — No Mask, No Entry — with a combination of firm authority and practical hospitality that perfectly captures how the policy worked at its best."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The character is unmistakably a security professional: black suit, crisp white shirt, red tie, dark aviator sunglasses with a reflective star glint — the visual vocabulary of someone whose job it is to decide who gets in and who doesn't. He wears a surgical mask himself, modeling the very compliance he enforces. His left hand extends forward in a clear, flat-palmed stop gesture — the universal signal for \"not yet, not like that.\" His right hand, raised to shoulder height, holds a spare surgical mask between two fingers — dangling it as an offering rather than a weapon, his expression (above the mask) suggesting calm, non-confrontational authority."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The double gesture is the illustration's conceptual strength: one hand says stop, the other says here's what you need. It is the enforcement and the solution in a single composition — communicating a policy that was firm but fair, a rule that came with a remedy."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The abstract grey blob background keeps the focus entirely on the figure and his two-handed message, with no environmental distraction from the clarity of the pose."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A public health illustration that captures the exact tone pandemic compliance communication needed: direct, non-threatening, and practical. No mask? Here's one. No entry? That's the rule."}]}]}

Illustrationflatvector

UI-UX

StarBuss - Website Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Professional, direct, and built for business — StarBuss's corporate website puts the right faces and the right navigation in front of every visitor from the very first scroll."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/details/55-starbuss-website-design/corporate.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — StarBuss"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Corporate Website Exploration · Business Services"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, professional corporate website design exploration for StarBuss — a business services company whose digital presence communicates institutional credibility, approachability, and the organized confidence of a firm that knows its clients and what they need."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero section leads with a full-width black and white editorial photograph of a business team in active collaboration — a senior executive with glasses engaged in conversation with three professional colleagues — a deliberate visual choice that communicates people-first business values. The desaturated treatment gives the image a timeless, editorial quality while keeping the focus entirely on human interaction rather than environment, signaling that StarBuss's primary value is its people and their expertise."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The StarBuss logo anchors the header with a clean star icon mark — a five-pointed star with a dimensional cut, rendered in blue-grey — beside the \"STARBUSS\" wordmark in a bold, condensed typeface. The logo communicates aspiration and precision in equal measure. A phone number sits aligned right in the header, immediately surfacing the most direct path to human contact for visitors who arrived ready to talk."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The navigation bar — Home (active, blue), Services, Solutions, Compare, News, Contact — is structured with the logic of a B2B buyer's journey: understand the brand, explore services, evaluate solutions, compare options, read credibility signals, then contact. The blue active state on \"Home\" establishes the brand's accent color with economy."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The Sign In and Register buttons in the upper right confirm a platform dimension to the business — client portals, account-based access, or membership services — adding functional depth to what reads as a clean, trustworthy corporate front door."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A corporate website that does its job without decoration — because in B2B, clarity is the most sophisticated design choice of all."}]}]}

UI-UXWebWebsite

UI-UX

Oishi Hut

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Table 23, Your Order, 2m 32s — Oishi Hut puts the sushi menu, cooking progress, and bill in one seamless flow that makes dining in feel as smooth as ordering online."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/oishi-hut.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"App UI Design — Oishi Hut"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Restaurant App · In-Dining Order & Kitchen Tracking · Japanese Cuisine"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A polished, full-featured restaurant app UI for Oishi Hut — a Japanese sushi and roll restaurant — covering the complete in-dining experience from menu browsing to kitchen progress tracking to bill payment."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Screen 1 — Menu:"},{"type":"text","text":" A clean white product grid with high-quality sushi photography, product names, and prices in orange (Salmon Avocado with Cream Cheese Rp. 50.000, Sushi Roll with Fresh Roe & Uni Rp. 42.000, Tuna Roll with Sparkling Beans Rp. 25.000). The orange accent color is the app's single most important design decision — warm, appetite-stimulating, and consistent across every touchpoint. Search, sort, and filter icons sit above the grid for power-user navigation."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Screen 2 — Order Tracking & Bill:"},{"type":"text","text":" The right screen is the app's most interesting UX layer. A table selector at the top (21–25) confirms the diner's table number — Table 23 is active. Below it, the order list doubles as a live kitchen tracker: each item has a cooking pot icon indicating its current preparation state, and a countdown timer (2m 32s) shows how long until the order is ready. The bill section below itemizes each dish with prices, sub-total (Rp. 100.000), total (Rp. 100.000), and a prominent orange \"Pay the Bill\" CTA."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The kitchen progress tracking feature — real-time cooking status visible to the diner — is the app's standout UX innovation. It eliminates the \"where is my food?\" friction that defines most restaurant experiences without requiring staff interaction."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A restaurant app that gives diners control, transparency, and hunger — in that order."}]}]}

UI-UXAppMobile

Illustration

Tamawal Illustration

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"image","attrs":{"src":"https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/6865ed153716735.6334989a9a1e4.png","alt":null,"title":null,"width":1140,"height":1140}}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Two users, one platform, one mission — Tamawal's illustration suite puts real Saudi faces at the center of a fintech experience built to serve every kind of borrower."}]},{"type":"image","attrs":{"src":"https://mir-s3-cdn-cf.behance.net/project_modules/fs/3fc4ca153716735.6334989a9a7dc.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Illustration Design — Tamawal"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Character Illustration · Digital Financing Platform · SAMA-Regulated · Saudi Arabia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A suite of custom character illustrations created for Tamawal® — Saudi Arabia's premier Sharia-compliant digital financing marketplace — designed to humanize the platform's user experience across onboarding flows, marketing campaigns, and customer support touchpoints."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The user illustration pair presents two Saudi individuals in their natural digital context: a man in traditional white thobe and red-checked ghutrah, smiling as he interacts with his phone — embodying the everyday borrower discovering financing options with ease; and a woman in modest black abaya, bracelet on her wrist, phone in hand with a focused, considered expression — representing the modern Saudi woman engaging with financial services on her own terms. Both figures are rendered in a contemporary flat-illustration style with warm, realistic skin tones and culturally precise attire — neither caricature nor stereotype, but genuine, dignified representation."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The customer support illustration offers a closer portrait: a Saudi man in the Tamawal thobe — white with the brand's blue \"T\" logomark embroidered on the chest — wearing a headset and raising one finger in the universal gesture of \"let me explain.\" His expression is open, warm, and knowledgeable — the face of a platform that wants its users to feel supported, not processed. The soft blue halo behind him grounds the character in Tamawal's brand color language."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Together these illustrations form a visual language that does something rare in Gulf fintech design: they show Saudi people using Saudi financial tools, in their own clothes, in their own context — communicating that Tamawal was built for them, not adapted from somewhere else."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An illustration system that puts the human at the center of every screen it appears on."}]}]}

Illustrationvectorarab

Development

FUFA Frontend Web Development

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Heavy industry deserves a web presence as strong as its machinery — FUFA's frontend build delivers exactly that, forged in clean HTML and CSS."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/small/WfV9r5Wm_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Frontend Development — FUFA"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Web Development · Industrial Sector · WELT, Steel, Construction & Metallurgy · HTML & CSS"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A robust, atmosphere-driven frontend web development project for FUFA — an industrial company operating across the WELT framework, steel manufacturing, construction, and metallurgy sectors. The website is built with handcrafted HTML and CSS, demonstrating that frontend discipline and strong art direction can produce a digital presence as commanding as the industry it represents."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The desktop UI reveals a dark, editorial-toned homepage — deep maroon and charcoal backdrops frame full-bleed industrial photography: heavy machinery, factory workers, towering industrial structures shot with the gravitas they deserve. The visual language is intentionally raw and powerful, communicating a company that works with real materials, real heat, and real force. A large Chinese numeral \"25年\" visible on the hero panel signals a proud heritage — 25 years of industrial experience carried into the digital space."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A photo grid at the bottom of the layout organizes additional industrial imagery into a structured mosaic — construction sites, steel infrastructure, architectural spans — giving the visitor a rapid-fire visual portfolio of the company's capabilities and scale."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The open code editor on the adjacent monitor confirms the project's handcrafted nature — syntax-highlighted HTML markup written line by line, without shortcuts or drag-and-drop builders. The dual-monitor presentation is a deliberate portfolio statement: the polished result on one screen, the craft behind it on the other."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A frontend build that carries the weight of its industry — dark, disciplined, and built to last."}]}]}

Developmentforgeweld

Branding

Superstrait Logo Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Where East meets West through the world's most strategic waterway — a brand identity built to move cargo, command trust, and own the Malacca Strait."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/kd31xZy1_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Brand Identity — Superstraits"},{"type":"text","text":" "},{"type":"hardBreak"},{"type":"text","marks":[{"type":"italic"}],"text":"Logo Design · Import-Export & Freight Forwarding · Malacca Strait"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A sharp, globally-minded brand identity for Superstraits — a freight forwarding and import-export company operating along one of the world's most vital maritime trade corridors: the Malacca Strait. The logo is a study in elegant duality, where every design decision carries both visual and strategic meaning."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The logomark is a fluid, circular \"S\" form composed of two interlocking wave-like shapes — a direct visual reference to the Strait itself, where opposing currents of global trade converge and flow. The dark navy fill gives the mark weight, stability, and international authority, while the circular enclosure suggests a complete, reliable trade loop — cargo in, cargo out, seamlessly managed."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The wordmark \"SUPER"},{"type":"text","marks":[{"type":"bold"}],"text":"STRAITS"},{"type":"text","text":"\" employs a deliberate typographic split: \"SUPER\" in deep navy, \"STRAITS\" in vibrant lime green — a two-color system that communicates both the brand's confidence (navy) and its agility (green). The clean, geometric sans-serif chosen for the wordmark speaks the universal language of logistics and global commerce: precise, modern, borderless."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Presented on a textured paper card mockup, the identity demonstrates clean print performance and professional restraint — a brand that would sit equally at home on a shipping container manifest, a corporate presentation, or a digital freight platform."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A focused, geographically rooted brand identity that turns a strategic location into a brand asset — and signals to partners across Asia and beyond that Superstraits knows exactly where it stands in the global supply chain."},{"type":"hardBreak"},{"type":"hardBreak"}]}]}

Brandinglogoexport import

UI-UX

Time Bus

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"\"PO. Gunung Harta 17:00 WIB, 12 kursi tersedia\" — TimeBus brings the intercity bus terminal experience into your pocket, from route browsing to seat selection in three screens."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/time-bus.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"App UI Design — TimeBus"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mobile App · Intercity Bus Booking & Management · Indonesia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, well-structured mobile app UI for TimeBus — an intercity bus booking platform for the Indonesian market, where dozens of bus operators (PO) serve the same routes and passengers need to compare departures, seat availability, and arrival times at a glance."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The app icon — a round, friendly bus face in coral red — sets the tone: functional but approachable, serious about schedules without being intimidating."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Screen 1 — Route (Rute):"},{"type":"text","text":" A list view of all operators serving Surabaya–Denpasar, each row showing PO name, departure time (WIB), and seats available. PO. Gunung Harta at 17:00 (12 kursi), PO. Setiawan at 15:00 (8 kursi), PO. Restu Mulia at 14:00 (18 kursi) — exactly the comparison a traveler needs before committing to a booking. The \"Cegat\" tab suggests an additional mode for flagging down buses at intermediate stops."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Screen 2 — Cegat (Map View):"},{"type":"text","text":" A map-based screen showing the bus route Lamongan–Surabaya with a live bus position and a bottom sheet revealing PO. Gunung Harta's estimated arrival at Surabaya 17:00 WIB with 20 seats available. Real-time tracking communication in a familiar map interface."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Screen 3 — Pilih Kursi (Seat Selection):"},{"type":"text","text":" A visual bus seat map — red seats taken, grey seats available — with a \"Pilih Kursi Ini\" (Choose This Seat) CTA. The seat picker is intuitive, complete, and exactly what converts intent into a confirmed booking."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Three screens, one complete booking journey — designed specifically for the PO bus culture of Java and Bali."}]}]}

UI-UXAppMobile

Graphic Design

Sumpah Pamungkas Poster Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Part mythology, part cinema — the Sumpah Pamungkas poster is a visual world unto itself, where Javanese spirit meets Hollywood poster craft."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/90bcF2tw_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Poster Design — Sumpah Pamungkas"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Film / Theater Poster · Javanese Cultural Production · 2012"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A dramatically cinematic poster for Sumpah Pamungkas — a Javanese cultural theater or film production — that channels the visual language of international movie posters while remaining deeply rooted in Indonesian mythological aesthetics."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The central figure stands bare-chested with exposed rib-bone body paint, flanked by sweeping giant butterfly wings in black and gold batik patterns — a surreal, otherworldly composition that positions the protagonist between the human and the supernatural. The stormy, backlit sky amplifies the epic, mythological scale of the narrative."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The title \"SUMPAH PAMUNGKAS\" is set in bold red type against the dark atmospheric backdrop — urgent, declarative, and impossible to miss. Cast names arc across the top in classic film poster style, lending the piece a cinematic authority that elevates the production's prestige. A release date (March 24, 2013) grounds the drama in real-world anticipation."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A poster that doesn't describe the story — it becomes it."}]}]}

Graphic DesignPosterMovie

Graphic Design

Learning Design - Works

{"type": "doc", "content": [{"type": "paragraph", "content": [{"type": "text", "text": "These are some of the works (which I still found) that I made when I started studying design specifically in a professional program in the city of Malang, East Java around 2011."}]}, {"type": "paragraph", "content": [{"type": "image", "attrs": {"src": "https://farooq-agent.web.app/assets/images/works/details/211-saladin-college-works/i14.png", "width": 1140, "height": 1138}}]}]}

Graphic Design

UI-UX

Privateers - Website Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"First and foremost, risk managers — Privateer Capital Company's website says exactly what it does and to whom, with the clean authority of a firm that has never needed to shout."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/0eeUkYkH_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — Privateer"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Business Website Exploration · Capital Company · Financial Services"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, authoritative website design exploration for Privateer Capital Company — a financial services firm whose digital presence communicates institutional confidence, professional credibility, and the understated gravitas of a company that manages serious capital for serious clients."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero section opens with the brand's positioning statement as its headline: \"FIRST AND FOREMOST, WE ARE RISK MANAGERS.\" — set in a bold, mixed-weight display typeface that creates deliberate emphasis through typographic contrast. \"AND\" and \"RISK\" are highlighted in electric blue — the accent color that carries the firm's entire personality: precise, technical, and alert. The statement is both a value proposition and a philosophy, delivered with the directness of someone who has been asked what they do one too many times and decided to just put it on the homepage."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Sharing the hero frame is a professional male figure in a dark business suit — confident posture, arms relaxed, expression open and composed — the visual embodiment of the firm's human capital: experienced, trustworthy, and entirely comfortable with the weight of client responsibility."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The Privateer logo — a shield-like crest mark beside an elegant script wordmark — sits in the upper left, communicating heritage and institutional pedigree. \"Capital Company\" beneath the name confirms the firm's positioning within the investment and asset management space."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The navigation, anchored by a bold sky-blue horizontal band, maps the firm's service architecture: About Us, Private Equity, Hedge Fund, Our Team, Employment, Contact Us — a structure that confirms Privateer operates across multiple investment vehicles with a team worth meeting and a pipeline worth joining."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A business website that earns trust before the scroll — because the headline already told you everything you needed to know."}]}]}

UI-UXWebWebsite

UI-UX

Pelindo III - Website Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Integrity — Pelindo III's website redesign puts Indonesia's state-owned port operator on a digital stage that matches its scale and national importance."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/5Qrdew31_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — Pelindo III"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Corporate Website · State-Owned Port Operator · BUMN · Indonesia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, authoritative website design for Pelindo III — PT Pelabuhan Indonesia III, the state-owned enterprise managing ports across Central and Eastern Indonesia, one of the nation's most critical logistics infrastructure assets."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The branding splash — Pelindo III's distinctive double-arrow logomark on a teal dot-pattern background — establishes the institutional identity with the confidence of a BUMN that doesn't need to oversell its position. The logomark's layered diagonal forms communicate movement, shipping, and interconnected logistics networks in a single abstract mark."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The website hero rotates through core values: \"Integrity\" is visible here, with a port worker in full PPE — hard hat, safety vest — standing against container cranes and a cargo ship. The pairing of abstract corporate value with real operational imagery is a strong design choice: Pelindo III's integrity isn't a boardroom aspiration, it's demonstrated on the dock every day."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The navigation — \"Profil Perusahaan, Media, Layanan, Masyarakat & Lingkungan, Tata Kelola, Info Investor, Login\" — maps a full corporate stakeholder platform: public users, investors, business partners, and community audiences all served from a single, well-structured site."}]}]}

UI-UXWebWebsite

UI-UX

Marvell City - Website

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"3 Harmony of Life, 10 in 1 Concept, 5 Marvellous Value — Marvell City's website frames Surabaya's most ambitious mixed-use development as the city's next landmark."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/small/gq4daFI6_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — Marvell City"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Property Website · Mixed-Use Development · Surabaya"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, aspirational website design for Marvell City — a large-scale integrated property development in Surabaya combining residential, commercial, and lifestyle zones."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero is a triptych of architectural renders — retail streetscape, tower podium, and glass residential tower — arranged in a sharp angled-panel layout that communicates scale and variety simultaneously. The tagline \"Marvellous Values & Concepts\" anchors above, setting the tone: this isn't just a property, it's a lifestyle proposition."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The three value pillars below — 3 Harmony of Life, 10 in 1 Concept, 5 Marvellous Value — compress the development's complex offering into a scannable, memorable framework. For a property of this ambition, it's the right UX choice: give visitors the concept first, the detail second."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The white space-dominant layout with editorial typography communicates premium positioning without resorting to gold-and-marble clichés — a property that sells itself through vision, not decoration."}]}]}

UI-UXWebWebsite

Illustration

Defiskom Lion Character Design

{"type": "doc", "content": [{"type": "paragraph", "content": [{"type": "text", "text": "This is a design that I made when I was in high school, using a computer in the student council room at school."}]}, {"type": "paragraph", "content": [{"type": "text", "text": "This is the logo of a one-year professional program institution and a picture of a lion, which is a representation of Malang, the city where the professional program is located."}]}, {"type": "paragraph", "content": [{"type": "text", "text": "I created this work because I realized it was rather difficult to continue education until college at that time and chose to work alone, but took the course first. majoring in graphic design and computer."}]}, {"type": "paragraph", "content": [{"type": "image", "attrs": {"src": "https://farooq-agent.web.app/assets/images/works/details/47-defiskom-lion-character-design/i20.png", "width": 376, "height": 480}}]}]}

Illustrationdesign grafiscomputer

UI-UX

Mamikos

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Finding your next kos kosan just got smarter — Mamikos puts thousands of boarding house options in your pocket, with filters, pricing, and facilities all at your fingertips."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/mamikos.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Mobile App Design — Mamikos"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"UI/UX Design · Kos Kosan Finder App · Property Tech · Indonesia"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, conversion-focused mobile app design for Mamikos — Indonesia's leading platform for finding and booking kos kosan (boarding house rooms) — demonstrated here across two key screens that capture the full user discovery journey."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The home screen leads with a full-bleed property photography hero — a bright, airy kos interior — overlaid with the platform's core call-to-action: \"Cari Kos Kosan?\" The search bar sits immediately below, primed for location input, with a category shortcut row beneath offering quick access to Promo & Event, Promo dari Kost, and Kost Terbaru. A bold green \"Kost Terfavorit\" CTA button anchors the mid-section, driving users directly to the most-saved listings. The bottom navigation — Cari Kost, Filter, Urutkan — keeps the core functions permanently accessible, critical for a search-heavy use case."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The search results screen reveals the platform's filtering intelligence: a location input pre-filled with \"Denpasar,\" a dual-handle price range slider spanning 300,000 to 2,000,000 IDR, and a facility type dropdown — giving the user meaningful control over their search without overwhelming the interface. The prominent green \"Cari Kost\" CTA is impossible to miss, driving the next action with clarity."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The dual Samsung Galaxy mockup presentation — one home, one search — communicates a complete, coherent user flow across two screens, demonstrating strong information architecture instincts and a UI that prioritizes speed-to-result above all else."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A property tech app design that understands its user: a student or worker who needs the right room, in the right place, at the right price — and needs to find it fast."}]}]}

UI-UXappmobile

Development

Maxfit

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Your gym, your schedule, your goals — Maxfit puts a complete fitness coaching system in the palm of your hands, built with React Native from the ground up."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/maxfit.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Mobile App Design & Development — Maxfit"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Fitness & Workout App · React Native · JavaScript"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, focused fitness workout application built with React Native — Maxfit delivers a cross-platform mobile experience that organizes the full spectrum of physical training into a single, intuitive interface. The app demonstrates the power of React Native to produce a genuinely native-feeling fitness product from a unified JavaScript codebase."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The home screen leads with a full-width workout photography hero — a dynamic weightlifting image that sets the motivational tone from the first tap. Below, the app's core navigation is organized into a clear 2×2 category grid: Lifting, Gymnastic, Cardiovascular, and Calisthenics — four workout disciplines covering the complete range of modern fitness training. Each category is represented by a clean pictogram icon on a white card, creating a UI that is immediately scannable and gesture-friendly for users mid-session with sweaty hands."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The bottom navigation bar provides quick access to home, workout log, progress tracking, and statistics — a considered information architecture that anticipates the real user journey: plan, train, track, improve. The Android-native navigation bar beneath confirms the app's platform commitment, while the React Native foundation ensures the same experience translates seamlessly to iOS."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The two-handed phone holding mockup against a clean neutral background is a strong presentation choice — it communicates a product built for real, active use, held the way a person actually holds their phone during a workout."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A fitness app that keeps its UI as disciplined as the training it supports — clean, purposeful, and built to perform."}]}]}

DevelopmentMobileMobile App

UI-UX

Heffen - Website

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The Little & The Horns — Heffen Merch's website lives in the same dark, aggressive visual universe as the clothing it sells."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/small/ML8e4lPf_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — Heffen Merch"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Clothing & Merchandise Website · Metal / Dark Streetwear"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A full-commitment dark merchandise website for Heffen Merch — a clothing brand rooted in metal and underground culture. The design doesn't try to appeal to everyone, and that's exactly the point."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero leads with \"The Little & The Horns — Terror of this April\" against a distressed black background with an intricate skull illustration — raw, hand-drawn, and unmistakably metal. The red \"Get This\" CTA is the only burst of color in an otherwise monochromatic composition, and it works precisely because of that contrast."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The \"Heffenmerch\" logotype in a custom display typeface communicates brand identity with the same energy as a band logo — designed to be recognizable on a shirt from across a mosh pit. Navigation — Products, Custom Order, Lookbook, Review, Imprint, FAQ — confirms a fully operational merch store with custom ordering capabilities."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A website that earns its credibility by looking exactly like its customer base — zero compromise, full attitude."}]}]}

UI-UXWebWebsite

Illustration

Creator Pose

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Sunglasses on, gold chain gleaming, content icons orbiting like satellites — this is the Creator Pose, and it communicates in a single image what it feels like to be at the top of your creative game."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/details/239-creco/ilus-3.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Illustration — Creator Pose"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Character Illustration · Process Sheet · Creco Platform · Content Creator"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A confident, personality-packed character illustration for the Creco platform — presenting a male creator in his element: cool, self-assured, and unmistakably in his era. Presented as a four-stage process sheet that reveals the complete illustration journey from gestural sketch to polished final render."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The character is a young man in a deep blue Creco-branded hoodie — the platform's logo badge displayed on the chest — dark sunglasses resting on his face with the casual authority of someone who chose them, not wore them. A thick gold chain sits at his collar, hand raised to his chin in a thinking-or-posing gesture that reads as both: this is someone who creates deliberately, who curates himself as much as his content. The expression is considered, slightly mysterious — a creator who lets the work do the talking but knows how to enter a room."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Orbiting the figure: dark navy icon shapes — user profile silhouettes, content badges — and golden four-pointed sparkle stars that explode outward in a celebration of creative energy. The icon elements communicate the platform ecosystem; the sparkles communicate what it feels like when the platform works for you — when content lands, when the audience shows up, when the algorithm becomes a collaborator."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The four-panel process grid traces the work from loose pencil sketch (top-left) through refined pink linework (top-right) into flat blue color blocking (bottom-left) and the final shaded, lit render (bottom-right) — the full craft visible, the deliberateness unmistakable."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A character illustration that captures the creator economy's aspiration in a single confident pose — because the best creators don't just make content, they embody it."}]}]}

Illustrationcreatorpose

UI-UX

Hyperfantasy Web Design

{"type":"doc","content":[{"type":"image","attrs":{"src":"https://hyperfantasy.web.app/assets/images/portfolios/fd5a2635-158f-4e05-9a1c-0c720732e9a3/display_web_hyperfantasy.png","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://hyperfantasy.web.app/assets/images/portfolios/fd5a2635-158f-4e05-9a1c-0c720732e9a3/web_home_hyperfantasy.png","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/pd/hyperfantasy_square.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"Hyperfantasy Web Design"},{"type":"hardBreak"}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/8414462/avatars/normal/440c89cb507f4f9d2aa912e569bf1b47.png?1629696498","alt":null,"title":null,"width":1140,"height":1140}},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"paragraph","attrs":{"textAlign":"center"},"content":[{"type":"text","text":"January 14, 2022"}]}]}

UI-UX

Branding

Juanita Logo

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Where beauty meets boutique — Juanita is the salon brand that makes every woman feel like she walked into her own fairytale."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/iUU75IOT_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Brand Identity — Juanita"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Logo Design · Boutique & Salon · Beauty & Lifestyle"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A romantically feminine brand identity for Juanita Boutique & Salon — a beauty destination that combines the indulgence of a salon with the charm of a boutique, all wrapped in one graceful visual mark. The logo is a composition of layered elegance: expressive, floral, and unapologetically feminine."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The icon is a stylized silhouette of a woman's figure — tall, slender, and poised — rendered as a flowing abstract form that simultaneously reads as the letter \"J,\" the initial of the brand name. The double reading is seamless and satisfying: a monogram that is also a person, a letter that is also a pose. At the crown of the figure, a four-leaf clover motif adds a note of luck and charm, while delicate sakura-like blossoms scatter at the base — grounding the mark in natural beauty and feminine grace."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The wordmark \"Juanita\" is set in an expressive, flowing calligraphic script with heart accents dotting the letter \"j\" — a small but telling detail that injects warmth and personality into the typography. The tagline \"Boutique & Salon\" sits beneath in a lighter script, clearly communicating the dual nature of the business without competing with the main wordmark."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The single fuchsia-pink palette — warm, vivid, and distinctly feminine — is the perfect color choice for a beauty brand targeting women who want to feel celebrated. Applied consistently across the icon and wordmark on a clean white textured paper mockup, the identity radiates the kind of warmth that makes a client feel welcome before she's even walked through the door."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A salon brand identity that is as beautiful as the transformations it promises."}]}]}

Brandinglogosalon

Illustration

Sharing Session Organizer

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Behind every great sharing session is a team that makes it happen — this illustration captures the organizers who kept the Tokopedia trainee program running with energy, coordination, and a megaphone full of enthusiasm."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/pd/3/pdx-7.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Illustration Design — Sharing Session Organizer"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Event Illustration · Tokopedia Trainee Program · Internal Communication"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A dynamic, role-driven character illustration created during the Tokopedia Trainee Program — celebrating the organizing team behind the program's sharing sessions: the unsung crew who plan, coordinate, and hype every knowledge-sharing event from behind the scenes and at the front of the room."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The three characters are rendered in a sticker-style flat illustration with confident, energetic poses that communicate a team in motion — not sitting still, not waiting — actively making things happen. Each figure carries a prop that defines their role with visual clarity: the left character holds a clipboard and wears a signature green Tokopedia cap — the planner, the detail person, the one who knows exactly what needs to happen next; the center character holds a microphone with both hands, headset on, mid-speech — the host, the connector, the voice of the session; the right character raises a megaphone with a thumbs-up energy — the amplifier, the promoter, the one making sure everyone in the building knows something great is happening."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"All three wear matching dark grey shirts and black pants — a uniform that signals unity and team identity while keeping the character design clean and scalable across digital and print contexts. The sticker-style white outline frames the group as a portable badge — usable across program decks, event posters, internal Notion pages, and digital invitations."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An illustration that turns an event organizing team into characters worth remembering — because good programs don't run themselves."}]}]}

Illustrationvectorevent

Illustration

Police Against Hoax About Virus

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A bold editorial illustration that puts law enforcement at the frontline of the infodemic — stopping the spread of virus hoaxes before they cause more harm than the virus itself."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/5057025/screenshots/11013375/media/7243fc056e0ce48e9ede3e2dae33f158.jpg?compress=1&resize=1200x900&vertical=top","alt":null,"title":null,"width":1000,"height":750}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Illustration — Police Against Hoax About Virus"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Vector Illustration · Editorial · Public Health · Social Commentary"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A conceptual vector illustration depicting a police officer taking a firm stance against the spread of virus-related misinformation across online and social media platforms. The composition frames law enforcement not as a physical protector, but as a guardian of public information — blocking the chain of hoax content that proliferates during a global health crisis."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The illustration uses clear visual metaphors to communicate its message: authority, prohibition, and digital media collide in a single scene that speaks to the real-world consequences of unchecked misinformation during a pandemic. The character design and flat vector style keep the tone authoritative yet accessible — serious enough to carry the message, clean enough to work across editorial, campaign, and educational contexts."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A timely piece that captures one of the defining social challenges of the pandemic era: not just fighting the virus, but fighting the lies about it."}]}]}

IllustrationPolicePandemic

Illustration

Hazmat Suit Researching Virus

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vector illustration that represents health workers and researchers who are researching a virus."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/5057025/screenshots/11031453/media/111875ae19f248eaf81d51edf5c00641.jpg?compress=1&resize=1200x900&vertical=top","alt":null,"title":null,"width":1000,"height":750}}]}]}

Illustration

Branding

Wind Lion

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Bold as a lion, smooth as the wind — Windlion Coffeeshop is the brand that commands your morning before the first sip."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/windlion.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Brand Identity — Windlion Coffeeshop"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Logo & Packaging Design · Coffee Shop · F&B Retail"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A commanding, character-driven brand identity for Windlion Coffeeshop — a coffee brand that wears its personality with the same quiet confidence as the animal at its center. The identity is built around a single, powerful image: a lion, rendered in fine engraving-style illustration, set within a structured crest frame that signals heritage, quality, and craft."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The logomark is a detailed, hand-etched lion portrait — mane flowing with wild elegance, gaze fixed with calm authority. The illustration style draws from vintage apothecary labels and artisan food packaging, communicating a brand that takes its craft seriously and respects the traditions of great coffee. Enclosed within a shield-like crest, the mark has the weight and legitimacy of a brand that has been around long enough to earn its reputation."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The wordmark \"WINDLION\" is set in a bold, condensed uppercase serif directly beneath the crest — strong, grounded, and legible at cup-sleeve scale. The tagline \"Coffeeshop\" sits in a lighter serif below, flanked by three coffee bean icons that add a subtle product reference without interrupting the mark's authority."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The entire identity is executed in a strict monochromatic black-and-white system — a deliberate choice that ensures maximum versatility across cup sleeves, packaging, signage, and merchandise, while projecting a sense of premium restraint. On the takeaway cup mockup, surrounded by scattered coffee beans, the logo performs exactly as a great coffeeshop brand should: instantly recognizable, quietly confident, and deeply craveable."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A coffeeshop identity with the soul of a classic and the presence of a predator."}]}]}

Brandinglogocoffee

Illustration

Hippo Team

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Every great mentoring group has a story — and the Hippo Team's starts with a mentor who loves hippos so much, one ended up in the illustration."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/pd/2/hippo-bg-clean-square.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Illustration Design — Hippo Team"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mentoring Group Mascot · Tokopedia Trainee Program"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A warmly personal group illustration created during the Tokopedia Trainee Program — capturing the Hippo Team mentoring group in full character, complete with the detail that makes this piece genuinely one-of-a-kind: a tiny purple hippo perched on the mentor's shoulder, waving cheerfully at the viewer."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The story behind the hippo is the heart of the illustration — the mentor's well-known love of hippos became the group's identity, the source of its name, and ultimately its mascot. The result is a piece of design that isn't just a team badge; it's a memory, a private joke made permanent, a shared reference that will make every member of the group smile for years after the program ends."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The mentor is rendered at the top center — long dark hair, a charming straw hat, peace sign raised — the figure of warmth and guidance around whom the group orbits. The three mentees cluster below: a green-cap-wearing trainee with a notebook and pen (the documenter), a wide-eyed mentee with a fork and spoon (the foodie of the group, perhaps), and a third holding a bicycle wheel (the cyclist). Each prop is a character detail — a nod to the real personalities in the group, encoded into the illustration with affection."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The \"HIPPO TEAM — Mentoring Group\" banner at the base is set in a bold, friendly display typeface on a forest green ribbon, framed by leaf elements that give the badge a natural, club-crest quality."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"An illustration that captures something rare in professional design work — a genuine relationship, rendered with craft and care."}]}]}

Illustrationvectorhippo

UI-UX

NEA

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Caring for the Environment Together in a Clean & Green Singapore — NEA's website design reflects the quiet, organized precision of a government agency that actually delivers on its mandate."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/upucuDho_work_image.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — NEA (National Environment Agency)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Government Portal · Singapore Environment Agency · Public Services"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, information-dense government portal design for Singapore's National Environment Agency — responsible for weather, air quality, public health, and waste management across the island."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero is a full-bleed photograph of lush tropical tree canopy — green, dense, unmistakably Singapore — overlaid with the mission statement \"Caring for the Environment Together in a Clean & Green Singapore.\" No embellishment needed: the image is the message."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A live weather widget in the lower right corner — 24–33°C forecast — delivers immediate real-world value on the homepage without competing with the broader content hierarchy. The NEA logo with its characteristic leaf-wave mark anchors the header alongside a Singapore Government red masthead badge."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The mega navigation — Weather & Climate, Public Health, Air Pollution & Radiation Protection, Grants & Programmes, Energy & Waste, Events & Awards, Training & Education, News & Forms — maps a genuinely wide-scope agency without overwhelming the homepage."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Government design at its best: informative, accessible, and completely in service of its citizens."}]}]}

UI-UXWebsiteWeb

Branding

Logo Design 2021 - 2021

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"One mark, two reads — a duck and a musical note fused so perfectly you'll wonder how no one thought of it sooner."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/pd/logo-2021/lokajaya-design-3.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Logo Design — Ducknote Musics"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Logo Design · 2021 Compilation · Music Brand"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A standout logo from the 2021 design compilation — and one of the most conceptually satisfying dual-meaning marks in the portfolio. The logomark is simultaneously a musical eighth note and a duck in profile: the note's head becomes the duck's body, the stem its elegant neck, the flag its beak raised mid-quack. The negative space between form and counter-form seals the illusion perfectly."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Executed in pure black on white — no color, no decoration, no distraction — the mark proves that the strongest ideas need nothing added to them. Bold, witty, and instantly memorable."}]}]}

BrandingLogo

Illustration

The Bassist

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Before the screen, before the stylus — just a pencil, a sheet of paper, and a bassist who looks like he's been playing since before he had skin."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/small/akaiWYLr_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Sketch Illustration — The Bassist"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Hand-Drawn Pencil Sketch · Personal Artwork · Music & Character Art"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A raw, energetic pencil sketch capturing a heavy metal bassist in full character — wild dreadlocks flying, skull face grinning, bass guitar raised defiantly in one tattooed hand. The piece is presented exactly as it was made: clipped to a binder clip on a wooden surface, pencil and eraser resting beside it — the tools of a drawing session preserved without filter or apology."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The character design is pure metal iconography: a skeletal figure with long, chaotic hair that merges with the overall composition's frantic linework, wearing a button-up shirt with visible tattoos creeping up the arms, sneakers planted on the ground, and a bass guitar held like a weapon or a trophy — with the same intensity either way. The Geonk tag is hand-lettered in a thrash metal logotype style in the upper left, asserting authorship in the language of the subject."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The sketch technique is confident and loose — lines stack and repeat, shadows build through hatching, and the anatomy bends toward expressiveness rather than accuracy. This is character art that understands its genre: metal doesn't clean up for anyone, and neither does this drawing."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A piece that belongs to the part of the portfolio that predates software, clients, and deliverables — where drawing was just drawing, and the only brief was whatever was loud in the headphones that afternoon."}]}]}

IllustrationSketch

Illustration

Javanese Unsmile

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"She wears the crown of Javanese tradition and the gaze of something ancient — Javanese Unsmile is a t-shirt illustration that turns cultural identity into haunting, wearable art."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/javanese-unsmile.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"T-Shirt Illustration — Javanese Unsmile"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Apparel Design · Cultural Illustration · Original Artwork"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A striking, deeply atmospheric t-shirt illustration that reimagines Javanese feminine identity through a lens of quiet, unsettling beauty. \"Javanese Unsmile\" presents a traditional Javanese woman adorned in full ceremonial headdress — elaborate golden ornaments cascading in layers of flowers, pendants, and decorative chains — rendered in vivid yellow against a deep black tee, creating a composition of maximum visual contrast and cultural weight."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The figure's expression is the work's defining tension: hollow, shadowed eyes that carry no warmth, no invitation, no performed happiness — just a steady, unflinching gaze that refuses the expectation of the smile. It is a deliberate subversion. Javanese feminine beauty is often associated with grace, softness, and serene expression; \"Unsmile\" disrupts that expectation with a figure who wears every ornament of her tradition while offering none of its deference."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The illustration style draws from both wayang and Art Nouveau traditions — highly decorative, symmetrical, and detail-rich, with a flat two-color execution in yellow and white on black that gives the design its graphic power and screen-print readiness. The batik-patterned drape across the figure's body reinforces the cultural grounding, while the gloved hands add an anachronistic, theatrical dimension."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The \"JAVANESE UNSMILE\" title is lettered in a custom display typeface at the base — bold, slightly eroded, the typography of a brand that knows exactly what it's saying and is comfortable making you feel it."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A wearable artwork that carries cultural pride, quiet resistance, and genuine artistic intent in every thread."}]}]}

IllustrationCulturet-shirt

UI-UX

Karmagroup Dark

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Discover the World With Karma — this desktop web design puts Karma Kandara's clifftop infinity pool front and center, and makes booking your next luxury escape feel like the easiest decision you'll make today."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/karmagroup-dark.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Web Design — Karma Group Dark"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Luxury Hospitality Website · Desktop · Full-Width Booking Interface"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A cinematic, full-bleed desktop website design for Karma Group — presenting the brand's flagship visual identity: \"Discover the World With Karma. We Create Experience.\" The dark MacBook mockup presentation gives the design a premium, editorial quality that mirrors the hospitality brand it houses."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero is Karma Kandara, Jimbaran Bali — a sweeping golden-hour photograph of the resort's iconic clifftop pool pavilion, warm amber stone architecture glowing against a deep blue twilight sky, the Indian Ocean visible beyond. The property label \"Karma Kandara Jimbaran Bali\" confirms the location while the photography communicates everything words cannot about what this resort feels like."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"\"Find Luxury Hotels and Resorts for your Next Vacation\" leads the hero copy — broad enough to serve the full multi-property portfolio, specific enough to speak to the traveler's aspiration. \"Discover the World With Karma\" in bold display type and \"We Create Experience...\" in gold italic script deliver the brand's positioning with restraint and elegance."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The booking widget anchored to the lower hero is direct and functional: Destination selector, Date range picker (Tue Aug 27 — Wed Aug 28), and a gold \"Book Now\" CTA — the conversion flow embedded in the hero without interrupting its visual authority."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The full navigation reveals the complete brand ecosystem: Destinations, Inspiration, Exclusive Offers, Spa & Wellbeing, Karma Beach, News & Events, Contact Us — with Karma Moments, Membership, Chat, Email, and Member Login in the utility header. The \"Book Online\" button in blue provides a contrasting conversion anchor at the top right."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A luxury hospitality desktop web that earns its premium positioning in every pixel — from the property photography to the gold booking CTA."}]}]}

UI-UXHospitalityresort

Development

Mekar

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Describe your business, watch your web app bloom — Mekar turns ideas into fully functional React + Spring Boot applications without writing a single line of code."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/mekar.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Smart Generator — Mekar"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Web App Design · Automatic Web App Generator · React & Spring Boot Platform"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A clean, optimistic product design for Mekar — a no-code web application generator platform that does something genuinely revolutionary: you describe your business model in plain language, and Mekar automatically generates a fully functional web application powered by React on the frontend and Spring Boot on the backend."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The name \"Mekar\" — Indonesian for \"to bloom\" — is the perfect metaphor: you plant a seed of an idea, and a complete digital product flowers from it. The visual identity carries this metaphor through a soft green-to-teal gradient hero section, accented with subtle floral pattern elements that echo the brand name and its organic, generative spirit."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The hero headline \"Pretty Web App Generator\" is positioned above a three-feature icon row — Quick, Simple, and Scalable — communicating the platform's core value proposition in the most direct terms possible. The UI is deliberately light, airy, and approachable, signaling that this is a tool built for founders and business owners, not developers. The navigation (\"Home,\" \"About Mekar,\" \"Login,\" \"Data\") is minimal and purposeful — keeping the focus on the product's singular promise."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Presented in a premium desktop monitor mockup, the design demonstrates how a technically complex platform can wear a calm, inviting face — reducing the intimidation of app development to something that feels as natural as describing your own business."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A product that makes the complex feel effortless — and a design that makes that promise believable at first glance."}]}]}

Developmentwebapp

Illustration

Zombrema Sketch

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Undead, undeniably cute, and completely unhinged — Zombrema is the sketch that proves horror and charm are just two pencil strokes apart."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/small/TTwEbvoY_work_image.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Sketch Illustration — Zombrema"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Hand-Drawn Pencil Sketch · Original Character · Horror Comedy"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A raw pencil sketch introducing Zombrema — an original character that sits at the delightful intersection of chibi cute and zombie grotesque. The design leans into the contradiction fully: a round, wide-eyed head with wild spiky hair and Frankenstein bolt details, paired with an exposed rib cage, decaying clawed hands, and a toothy grin that's equal parts adorable and unsettling."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The character is emerging from the ground — the classic zombie rising pose — surrounded by jagged earth and debris rendered in loose, energetic linework that spills into the lower half of the page. The hands reach forward with exaggerated clawed fingers, yet the oversized chibi eyes and chubby proportions keep the character endearing rather than genuinely threatening. This is a zombie you'd put on a sticker."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The \"Zombrema\" tag is hand-lettered in a loose graffiti-metal style at the base — the name as much a visual element as a label, scrawled with the same expressive energy as the character above it."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Presented on paper, pencil and eraser resting beside it on a warm wooden surface, the sketch is captured as a work-in-progress artifact — honest, unfinished, and entirely itself. The kind of character that starts with a doodle in the margin of a notebook and ends up with its own universe."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A sketch that makes you smile at something that probably shouldn't be smiled at — and that's exactly the point."}]}]}

Illustrationsketch

UI-UX

Podcast Platform - Landing Page Hero

{"type":"doc","content":[{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/11487733/file/3fdb2fe1543646d2f5bc231a1e5dd079.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Hey Friends 👋"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Today I'll share the results of my design of Podcast Platform - Landing Page Hero Section Design (RPM)."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Press the heart icon if you like it. Cheers! ✨"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Have a great project idea?"},{"type":"text","text":" Let us know ✅"},{"type":"hardBreak"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Services we provide:"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🖼️ UI Design | 😄 UX Design | 🎉 Illustration | 🛍 Brand Identity | 📝 Graphic Design | 🌐 Web Development | 📱 Mobile App Development"},{"type":"hardBreak"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Thanks!"}]}]}

UI/UXpodcast

Illustration

Vulnerable People Group

{"type": "doc", "content": [{"type": "heading", "attrs": {"level": 1}, "content": [{"type": "text", "text": "Vulnerable People Group"}]}, {"type": "paragraph", "content": [{"type": "text", "text": "Vector illustration of 3 groups of people that could be infected with the COVID-19 virus"}]}, {"type": "paragraph", "content": [{"type": "image", "attrs": {"src": "https://cdn.dribbble.com/users/5057025/screenshots/11031477/media/1beb13687d13c5ff38bddfb0a31f7243.jpg?compress=1&resize=1200x900&vertical=top", "width": 1000, "height": 750}}]}]}

Illustration

UI-UX

Autocom ELEGANT

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Your Powerful Auto, High-Class Car Parts — Autocom's Elegant proposal trades the workshop for the showroom, wrapping industrial spare parts in the visual language of luxury automotive."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/details/252-autocom//previews/app/ELEGANT-APP-home.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"App UI Design — Autocom (Elegant Visual Proposal)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Mobile App · Industrial Spare Parts Marketplace · Heavy Machinery & Automotive"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The Elegant counterpart to the Masculine proposal — same product, entirely different visual register. Where Masculine goes bold red-on-navy, Elegant goes cinematic black-on-black with gold accents, letting a gleaming BMW front grille carry the hero's full emotional weight."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"\"Your Powerful Auto / High-Class Car Parts\" lands differently here — less workshop, more showroom. The full-bleed dark automotive photography, the gold \"Your Powerful Auto\" eyebrow text, and the deep charcoal background position Autocom as a premium parts destination, not just a catalog. A thin gold vertical rule adds a subtle luxury detail that signals premium without announcing it."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Featured Products below maintains dark card backgrounds — Fog & Driving Lights at Rp. 49,000 and Rp. 59,000 — with product photography that reads as engineered objects rather than commodity parts. The IDR pricing (vs USD in Masculine) confirms localization for the Indonesian market."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Two directions, one platform — Masculine for the heavy industry buyer, Elegant for the automotive enthusiast. Both designed to convert."}]}]}

UI-UX

Branding

Yin Da Branding

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Gold on charcoal, craft in every curve — Yin Da Indah Property's brand identity speaks the language of luxury real estate before a single word is read."}]},{"type":"image","attrs":{"src":"https://farooq-agent.web.app/assets/images/works/large/a2mcSgYa_work_image.jpg","alt":null,"title":null,"width":1140,"height":1140}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Logo Design — Yin Da Indah Property"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"italic"}],"text":"Brand Identity · Real Estate · Luxury Segment"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"hardBreak"},{"type":"text","text":"A refined brand identity crafted for Yin Da Indah Property, presented here as a dark-surface mockup that immediately communicates premium positioning. The mark is rendered in gold against a deep charcoal black card — a deliberate pairing that signals luxury, trust, and architectural distinction."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The icon is a geometric mandala-inspired emblem built from interlocking petal-like forms, creating a symmetrical, floriated knot structure. The layered linework gives the mark a sense of depth and craftsmanship — evoking both the ornate detail of fine architecture and the cultural richness of Indonesian heritage. The rotational symmetry suggests balance and permanence, qualities deeply resonant in property and real estate."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The wordmark \"Yin Da\" is set in a clean, modern serif with generous letter-spacing, exuding confidence without ostentation. The tagline \"Indah Property\" sits below in a lighter weight, providing context with quiet elegance."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The mockup presentation on a textured dark card surface is a strong portfolio choice — demonstrating not just the mark itself, but an understanding of how brand identity performs in real-world, tactile contexts."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A mature, market-ready logo that positions the brand firmly in the premium real estate space."}]}]}

Brandinglogoproperty

UI-UX

Vaksini - Website

UI-UXVaccineWeb

UI-UX

Vaksini - Mobile App

UI-UXVaccineApp

Branding

Vaksini Logo Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"VAKsin + SINI"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vaksini, a mobile application design concept to help the Covid-19 vaccination process in Indonesia easier, more reliable, and integrated."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/8414462/screenshots/16294202/media/702fd2eb7950c5a03f2122ff5ae8dd85.jpg","alt":null,"title":null,"width":null,"height":null}},{"type":"horizontalRule"},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/33031590/file/original-b9a29b10dc8892e2852981d48c42fffa.jpg?resize=2048x1536&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/33054079/file/original-d9393b338b8fee61d0632a6ea4dcf876.jpg?resize=2048x1536&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/33063338/file/original-1798375adc2ca7cbebe06a8f16c7405e.jpg?resize=2048x1536&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/33079583/file/original-102c7af85665457ebf8425f2bb72b587.jpg?resize=2048x1536&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/33079580/file/original-5a353cbc1ff08fe601342528c9906241.jpg?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Have a great project idea?"},{"type":"text","text":" Let us know ✅"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Services we provide:"},{"type":"hardBreak"},{"type":"text","text":"🖼️ UI Design | 😄 UX Design | 🎉 Illustration | 🛍 Brand Identity | 📝 Graphic Design | 🌐 Web Development | 📱 Mobile App Development"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Thanks!"}]}]}

BrandingVaccinebrand

Branding

Nomadstay Logo Design

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A logo that says \"home\" and \"journey\" in the same breath — the Nomadstay mark is a house, a letter, and a traveler's path, all in one continuous line."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/users/8414462/screenshots/17216266/media/b1c288ff145b3b714f18f5ff71881381.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Logo Design — Nomadstay"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"Brand Identity · Logo · Properties & Travel App"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The Nomadstay logo is built around a single continuous line — a clever dual-reading mark that simultaneously reads as a house rooftop and the letter \"N.\" The two legs of the form curve inward at the base with rounded terminals, giving the mark a fluid, organic quality that feels modern without being cold. It communicates both the stability of a home and the movement of a nomadic lifestyle — the exact tension the brand lives in."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The clean sans-serif lowercase wordmark \"nomadstay\" sits directly below, balancing the mark's geometric precision with approachable softness. Presented on a deep slate-blue gradient background, the white-on-dark treatment gives the logo an aspirational, premium quality — confident enough for a travel and property platform that wants to be taken seriously without sacrificing warmth. A minimal, elegant brand mark that scales from app icon to billboard without losing its identity."}]},{"type":"horizontalRule"},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2582564/file/original-2711e9af05d94fd1e58004a68c330a67.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2585241/file/original-4307a93ccc64df2b2f4c4bd4d8cdde72.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2585242/file/original-82c93404996e77040524e0f6d7b14e4a.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2585240/file/original-b629f1bcb9b4b4875a9872e121dad3fe.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2585244/file/original-d5b543c38599afb9e2ec5935f7509ec3.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2585239/file/original-62f05ba6b076175ec82c593cff3af3af.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2585243/file/original-e5090210e045eb7d9642d5380080cd07.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":"center","level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"AVAILABLE FOR NEW PROJECT"}]},{"type":"paragraph","attrs":{"textAlign":"center"},"content":[{"type":"text","text":"🖼️ UI Design | 😄 UX Design | 🎉 Illustration | 🛍 Brand Identity | 📝 Graphic Design | 🌐 Web Development | 📱 Mobile App Development"}]}]}

Brandingacommodationapp

UI-UX

Nomadstay

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Nomadstay is a brand of Properties and Travel App, which aims to help travelers or newcomers to easily find a place to stay, whether for a temporary stay or a long stay."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2582828/file/original-0f841afee9aae886bf5727f7f9fc2cb2.png","alt":null,"title":null,"width":null,"height":null}},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":"center","level":1},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"USER EXPERIENCE"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Background"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Everyone needs a job. The job sometimes require people to move from one city to another, even across countries. The question that often arises is how do we adapt to the many factors in a new place. Living costs, housing, culture, transpotation, etc. It takes a lot of time and effort to do research as to what kind of place we are going and how to plan for the future life in a new place. In fact, sometimes people are reckless and take risks until they finally feel uncomfortable in new place."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Brief"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"We need an app that can show people places to live that can be rented or purchased. Then the user can find out all the details about the place that will be their residence such as living cost, housing, surrounding facilities, culture, transportation, etc."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"User stories"}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2591146/file/original-f07ff54c7f380f889f06b9674ace6cb4.png?resize=1504x1128&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Case 1"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Adi (27 years old) is an employee in an office in Surabaya, and needs to meet some clients in Jakarta for a presentation. The official trip will take about 2 days in Jakarta."},{"type":"hardBreak"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Case 2"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Magdalena (25 years old) is an employee at a large startup in Jakarta, and WFH. Wanting to experience a new atmosphere, Magda wanted to stay in Bali for 4 weeks for work as well as vacation."},{"type":"hardBreak"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Case 3"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Marvel (23 years old) is a fresh graduate in Malang who was accepted as a contract employee for 6 months at a company in California, USA. After the visa & other matters are completed, Marvel has to move to San Jose, California, USA in 3 months."}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Hook Model"}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2591145/file/original-92709f3b7c9feac4aa2154a2f08a24ee.png?resize=1504x1128&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"How Might We"}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2591144/file/original-5debdbd47c8864b330f643a9abf5d94a.png?resize=1504x1128&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Flow"}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2591147/file/original-f74ee4bc78ba25a6735ba5bbcb8eb850.png?resize=1504x1128&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":"center","level":1},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"USER INTERFACE DESIGN"}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2582829/file/original-63ca51b89aa859d609342ee52e084435.png?resize=1504x1128&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2591070/file/original-a8edf3ad5b915bf57c36954391c593c7.png?resize=1504x1128&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Discover, search, filter & find accommodation"}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2591071/file/original-7ba9094c036130aca01d5d9b523a440f.png?resize=1504x1128&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Search result, details & virtual tour"}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2591074/file/original-5b72e691bcdc3d0759fed42aa78a93db.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Accommodation details"}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2591068/file/original-a364dce26f00d096fe62c431031aa20b.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Accommodation detail UI comparison"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"There is a slight difference in content when users have determined their destination or not (just looking at accommodation details)."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"If you have determined the destination point, there will be additional information such as how far it is from the accommodation location, even the estimated price of transportation between the two points. Meanwhile, if you have not determined the point, the additional information is not available."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2591069/file/original-8ed8a983904cbf2a2e27e76c8f3a2782.png?resize=1504x1128&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Payment"}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2591073/file/original-8445b55196e5449234c8f9ad221c6787.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":"center","level":1},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"CONCLUSION"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"With Nomadstay, traveling to a new place, temporarily or for a long time, becomes more calm and pleasant, because it is easy to obtain accommodation information at the destination along with supporting information."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/2591072/file/original-537c2ec308f24a1c3df8cef9974c3025.png?resize=1504x1128&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":"center","level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"AVAILABLE FOR NEW PROJECT"}]},{"type":"paragraph","attrs":{"textAlign":"center"},"content":[{"type":"text","text":"🖼️ UI Design | 😄 UX Design | 🎉 Illustration | 🛍 Brand Identity | 📝 Graphic Design | 🌐 Web Development | 📱 Mobile App Development"}]}]}

UI-UXtravelhotel

Branding

Logo Design - Ma'em Food Delivery Brand

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A bold wordmark that tastes as good as it looks — Ma'em's coral-orange display type and diamond accent mark make food delivery feel like a brand worth remembering."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223593/file/original-8c70ce82e7e2fc4330a0fae3cc629344.png","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"🍔 Hello Food Lovers,"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"This is my exploration about \"Logo Design\" of Ma’em - Food Delivery Service Mobile App."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223594/file/original-5f9408930bcdbeb712e3680e034c2d7b.png?resize=1504x1128&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223595/file/original-6dd4f17e8c03267e7766faa02d0fb922.png?resize=1504x1128&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223598/file/original-922b7b8a6f4e84859f107134b44eb819.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223596/file/original-d55ea6a7d5ae06e85e921497b7b4e5bb.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223599/file/original-3c561b66a3d525c78b8c1816600ccb9a.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223597/file/original-5c89b75d6cae323d0c704f1255fd9ed4.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Have a great project idea?"},{"type":"text","text":" Let us know ✅"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Services we provide:"},{"type":"hardBreak"},{"type":"text","text":"🖼️ UI Design | 😄 UX Design | 🎉 Illustration | 🛍 Brand Identity | 📝 Graphic Design | 🌐 Web Development | 📱 Mobile App Development"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Thanks!"}]}]}

BrandingLogoBrand

UI-UX

Ma’em - Food Delivery App

{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"A food delivery app that answers the hungry scroll with speed and clarity — find a meal, place an order, and get it delivered before the craving fades."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223425/file/original-e4ec2c93d78160d853ff4f41d0bb60c2.png","alt":null,"title":null,"width":null,"height":null}},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"One sunny morning, it happened again..."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Yongki, a student who lives in the boarding house, just woke up and was shocked when he saw that it was already 10 am."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223458/file/original-ee7638400f7c3df958dcf63ce5a191e5.png?resize=1504x1128&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Woke up at that hour, Yongki felt hungry, Yongki thought "},{"type":"text","marks":[{"type":"italic"}],"text":"“What should I eat? The breakfast restaurants have run out and are closed, while the lunch restaurants haven't opened yet.\""}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"},{"type":"italic"}],"text":"OK, let's stop here!"},{"type":"text","text":" What can we do to help Yongki not starve? "},{"type":"text","marks":[{"type":"italic"}],"text":"Let's go!"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Problems"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Yongki is a boarding house boy, who doesn't have any cooking utensils and ingredients to cook"}]}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Yongki wakes up at the wrong time, not breakfast time nor lunch time"}]}]}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Looking for solution ideas for Yongki"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Help Yongki get food without the hassle of cooking"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Tell Yongki which restaurants are still open in the vicinity and serve food at 10 am"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Deliver food from restaurants that Yongki is interested in, so that Yongki doesn't have to drive far when he's hungry"}]}]}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223449/file/original-b87fee0a547df55a5286efbd7e3b35f5.png?resize=1588x1191&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223450/file/original-02c58c4c3197d83f702d0e800e0d978f.png?resize=1588x1191&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223454/file/original-978372a5defdcc2049ce52535618c758.png?resize=1588x1191&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Let's work with big data (artificial intelligence)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"According to the story above, this is not the first time Yongki has ordered food at 10 am, all of Yongki's orders have been recorded in Ma'em's database so this pattern will be easily seen. By utilizing this pattern, Artificial intelligence compiled by big data owned by Ma'em will be able to be used to display a special banner that will appear on Yongki's Home Screen and all users who have the same habits as Yongki, for example, often wake up at 10 am → hungry → order food delivery. They will get information that there are restaurants that actually provide Brunch (breakfast and lunch) menus."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The same pattern can also be applied in other cases, for example if it is found that users often buy food late at night (above 10 pm). They will get information that there is a restaurant that actually provides a Supper menu (meal at late night)."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"By looking at this data, it is very open to see other patterns made by users, and once again opens up opportunities for Ma'em to make other innovative breakthroughs."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223474/file/original-b2f3f8222651198ca4a1e9cbbdef2261.png?resize=1588x1191&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"The benefits obtained are as follows:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"For users: Users who are hungry from 10am to 12pm or when the night is past 10pm will still be able to enjoy the food they need when hungry at inopportune times"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"For merchants (restaurants): Restaurants that are open at non-meal hours or even provide special Brunch or Supper food will still be easy to find and order by the right users so that sales will also get better"}]}]}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223453/file/original-f71768b10b400b61f90f591aecb99641.png?resize=1588x1191&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223448/file/original-bcb006a672840d2886605b183d5cf591.png?resize=1588x1191&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223452/file/original-5cbd21e3e17e2ddb1d02278d8f175049.png?resize=1588x1191&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Custom navbar to increase user awareness"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"When you have processed the order payment, one of the things that the user is sure to do is to monitor the orders that have just been made. To help users more easily find and monitor the ongoing order process, we provide a special UX for the bottom nav bar."}]},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"The design is as below..."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223475/file/original-cca194d56bd65a269f0d12f95b1af563.png?resize=1504x1128&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223451/file/original-4b28e5e4680cfd26f85a2817622fc063.png?resize=1588x1191&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223456/file/original-5a488207eab716c81459ef2c1c3456ba.png?resize=1588x1191&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223455/file/original-e5b84acd94d4e5dd87f23c78458299cf.png?resize=1588x1191&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"paragraph","attrs":{"textAlign":null}},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"},{"type":"italic"}],"text":"Yay!!! Congratulations we have helped Yongki survive hunger."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"We have helped Yongki find the most suitable food, customize orders, add food to the shopping cart, make payments and even monitor orders until the order arrives at Yongki's location."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":"left","level":1},"content":[{"type":"text","text":"🍔"}]},{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Hello Food Lovers 🍴"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"This is my exploration about Ma’em - Food Delivery Service Mobile App."}]},{"type":"image","attrs":{"src":"https://cdn.dribbble.com/userupload/3223457/file/original-89438d0921f4131bc793b99d167c16b2.png?resize=752x&vertical=center","alt":null,"title":null,"width":null,"height":null}},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Have a great project idea?"},{"type":"text","text":" Let us know ✅"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Services we provide:"},{"type":"hardBreak"},{"type":"text","text":"🖼️ UI Design | 😄 UX Design | 🎉 Illustration | 🛍 Brand Identity | 📝 Graphic Design | 🌐 Web Development | 📱 Mobile App Development"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Thanks!"}]}]}

UI-UXfooddelivery