The second part of my article on the value of explicit design rules is here. In it I dive head first into example in layout, position, ordering padding and margins with examples from various design tools. In the end of this part there's also a treasure trove of links to other insightful people writing on adjacent subjects. Hope you find it interesting and be swayed to try tools that allow for more expressive explicit design rules. https://lnkd.in/dmGpUHU6
Erez Reznikov’s Post
More Relevant Posts
-
"..the tools that allow the most expressive and intelligent mechanics will be the ones that attract the designers that want to have the most expressive power." Part 2 is here - where we explore the gap between design intent and explicit styling rules in interface design with Erez >>
The second part of my article on the value of explicit design rules is here. In it I dive head first into example in layout, position, ordering padding and margins with examples from various design tools. In the end of this part there's also a treasure trove of links to other insightful people writing on adjacent subjects. Hope you find it interesting and be swayed to try tools that allow for more expressive explicit design rules. https://lnkd.in/dmGpUHU6
Evolving from implicit intent to explicit design rules. Part 2
blog.jux.io
To view or add a comment, sign in
-
⚡ Zero Block Update: Auto Layout Meet Auto Layout. The new tool saves you time when creating responsive designs by automatically and flexibly adapting content to different screen resolutions in Zero Block. Learn how you can use it👇 🔧 How It Works • Auto Layout arranges elements within a group based on set directions and spacing, automatically adjusting them to any content changes. For example, if you add a new image to the group, it will fit the layout according to the settings, so you won't need to readjust other elements manually. • Auto Layout is especially handy for designing complex elements like cards, buttons, menu items, and any other elements that contain text and require smart resizing when the text is edited. • Auto Layout also greatly speeds up the process of making your design responsive to different screen resolutions. ⚙️ Main Settings Overview • Hug/Fixed controls the container's width and height. With the Hug option, the group size is flexible and adjusts based on the elements' size and the spacing between them. The Fixed option means the group size remains unaffected by changes such as spacing between elements or their size. • Direction specifies the direction for the automatic alignment of elements within the group. There are three options: Horizontal, Vertical, and Wrap (moves to the next row if it doesn't fit). • Gap controls the spacing between elements. It's applied based on the selected direction: Horizontal, Vertical, or Wrap, which allows you to set the spacing for both the X and Y axes. • Align Elements aligns elements along the main axis—either vertically or horizontally—based on the previously chosen direction. • Justify Content provides alignment options, using a different axis than Align Elements. It allows organizing elements evenly spaced within the container, with or without spacing. • Align Content arranges elements when Wrap is enabled and applies when there are multiple rows of content. It aligns all rows vertically to the container unless Hug is selected. For example, if you set Align Content Top, all elements will fit closely to the top of the container. Learn more about Auto Layout & watch a tutorial at Auto Layout In Zero Block👉 https://lnkd.in/e3CF8ukd #nocode #design #webdesign #responsivedesign #responsivewebdesign #autolayout #css #flexbox #flexiblebox #cssflexbox
To view or add a comment, sign in
-
-
A design system is a collection of reusable components & elements that help you build consistent designs. But if you haven't worked with one, you may not know where to start. Here, Faith explains how design systems work using a fun case study.
How to Use a Design System – a Case Study
freecodecamp.org
To view or add a comment, sign in
-
Passionate Graphic Designer | Specializing in Illustration Design | Bringing Captivating Visuals to Life
Struggling to create unique SVG patterns for your designs? 😩 Check out the link to learn more about these tools and how they can benefit your designs. https://buff.ly/49HV7Dv #svgpatterns #freedesign #designtools #graphicdesign
Cool and Free SVG Pattern Generators - inkydesignworks.com
https://inkydesignworks.com
To view or add a comment, sign in
-
A design system is a collection of reusable components & elements that help you build consistent designs. But if you haven't worked with one, you may not know where to start. Here, Faith explains how design systems work using a fun case study.
How to Use a Design System – a Case Study
freecodecamp.org
To view or add a comment, sign in
-
A design system is a collection of reusable components & elements you can use to build consistent designs. But if you haven't worked with one, you may not know where to start. Here, Faith explains how design systems work using a fun case study.
How to Use a Design System – a Case Study
freecodecamp.org
To view or add a comment, sign in
-
A design system is a collection of reusable components and elements that help you create consistent designs. But if you've never used one, you may not know where to start. Here, Faith explains how design systems work using a fun case study.
How to Use a Design System – a Case Study
freecodecamp.org
To view or add a comment, sign in
-
From Emotions to Design Code 💎 “It’s exactly what I was envisioning” Have you ever heard a client say like that? That kind of appreciation is what makes our job worthwhile. But how do we achieve it consistently? This was a piece of our client’s feedback after selecting a homepage concept among three of them. In that project, we succeeded to create the desired visual design in just one and only iteration. Wanna tips? See below. Most clients don't have a perfectly clear picture of the final design. They describe their desired experience using adjectives e.g. “I am looking for something solid, secure, mature…light colors, totally clean”. These are emotions and sensations, not specific design elements. Our job is to bridge the gap and translate these words into a visual language. But how? 1) Uncover the Client's Style Preferences: We start by pinpointing the visual style that resonates with the client. This aligns with the "adjectives" described earlier. 2) Deep Dive into Reference Material: Next, we conduct thorough research, collecting relevant references that embody the client's desired style. We then extract best practices from each reference. 3) Refine and Iterate: Finally, we apply these elements to a basic layout, building a cohesive visual design. This is often an iterative process, where we present multiple concepts and refine them based on client feedback. Important: we always provide several concepts. Statistics show that clients tend to choose later options. That is simply because the first idea is not necessarily the best one :) By following these steps, we can bridge the gap between a client's vision and the final design, leading to that coveted "This is exactly what I envisioned!" moment.
To view or add a comment, sign in
-
-
Founder at DASH Design Studio. Delivering expert UI/UX solutions to achieve impactful business results.
My latest article on how to translate client language and emotions into design code 🤓
From Emotions to Design Code 💎 “It’s exactly what I was envisioning” Have you ever heard a client say like that? That kind of appreciation is what makes our job worthwhile. But how do we achieve it consistently? This was a piece of our client’s feedback after selecting a homepage concept among three of them. In that project, we succeeded to create the desired visual design in just one and only iteration. Wanna tips? See below. Most clients don't have a perfectly clear picture of the final design. They describe their desired experience using adjectives e.g. “I am looking for something solid, secure, mature…light colors, totally clean”. These are emotions and sensations, not specific design elements. Our job is to bridge the gap and translate these words into a visual language. But how? 1) Uncover the Client's Style Preferences: We start by pinpointing the visual style that resonates with the client. This aligns with the "adjectives" described earlier. 2) Deep Dive into Reference Material: Next, we conduct thorough research, collecting relevant references that embody the client's desired style. We then extract best practices from each reference. 3) Refine and Iterate: Finally, we apply these elements to a basic layout, building a cohesive visual design. This is often an iterative process, where we present multiple concepts and refine them based on client feedback. Important: we always provide several concepts. Statistics show that clients tend to choose later options. That is simply because the first idea is not necessarily the best one :) By following these steps, we can bridge the gap between a client's vision and the final design, leading to that coveted "This is exactly what I envisioned!" moment.
To view or add a comment, sign in
-
-
I will judge you for your messy design files. I once asked a senior designer to share their Sketch file when I took on some of their work. The file I received blew me away. It was the most meticulously crafted design document I had ever seen: every page was laid out hierarchically and evenly, every layer and group was aptly named, and every pixel was neatly aligned to the grid. If someone put this much care into an artifact, I knew they must be excellent in every other professional facet as well. After thanking the designer for inspiring me, I replied half-jokingly, “Remind me to never show you my design files.” This one file motivated me to strive for excellence. On every project since, I aimed to perfect my design artifacts: tying every piece of color, copy and component back to the design system, creating design systems from scratch if they didn’t exist, and aligning everything to a grid. Although, I still didn’t name layers, that’s a bit much. I recently read about how designers at Linear do almost none of the above. They view the design file as merely a reference, not a deliverable, so how it’s constructed shouldn’t matter. Their files don’t use an intricate design system, and each designer chooses whether or not to name layers or use autolayout. They also design on top of screenshots 😱. I started to question whether I was focusing on excellence in the wrong area. I work within design teams, and I know that every designer has their own style and way of working. Design work is creative, and the level of structure I demanded probably stifled creativity. The output of our work is software, not pixels. As designers, we need to be way more obsessed over how our designs work in production versus perfecting our shiny, simulated mockups. I still believe in practicing excellence in every part of the craft, including design files. Your artifacts represent you. At a minimum, your design files must be organized enough for your team to work in them effectively. So I’ve shifted my focus away from overbearing pixel management to making designs that are ready enough for code. Think in prod, not in pixels. #excellence #designsystem
To view or add a comment, sign in
Creative at Brandinglab with a passion for building brands
2moIm not sure I understand all of this but its very interesting