https://eglelau.com formaventure Sun, 17 Aug 2025 14:15:49 +0000 https://eglelau.com en http://eglelau.com/Paralax-test Sun, 17 Aug 2025 14:15:49 +0000 formaventure 457587  Featured work Data Visualisation <img width="7008" height="4672" width_o="7008" height_o="4672" src_o="https://cortex.persona.co/t/original/i/c0a722f59c80066a79c1f1a66a18d575faa6007a1d00a9e13013b3b13a5b94fc/kelly-sikkema-GG6QlxTN8E0-unsplash.jpg" data-mid="1416109" border="0" /> <img width="1400" height="1050" width_o="1400" height_o="1050" src_o="https://cortex.persona.co/t/original/i/12e12d1f076fa2aaad50d73762f1b62f0ede786d7a69ede8f106d7069eec3945/01.png" data-mid="1416111" border="0" />  Featured work © 2024 eglelau  Featured work Data Visualisation  Featured work © 2024 eglelau http://eglelau.com/Untitled-page Thu, 26 Sep 2024 13:22:03 +0000 formaventure 454356 <img width="5705" height="3566" width_o="5705" height_o="3566" src_o="https://cortex.persona.co/t/original/i/8431eb9490457a0ba876a8541d76cdace5620e7903b0f2c8dd17807fb6d6f782/nikolai-lehmann-HBtnUG64BZE-unsplash.jpg" data-mid="1379329" border="0" /> http://eglelau.com/Design-Systems Mon, 13 May 2024 15:51:30 +0000 formaventure 452967 JUDITH EGLE LAU&nbsp; - DESIGN SYSTEMS DESIGNERAs a UI designer passionate about design systems, I understand the importance of creating cohesive and consistent user experiences across products and platforms.&nbsp;My love for design systems is driven by the desire to create exceptional products that meet user needs while embodying a brand's unique identity. WORKSArgon Design System Argon design system is designed for the best sailing experience on the water. It used across multiple brands and is a foundation for various sailing and fishing products. Typography The typography uses Noto Sans Display, that is part of the larger Noto font family developed by Google. The font family is characterised by its clean and modern design, with a focus on consistent stroke widths and proportions that make it easy to read even in challenging contexts. There are some features that we appreciate and work well for our audience: The generous X-height gives good aid in readability and accessibility — these are crucial for sailors, whose light conditions can be compromised. The wide range of font weights of the Inter family has allowed us to be expressive when designing for the displays and headlines, while maintaining consistencies with fonts used in actions and running texts. Like many other geometric typefaces that inspired it, Noto Sans speaks reliability as well as a sense of friendliness. The latter is a quality we seek particularly — we hope the UI would appear friendly at the first glance and therefore encourage UI interactions. Colours The UI is constructed on layers of elevation and surfaces. The base surface is the furthest away and used for things such as the background of menus. The principle is the closest and used for primary pressable buttons. Each surface can reference its own key. UI layers can be pressed, selected, disabled etc and the layer’s colour updates to reflect the current state. We see a chip for each of the 6 states. Each chip references a key-colour variant name and specifies whether to use on or on.inverted chips.This colour system can be replicated in different themes to accommodate different lightning conditions. Light - for bright sunlight, dark - for cloudy conditions or brand requirements and night - vision safe mode for sailing in the dark. Iconography Argon's iconography library primarily represent real word things, but can be abstract shapes.These icons are composed of primitive geometric shapes but are simple, recognisable from a distance and while in motion, and must be able to withstand low resolution and reproduction.The stroke elements should 2 dp width but it can compromise 1.5 dp stroke in cases like curved lines or small details when needed.All icons are strictly consistent in terms of detail, optical weight, stroke weight, position, component forms and perspective.  Featured work © 2024 eglelau JUDITH EGLE LAU&nbsp; - DESIGN SYSTEMS DESIGNERAs a UI designer passionate about design systems, I understand the importance of creating cohesive and consistent... http://eglelau.com/Data-Visualisation Tue, 23 Jan 2024 14:05:55 +0000 formaventure 451153  Featured work Data Visualisation <img width="3298" height="1798" width_o="3298" height_o="1798" src_o="https://cortex.persona.co/t/original/i/ea372add46d2c5d800d9c8f675905166b58aacd63eefe63555f27bc7b4fd01f5/London-Crime.png" data-mid="1343190" border="0" /><img width="2550" height="3300" width_o="2550" height_o="3300" src_o="https://cortex.persona.co/t/original/i/350d2ee6df4ed1323f6871c6bb967fa526ecf3e2b65e025f26277674447f8267/Manhattan-Trees-1706019264533.png" data-mid="1343191" border="0" /><img width="3602" height="5055" width_o="3602" height_o="5055" src_o="https://cortex.persona.co/t/original/i/47b2c1a293ae8cadedec06caad18a0acdc7d0232641343f19a41ceab9be1547e/information_design_portrait_01.jpg" data-mid="1343189" border="0" /><img width="2550" height="3300" width_o="2550" height_o="3300" src_o="https://cortex.persona.co/t/original/i/2ccbde95bc77ba7c9c7f6b4c9af6460262d73da2e5f395facd68e4c115564cd9/Track24-Blue-01-1706019475250.png" data-mid="1343192" border="0" />  Featured work © 2024 eglelau  Featured work Data Visualisation  Featured work © 2024 eglelau http://eglelau.com/Creative-coding Mon, 22 Jan 2024 15:26:48 +0000 formaventure 451134 sketch.js sketch.js Sketch.js Minimal JavaScript Creative Coding Framework Github Download Documentation API Examples <img src="examples/img/drawing.jpg"> Multi-touch drawing Basic example demonstrating how to set up a sketch and handle mouse / touch input <img src="examples/img/particles.jpg"> Particles Create a multi-touch particle toy with sketch.js <img src="examples/img/plasma.jpg"> Plasmatic Isosurface An example using sketch.js in WebGL mode <img src="examples/img/three.jpg"> THREE.js How to integrate sketch.js with THREE.js <img src="examples/img/tentacles.jpg"> Muscular Hydrostats An interactive canvas demo powered by sketch.js <img src="examples/img/crystallization.jpg"> Crystallisation An experiment which uses sketch.js with CoffeeScript <img src="examples/img/webgl-particles.jpg"> 1 Million Particles Moving lots of particles around on the GPU <img src="examples/img/linjer.jpg"> Linjer Hakim El Hattab used sketch.js in this awesome interactive experiment <img src="examples/img/pulse.jpg"> Pulse Matthew Wagerfield's beautiful geometric canvas experiment build on sketch.js <img src="examples/img/bubbles.jpg"> Bubbles Interactive canvas demo by Jack Rugile <img src="examples/img/parallax.jpg"> Parallax Mountains Excellent parallax effect from Jack Rugile, using the sketch.js 2d canvas <img src="examples/img/skyline.jpg"> Parallax Skyline Another parallax variation from Jack Rugile <img src="examples/img/swarm.jpg"> Swarming Bugs Jack Rugile creates wonderful hungry creatures that search for food <img src="examples/img/cloth.jpg"> Cloth An experiment simulating cloth by Tony Broyez <img src="examples/img/flowers.jpg"> Random Flowers Animated generative flowers by Alexey Taktarov Using sketch.js? Let me know: justin [at] soulwire.co.uk sketch.js sketch.js Sketch.js ... http://eglelau.com/Digital-Banking Sun, 21 Jan 2024 18:36:32 +0000 formaventure 451121  Featured work Digital Banking // User Management Feature 200 %increase in global usage18M+user-initiated assignments daily In the evolving landscape of digital finance, a fundamental shift is underway, necessitating a comprehensive, customer-centric approach. Gone are the days when merely facilitating transactions and safeguarding funds sufficed. Today's discerning consumers crave more—they yearn for interactions that seamlessly blend reliability with intuition, leaving a lasting emotional impact. The proposed designs were taken into account in the roadmap, potentially shaping the forthcoming overhaul of all components in the management system. <img width="1200" height="700" width_o="1200" height_o="700" src_o="https://cortex.persona.co/t/original/i/c2900e16e5a6c91dca5a5020b2c9a9ee35b98b7372a22259612896304d8fe121/Slide-1.png" data-mid="1362083" border="0" /> Research Research is invitable part of user experience. Together with a group of designers we analysed user flow, information architecture, UX/UI practices, and visual style. Our findings were presented in document that highlighted best practices to adopt and things to avoid, enabling us to make informed design decisions in the future. These questions should provide valuable insights into how users interact with the contacts assignment function in a banking app and their preferences for its improvement. <img width="1200" height="770" width_o="1200" height_o="770" src_o="https://cortex.persona.co/t/original/i/be33d1cb71a2f88b7f5441a40bccfb223bc4ce0caa1206bde33d5ad749bdd58b/User-Interview-Script.png" data-mid="1361064" border="0" /> Context In Connect Management System, which is a platform for Mastercard's customers such as big banks to handle their business affairs, there's a vital tool called My Company Manager (MCM). MCM lets users take care of various aspects related to their company, and one of these features is Contacts. Contacts store information about all the people and organizations connected to a company, both internally and externally. <img width="1200" height="700" width_o="1200" height_o="700" src_o="https://cortex.persona.co/t/original/i/f894c6ff1c1481e6e58257db80c705aca02c416c63d091b89c5b2213ad305f67/Before.png" data-mid="1362084" border="0" /> User flow The initial step was to map out the existing flow version by creating a user flow map, including all entities and actions. Analysing the scheme, we identified structural inconsistencies and proposed improvements to the hierarchy. We also used the scheme to document proposed changes to the feature set, which were later reviewed and approved during a workshop session with the client, taking into account competitor analysis and user research insights. <img width="1200" height="770" width_o="1200" height_o="770" src_o="https://cortex.persona.co/t/original/i/d11d62a74c95c6b061e1a3542309e7b6adbfb24e27f93a628a278a5f7009611a/Assigment---Reassigment-Flow.png" data-mid="1361082" border="0" /> Solution The initial step was to map out the existing flow version by creating a user flow map, including all entities and actions. Analysing the scheme, we identified structural inconsistencies and proposed improvements to the hierarchy. We also used the scheme to document proposed changes to the feature set, which were later reviewed and approved during a workshop session with the client, taking into account competitor analysis and user research insights. <img width="1200" height="700" width_o="1200" height_o="700" src_o="https://cortex.persona.co/t/original/i/9950205cfde645be8269cf820549631afea93f34bec1158c3e31c7f251ce8f31/After.png" data-mid="1362085" border="0" /><img width="1200" height="700" width_o="1200" height_o="700" src_o="https://cortex.persona.co/t/original/i/c2900e16e5a6c91dca5a5020b2c9a9ee35b98b7372a22259612896304d8fe121/Slide-1.png" data-mid="1362083" border="0" /><img width="1200" height="700" width_o="1200" height_o="700" src_o="https://cortex.persona.co/t/original/i/761ef3c4f30df0e5eba4600d5b5cde437605a1b81904cc889b9fc640097f46e3/Slide-2.png" data-mid="1362087" border="0" /><img width="1200" height="700" width_o="1200" height_o="700" src_o="https://cortex.persona.co/t/original/i/4c2f54eb6825383552cf1825d41525dddfdfdb76c6cac43be31fa34ce2aac412/Slide-3.png" data-mid="1362086" border="0" /> Findings The initial step was to map out the existing flow version by creating a user flow map, including all entities and actions. Analysing the scheme, we identified structural inconsistencies and proposed improvements to the hierarchy. We also used the scheme to document proposed changes to the feature set, which were later reviewed and approved during a workshop session with the client, taking into account competitor analysis and user research insights. <img width="1200" height="700" width_o="1200" height_o="700" src_o="https://cortex.persona.co/t/original/i/a7c98bac175be8491450d0ffdcddbcfb0b336eaac66c8482ff0f2599053b4bcb/Features.png" data-mid="1362103" border="0" />  Featured work © 2024 eglelau  Featured work Digital Banking // User Management Feature 200 %increase in global usage18M+user-initiated assignments daily In the evolving... http://eglelau.com/Blog Tue, 17 Oct 2023 09:00:55 +0000 formaventure 449136  Home The Power of Design Systems: My Journey from Aesthetics to Cohesion <img width="1200" height="700" width_o="1200" height_o="700" src_o="https://cortex.persona.co/t/original/i/6e65a6f70660e6896adb7c66e52fece0515a617e94d27f35a313bba62a6307cc/design-system-example.png" data-mid="1324088" border="0" /> Photo by Balázs Kétyi on Unsplash My Early Years in Design: Aesthetics Above All In the early stages of my career, I was captivated by the beauty of design. I would spend hours browsing platforms like Dribbble and Behance, marvelling at the stunning aesthetics and intricate animations that designers showcased. Every elegant logo, website, app, or character illustration would leave me in awe. In my mind, the essence of great design was synonymous with impeccable aesthetics. This perspective was akin to how many outside the design world perceive art. The focus was on appearances, much like the allure of Apple's beautifully designed products, showcased with the tagline of "great design." Craft, with its delicate attention to detail, mattered significantly, and visual polish was the measure of success in design. The Shift in My Perspective: Holistic Thinking Over the years, I realized that there was more to design than mere aesthetics. Exceptional designers weren't just masters of craft; they were also champions of holistic thinking. I began to understand that great design extended beyond the surface. The best designers possessed an innate ability to look at the bigger picture, imagining how their work would function in the real world. Inexperienced designers, like my former self, often focused narrowly on what they were creating, failing to consider how their work might fare in diverse contexts. Their designs lacked the resilience to withstand encounters with disabilities, deviations from context, or alterations in size and time. Poor design created a single solution while giving rise to a multitude of new problems. In contrast, good design resolved problems without negatively impacting other elements within its ecosystem. This shift in perspective from craft-centric to system-centric thinking was, and still is, transformative. The Emergence of Design Systems This change in my outlook coincided with the emergence of design systems. The concept of a design system, a set of guidelines, rules, and components that work in harmony to create a seamless user experience across all touchpoints, intrigued me I discovered that a well-structured design system offers a multitude of benefits, redefining how we approach design. These include:. Consistency: A Foundation of TrustDesign systems provide a framework for consistency. Users now expect a uniform experience, regardless of how they interact with a product. A design system ensures that all elements, from typography to color and spacing, remain consistent, building trust with users. Efficiency: A Designer's LifesaverA design system streamlines the design process, saving precious time for designers and developers alike. It offers pre-designed components that can be quickly deployed to create new pages or features, eliminating the need to start from scratch with each project. Flexibility: Balancing Uniformity and CreativityDesign systems strike a balance between uniformity and creativity, permitting the creation of new components and design patterns while adhering to established standards. This flexibility empowers teams to craft unique user experiences while staying within the overarching design system. Scalability: Meeting the Challenges of GrowthIn a rapidly evolving landscape, maintaining design consistency can be a formidable challenge. Design systems, however, offer a lifeline. They serve as a single source of truth for a product's design, fostering collaboration among multiple development teams and ensuring design continuity, even as the product expands. A Call to Aspiring Designers For those on the path to becoming designers whose impact transcends a narrow scope, embracing a design system is a pivotal step. My journey has taught me invaluable lessons, and I'd like to share some advice: Explore Extremes Understand the limits of your design by creating the simplest and most complex versions of your work. Share Early and Often Sharing your work early, even through detailed notes or comments, helps you connect with your past work and understand its evolution. Embrace Feedback Invite others to provide feedback and engage them in discussions about their perspectives on your work. Think Holistically Look beyond the immediate design problem and consider the larger ecosystem in which your designs will exist. © 2023 eglelau  Home The Power of Design Systems: My Journey from Aesthetics to Cohesion Photo by Balázs Kétyi on Unsplash My Early Years in Design: Aesthetics... http://eglelau.com/Ega-electric Wed, 27 Sep 2023 11:02:17 +0000 formaventure 448344  Featured work Ega Electric This app concept explores vehicle sharing for 3 types of users: admin, family members and friends.&nbsp; <img width="1400" height="800" width_o="1400" height_o="800" src_o="https://cortex.persona.co/t/original/i/05af34cbdf3cd745de287a301bab3c86fedbfbe055230e2707bf5e94a2697daa/Ega-01.png" data-mid="1319194" border="0" /> User and their relations Additional Each user has a automatic Context Modes allow you to define the data you see based on your point of sail: Upwind, Reaching, Downwind, Pre-Start or Motoring. These modes—reaching, downwind, and upwind—are fundamental to sailing and play a significant role in determining how a sailboat should be trimmed and sailed in different wind conditions. <img width="1400" height="629" width_o="1400" height_o="629" src_o="https://cortex.persona.co/t/original/i/39c051f7ca674fdf2ee6dd64df47ea42fbb6ba4fce99b291d031b9d78bd9453f/Ega-04.png" data-mid="1319192" border="0" /> Customisable dashboard The display has a wide choice of pre set dashboards or use the simple drag &amp; drop editor for complete customisation. Nemesis offers a wide choice of graphical gauges such as Sailsteer™, WindPlots, key digital speed, depth, angle data, tank levels, IP Camera, Views, histograms and much more. This all in one customisable display can be mounted in either Landscape or in Portrait and is designed for use on the mast or in the cockpit to display all the sailing data you need, as you need it.  Featured work © 2024 eglelau  Featured work Ega Electric This app concept explores vehicle sharing for 3 types of users: admin, family members and friends.&nbsp; User and... http://eglelau.com/Print Fri, 25 Aug 2023 10:58:34 +0000 formaventure 447152  Featured work Aphorisms Egoist <img width="1920" height="1440" width_o="1920" height_o="1440" src_o="https://cortex.persona.co/t/original/i/08e51986edcb74fd96b463827648371e6216248f3afed994dd7fe3d51b1d0849/Aphorisms_4.JPG" data-mid="1312649" border="0" /> Never interrupt your enemy when he is making a mistake. <img width="1920" height="1440" width_o="1920" height_o="1440" src_o="https://cortex.persona.co/t/original/i/4022210d5614e4ad810f589dabed6b3257e237375026d4883befd1858d9e7bcf/Aphorisms_1.JPG" data-mid="1312650" border="0" /> Be yourself <img width="1920" height="1440" width_o="1920" height_o="1440" src_o="https://cortex.persona.co/t/original/i/55b2cad0ba3fd4de939f20d33be39e3833cfbfe27d0ee9772f597fa18ac2f7d5/Aphorisms_3.JPG" data-mid="1312651" border="0" />  Featured work © 2024 eglelau  Featured work Aphorisms Egoist Never interrupt your enemy when he is making a mistake. Be yourself  Featured work © 2024... http://eglelau.com/Track24 Fri, 25 Aug 2023 10:57:46 +0000 formaventure 447151  Featured work Track24 Branding and Identity The company offering advanced technology to ensure the safety, security of people and assets in some of the world’s most difficult places. Monitoring dozens of drivers and vehicles in places like Iraq, Sudan and Afghanistan. Providing applications that help to manage and respond to work environment efficiently and ensure that operations run smoothly. <img width="1400" height="810" width_o="1400" height_o="810" src_o="https://cortex.persona.co/t/original/i/38372cf509b26ec7cad01dfbeeaaecad2abe114f9dd8319008755a3bbeef3007/Behance_Presentation_Cover.png" data-mid="1314804" border="0" /><img width="1400" height="810" width_o="1400" height_o="810" src_o="https://cortex.persona.co/t/original/i/5d2ecb97baabed56e92975e8a6f236dc497857a74e3268a4c21815c7ff0bee05/Presentation-05.jpg" data-mid="1314805" border="0" /><img width="1400" height="810" width_o="1400" height_o="810" src_o="https://cortex.persona.co/t/original/i/3eff57dcd03dc849f5c07cfeaaab27ec565a4cea0282b69e389656f02ba918f6/Presentation-07.jpg" data-mid="1314806" border="0" /> Logo symbol Track24 logo is an image based identificant which acts as a corporate symbol and is the source of visual corporateidentity program. The thick crescents in the image illustrate principles of satellite positioning and also gives an impression of tire tracks. <img width="1400" height="810" width_o="1400" height_o="810" src_o="https://cortex.persona.co/t/original/i/f9a6ea5591d2ed68f97b18b0498091b1cc2d82beb54e1b915771ce8951203350/Presentation-09.jpg" data-mid="1314807" border="0" /><img width="1400" height="810" width_o="1400" height_o="810" src_o="https://cortex.persona.co/t/original/i/844ad7d147aba51b836978850d2cfeee52b6826cc8091b2c3f17b54b967d3d38/Presentation-10.jpg" data-mid="1314808" border="0" /><img width="1400" height="1010" width_o="1400" height_o="1010" src_o="https://cortex.persona.co/t/original/i/d74d2a889d6f3920008f3f216a23150fb8de970ab025e49e836ff4acda525f96/Presentation-11.jpg" data-mid="1314809" border="0" /> Colours The teal shades chosen as the primary colours helped the brand to stand out in saturated middle east security market. Most competitors were using black and white colour combination.&nbsp;Teal is a calming color that can evoke a sense of stability and security. This can be reassuring to potential clients who want to feel safe and protected by the services. <img width="1400" height="810" width_o="1400" height_o="810" src_o="https://cortex.persona.co/t/original/i/6db24b688ba5ec3b3d62835951485438933aea32adcea8439498f42fb9d73aec/Presentation-16.jpg" data-mid="1314813" border="0" /><img width="3000" height="2000" width_o="3000" height_o="2000" src_o="https://cortex.persona.co/t/original/i/619d1f2377209bfcf37d244a4333306204f5471a778f31aa7c9cdeb1f3d6a685/Presentation-12.jpg" data-mid="1314810" border="0" /> Web applications <img width="1400" height="810" width_o="1400" height_o="810" src_o="https://cortex.persona.co/t/original/i/d77c2e8f533e8c859aca3c00df4186303b938f1cd85d26c7f9958e9c26a5b258/Presentation-17.jpg" data-mid="1314814" border="0" />The Web appplications ans mobile apps were following and using design guidelines to assure consistency of the brand.  Featured work © 2025 eglelau  Featured work Track24 Branding and Identity The company offering advanced technology to ensure the safety, security of people and assets in some of the...