- [] Methodologies
- [] Code editor
- [] HTML Templates
- [] Mockup tools
- [] Web Developer Tools
- [] Design Tools
- [] Library
- [] Office
We’re not designing pages, we’re designing systems of components.
Do one thing and do it well
Design systems must account for the dynamic nature of content, so it’s very helpful to articulate important properties of components like image sizes and character lengths for headings and text passages.
You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is
Ref:
- https://bradfrost.com/blog/post/atomic-web-design/
- https://atomicdesign.bradfrost.com/chapter-1/
- http://styleguides.io/examples.html
- https://rizzo.lonelyplanet.com/styleguide/design-elements/colours
Atoms: basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button
Molecules: relatively simple groups of UI elements functioning together as a unit. These molecules take on their own properties and serve as the backbone of our design systems. Eg: search form
Organisms: relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. Eg: A header organism might consist of dissimilar elements such as a logo image, primary navigation list, and search form. product grid.
Templates: page-level objects that place components into a layout and articulate the design’s underlying content structure. Eg: Home Page template provides context for these relatively abstract molecules and organisms. They focus on the page’s underlying content structure rather than the page’s final content.
Pages: specific instances of templates that show what a UI looks like with real representative content in place
- Atoms are UI elements that can’t be broken down any further and serve as the elemental building blocks of an interface.
- Molecules are collections of atoms that form relatively simple UI components.
- Organisms are relatively complex components that form discrete sections of an interface.
- Templates place components within a layout and demonstrate the design’s underlying content structure.
- Pages apply real content to templates and articulate variations to demonstrate the final UI and test the resilience of the design system.
- Crello : https://crello.com/home/
- Snappa : https://snappa.com/app
- Figma : https://www.figma.com/ - The best design tools
- Balsamiq Mockup : windows
- Canva : https://www.canva.com/
Paid Tools
- Shuffle : Drag&Drop to build template
- Bit : https://bit.dev/
- https://zelvitamin.com/y-nghia-mau-sac/
- https://idesign.vn/graphic-design/tam-ly-hoc-mau-sac-anh-huong-den-nguoi-dung-32300.html
- https://beau.vn/en/node/102
Css background images work best for several reasons. The first being accessibility where it is better to add the image to the background of a div so screen readers don't have difficulty dealing with it. Also background images don't print by default which is good to make your site print friendly without adding a separate style sheet. The second being performance where you can create a sprite of all your images and add them all using one http request. The third is being able to set the background-image-size to cover and that only works with background images. Finally, if you have repeating images on several pages, you can change the background-image in all of them by changing one link in the css. The only issue with background-image is the lack on an alt tag which isn't very practical
Would include an image tag instead of a background-images:
- If it's part of the content. If the images is attached to an article and it is a piece of information not part of the design.
- Logo images. Usually with logo images you want them to print by default. Also this indexes the logo in search engines in the image results.
- When you want screen readers to read the alt tag. If you are adding a warning icon you want the screen reader to prompt the user.
- When it's important for SEO.
https://developer.mozilla.org/en-US/docs/Web/API