Logo Cinquin Andy Signature

The Fundamentals of Web Design

Développeur Freelance - Logo

The sites and the associated resources.

Refactoring UI
Sktech exemple

The Fundamentals of Web Design

Posted on July 31, 2023 -  by Andy Cinquin

Web design principlesUI and UX designVisual identity and colorGrid systems in designInformation hierarchyUsing icons and imagesFigma tools for designersTypography in web designWeb performance optimizationResources for web designersGoogle Material design systemWeb design inspirationCSS and modern frameworksFree design resourcesFigma tutorials for beginners

Definition

In the process of creating websites, Web Design is now a specialty in its own right. A recent branch of the design family, it has become a mandatory step in internet conception. Web design must therefore organize information on the site's pages and best adapt the contents to this specific medium that is the Web. The site visitor must clearly perceive the information, easily and instantly assimilate it.
On this page, we will go through all the necessary steps, in my humble opinion, to become competent quickly in the field of web design and have a 360° view on all the important aspects of web design.

Links and Related Resources

The plan to learn how to make a clean UI: The main idea would be to read one article per point, and take good notes on this information, in order to capitalize on all this information.
  1. Understand the basic principles of user interface (UI) design and user experience (UX)
    → Read Refactoring UI
  2. Know the principles of color and how to use them to create a consistent visual identity
    → https://medium.com/free-code-camp/comprehensive-guide-for-color-usage-in-web-design-e2a9afce09fb
  3. Understand grids and layout systems to create consistent and harmonious designs
    → https://medium.com/design-with-figma/everything-you-need-to-know-as-a-ui-designer-about-spacing-layout-grids-2bc269e12321
  4. Understand the importance of information hierarchy to guide the user through the interface
    → https://manvisinghwal.medium.com/6-principles-of-visual-hierarchy-25b21b63ad62
    → https://medium.com/swlh/fundamentals-of-hierarchy-in-interface-design-ui-ba8e3017dceb
  5. Know how to use icons and images to enhance understanding and navigation
    → https://medium.com/@desbenoit/icons-and-interfaces-bcc8e0257bc8
  6. Know the basic tools and features of Figma, such as layers, shapes, images, and styles
  7. Know Figma's collaboration and sharing features to facilitate teamwork and user experience (UX) feedback
    → https://www.figma.com/resources/learn-design/
    → https://www.youtube.com/watch?v=HZuk6Wkx_Eg : Figma tutorial for Beginners: Complete Website from Start to Finish
    → https://www.youtube.com/watch?v=dXQ7IHkTiMM : Figma For Beginners: Explore ideas (1/4)
    → https://www.youtube.com/watch?v=3q3FV65ZrUs : Figma Tutorial - A Free UI Design/Prototyping Tool. It's awesome.
  8. Master the use of typography to effectively communicate content and hierarchy information
    → https://medium.com/eightshapes-llc/typography-in-design-systems-6ed771432f1e
    → https://thelogocreative.medium.com/the-rules-of-typography-in-web-design-8fad6c3b5169
    Interesting video on calligraphy: https://www.youtube.com/watch?v=Mqtd9OizbhE
  9. Know the best practices for optimizing the performance and loading time of mockups.
    → https://www.figma.com/best-practices/ → https://medium.com/@ajay.singh07/8-figma-best-practices-to-speed-up-your-productivity-d230accc1d25
All the links above are useful for gaining inspiration and additional information. A quick look at the "Law Of UX" is advised to soak in the various rules.
If possible, it would be great to take a look at the underlying rules of Google's design system (currently Material 3): https://m3.material.io/
(Know that https://m3.material.io/foundations is literally a gold mine of information!)

Refactoring UI

Home | Laws of UX

General:

https://dribbble.com/
https://www.behance.net/
https://www.pinterest.fr/
https://www.deviantart.com/
Websites / apps:
https://www.awwwards.com/ https://www.admiretheweb.com/
https://uijar.com/
https://savee.it/
https://land-book.com/
https://www.siteinspire.com/
https://godly.website/
https://onepagelove.com/

Web-oriented & landing page etc:

The Best Landing Page Design Inspiration, Templates and More | Landingfolio
5476 Landing Page Design Inspiration - Lapa Ninja
Land-book - website design inspiration gallery
CSS Awards – Recognition for Web Designers & Developers
Showcase of the best Animation Websites - landing.love

Youtube Channels:

https://www.youtube.com/@DesignCourse (He provides many examples) - EN
https://www.youtube.com/@BastiUi - FR: https://www.youtube.com/watch?v=Li1XYYqKTx4

My CSS Stack:

Headless UI - Unstyled, fully accessible UI components Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS Templates - Tailwind UI

Alternative Resources:

Lib resources: Resource Cards - Selected free resources for designers
Bootstrap: Bootstrap · The world's most popular HTML, CSS, and JS library.
Gradient: Mesh | Create beautiful mesh gradients
Color tester: Happy Hues - Curated colors in context.
CSS Loader animation: Whirl: CSS loading animations with minimal effort!
All-in-one chrome tool: All Online Tools in One Box | 10015 Tools
Grid generator: CSS Grid Generator
Icon library: Flaticon: Vector Icons and Stickers - PNG, SVG, EPS, PSD and CSS
Font awesome: Font Awesome
Icon8: Free Icons, Clipart Illustrations, Photos, and Music

Interesting Additional Articles

16 UI Design Rules to Keep in Mind


Thank you for your visit, feel free to contact me for any information, quote or collaboration proposal. I will be happy to answer you as soon as possible.
Did you like this article? Feel free to share it!

DEVELOP YOUR PROJECTS TOGETHER

An idea, a project? I'm here to answer your questions and help you.
I'd be delighted to discuss your project with you!
Contact me