http://www.derekwongdesign.com/design daily 0.75 2013-08-30 http://www.derekwongdesign.com/work daily 0.75 2024-05-23 http://www.derekwongdesign.com/projects daily 0.75 2024-03-20 https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1460599812503-4PCHM9LNKVTV65Y6CDZL/Derek+mountain+cover.jpg Projects https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1526539976933-6N8VDLY2OAQNZ9PV7BJU/sombra-message-3c.jpg Projects https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1526539086583-NBHDUMVO6RHMQ4NL5AXT/sombra-message-2c.jpg Projects http://www.derekwongdesign.com/home daily 1.0 2026-01-22 https://images.squarespace-cdn.com/content/v1/58d00f106b8f5b01c8e73f52/1491858366054-VN3632LUL8YNY0SH4RCQ/color-3.png Home https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/abd02cf4-e4f0-4a0d-b05b-6696e5c6f95c/derek+pink+hat.jpg Home http://www.derekwongdesign.com/roblox daily 0.75 2024-07-16 https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1696050654164-104EDRFWHFP16GDZTYKA/uiblox+homepage.png Roblox Design System https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/9f967c7a-3361-41ec-9b38-0bd9add8a1cf/Image+494.png Roblox Design System - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1696122196077-PRAP0VDJTZJ78C4QCW4X/home+page+evolution+2.png Roblox Design System https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1696122195968-0HR2RXZ6MIG2S9PFW78Z/home+page+evolution+2023.png Roblox Design System https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/5c81ebea-1406-4702-aa5f-d4f318eda6ba/PXL_20220429_232849719.jpg Roblox Design System - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/b8865dbc-c219-48b1-ab4e-696090841bc4/typography+example.gif Roblox Design System - Make it stand out Illustrating a proposed unified typography system that works across the Roblox product suite. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/5a22a42d-401e-47ae-932b-1f67c4dfeda4/thumbnail+update.gif Roblox Design System - Make it stand out Thumbnail widget for product designers to use for Figma projects. This widget has 100% adoption across all App teams in Figma. http://www.derekwongdesign.com/iconifize daily 0.75 2024-05-23 https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1526448262663-QQJ4UTCS3T2S0VKS7FNZ/cover+iconifize+3a.png Iconifize App Concept https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1463201215714-IQ5MGZ5QBFL8CF1P2JPB/image-asset.jpeg Iconifize App Concept http://www.derekwongdesign.com/koinonia daily 0.75 2024-05-23 https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1526607384053-ADWC2IVF61RK3UCBPXFH/cover+koinonia+2c.jpg Koinonia Branding https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1463207718000-B1HC2T4JPMEZWXY5FM7E/image-asset.gif Koinonia Branding https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1463379818349-XUGJ2SVB3U88NTBWOBTW/image-asset.jpeg Koinonia Branding http://www.derekwongdesign.com/omen daily 0.75 2024-07-16 https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1721159348557-3TL73PPG8D6EGUCVDZKO/omen+design+system+thumb.png HP OMEN Design System https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1511567416637-LCBIQLVA0WM7J755UXAI/OMEN-1a.png HP OMEN Design System https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1511596057404-2ZBPP03OZ6DX4UB1QY0N/ghosting.gif HP OMEN Design System https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1511596088031-HV36BUFPJY42M3YGUXJW/raindrop.gif HP OMEN Design System https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1511596161749-OM3Z7RIMOY1GXN1NTEAW/omen-x.gif HP OMEN Design System https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1511596120015-3YMKEORZ953OTT40OK60/ripple.gif HP OMEN Design System http://www.derekwongdesign.com/product-design-overclocking daily 0.75 2024-09-14 https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1717145269594-6UA7RLDWLYCXP5HF6EY0/cover+omen+3a+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/81cded3f-377c-4f5c-9b90-356089bf1880/Overclocking+%28Default%29+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/6a0b7d06-1364-4237-b332-8605cd41c21f/Overclocking+%28Joyride+1%29+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/adf543fb-6565-4a36-934c-34f6f58a9920/Overclocking+%28Joyride+2%29+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN - Make it stand out During the step of the workflow, I decided to keep the bottom half of the screen disabled, since the user cannot take any actions on this page other than canceling or navigating to another tab. I added the Loading flavor text to keep the user informed that something is happening in the background. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1705022834365-O2BFEIOTKJT15DG7YQ1F/Overclocking+%28Welcome%29+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1705022828934-LBK2VKBTTIQ7DHUYRQNF/Overclocking+%28Joyride+1%29+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1705022828772-K66WXQX21IYKHGZEN8W8/Overclocking+%28Joyride+2%29+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1705022829671-UWJF33CNYMSKOVRPMCJZ/Overclocking+%28Joyride+3%29+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1705022830028-7IDRP8ZY8Q3A83Q7CXLC/Overclocking+%28Joyride+4%29+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1705022830616-A62EPJFS88OAB0J1KX6X/Overclocking+%28Joyride+5%29+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1705022830977-OTKCDMV6TH943HHIP8PK/Overclocking+%28Joyride+5%29+Warning+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1705022831615-006ZBPRM6075OYE5R6UU/Overclocking+%28Joyride+6%29+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1705022832026-TMKK4QN637PO6YO8S4V9/Overclocking+%28Joyride+7%29+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1705022832670-KW7RJSFYUFGX4UVUKPHS/Overclocking+%28Joyride+8%29+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1705022832904-H3ASUCGI177BDBB37U93/Overclocking+%28Joyride+Complete%29+%282018_06_01+22_20_09+UTC%29.png Case Study - HP OMEN http://www.derekwongdesign.com/sf-gaymers-logo daily 0.75 2024-09-14 https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1710972010383-XTZOFEOBEDUJ2YKSBALG/08-SF-Gaymers-Logo-purp.png SF Gaymers Logo https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/865a998a-491b-489a-a36a-059d7b86c20e/Artboard+1.png SF Gaymers Logo - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/88e8b18f-f2ec-4e39-a5ea-eb61ec2726ae/Artboard+1+copy.png SF Gaymers Logo - Make it stand out Earliest sketches of the 2023 logo played with graffiti and sports logo styles. Later on, the idea of the video game controller shape came into mind. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/b3fef350-e275-4bda-a0f9-3937a10bfa31/Artboard+1+copy+2.png SF Gaymers Logo - Make it stand out XBOX, PS5, and Nintendo Switch Pro controller shapes were averaged using Adobe Illustrator to create a generic modern controller shape (left). Typeface and Golden Gate bridge style inspiration (right). https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/4b16cfe6-6f48-4369-8206-3ad9a72fb764/Artboard+1+copy+3.png SF Gaymers Logo - Make it stand out Near-final style options that didn’t make the cut. The script typeface (left) isn’t legible in smaller sizes, and the geometric typeface (right) skewed too masculine and was a bit outdated. Also, the detail was lost in smaller sizes. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/2a04bb5b-eb2c-4c49-8f17-813b64fd4293/Artboard+1+copy+4.png SF Gaymers Logo - Make it stand out Various media with the updated logo. Holographic stickers (left), button pins (middle), digital flyers (right). https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/6f217b67-963c-48bd-8f76-d68739cb8712/Artboard+1+copy+5.png SF Gaymers Logo - Make it stand out Whatever it is, the way you tell your story online can make all the difference. http://www.derekwongdesign.com/article-mouse-cursor daily 0.75 2024-09-14 https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1706819756476-T6J13ICUMA6AGVZPSG5L/blog-cover-dwong.png Roblox Blog: Mouse Pointer https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/d785c32a-a7fb-4fc2-ab45-6406e3c1db96/blog-cover-dwong.png Roblox Blog: Mouse Pointer Designing a Mouse Pointer for a Digital Metaverse, Feb 2022 https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/74cfef80-63a8-4648-b252-289eab29da47/Image+244.png Roblox Blog: Mouse Pointer - Make it stand out Whatever it is, the way you tell your story online can make all the difference. http://www.derekwongdesign.com/how-we-document-webinar daily 0.75 2024-05-23 https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1711133186778-A1KGLU9WDRWMFL65VKKS/webinar+screenshot.png Zeroheight Webinar: How We Document https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/8ed47a58-e49b-4241-bea3-33ed3e5b8b76/zeroheight+webinar.jpg Zeroheight Webinar: How We Document http://www.derekwongdesign.com/productdesign daily 0.75 2024-05-31 https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/6fb1e56e-7dfd-4377-b8b0-02a73d107765/blog-cover-dwong.png Product Design - Make it stand out Self-authored Article: Roblox Mouse Pointer Visual Design Study (2022) http://www.derekwongdesign.com/published-work daily 0.75 2024-05-31 https://images.squarespace-cdn.com/content/v1/58d00f106b8f5b01c8e73f52/1491858366054-VN3632LUL8YNY0SH4RCQ/color-3.png Published Work http://www.derekwongdesign.com/new-page-1 daily 0.75 2024-05-31 http://www.derekwongdesign.com/roblox-case-study daily 0.75 2024-07-16 https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/1721158702048-ETWSCKEHZBQDJ1BNVSJI/tile+problem+thumb.png Case Study - Tile Components https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/179f57df-24f2-4add-b9f0-07f4fbcc72ff/Slide+9.png Case Study - Tile Components - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/82c6ecd4-c69b-44ef-840d-6e4a08f625af/Slide+10.png Case Study - Tile Components - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/97f88abe-f40e-4ad3-9649-99b649025fc9/Slide+8.png Case Study - Tile Components - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/c834d88c-d697-4c85-8956-3eedb0dcd682/Slide+15.png Case Study - Tile Components - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/2251d1ef-43a1-4671-b3bf-bf353408b340/Slide+16.png Case Study - Tile Components - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/6c36b3ba-017a-4d8d-ba68-9e0836a1f488/typography+proposal.gif Case Study - Tile Components - Make it stand out Demonstrating how our type scale would work across devices. https://images.squarespace-cdn.com/content/v1/565fda64e4b01f9e8bf3e8af/ece7dbde-5f61-4491-9654-f6d1b5324d7a/Slide+7.png Case Study - Tile Components - Make it stand out Whatever it is, the way you tell your story online can make all the difference.