Тёмный

Atomic Design: What is it and why is it important in 2024? 

Proctor + Stevenson
Подписаться 1,5 тыс.
Просмотров 46 тыс.
50% 1

In this animation, we explain what Atomic Design is and why you should be using Atomic Design in your next web design and build. If you’re responsible for a company website, you’ll be familiar with the problem. How do you keep your site current, compelling and consistent with your brand - without incurring huge costs, consuming vast amounts of time or creating a less-than-ideal user experience?
Having spent years working at the frontier of web design and development, Proctors has an answer. It’s called Atomic Design and it’s an approach our in-house team of digital designers, web developers, QA testers and dev-ops engineers have been applying with outstanding results for clients on a global scale.
It’s pretty commonplace for websites to have hundreds of pages, featuring thousands of products and multiple brands. While it’s great that businesses are continuing to grow their online presence, for many, it means keeping their websites consistent is proving to be a challenge for web designers: what’s good for business can be bad for brand.
If all of a sudden you want to make a ‘quick’ change to one part of your site, it easily becomes a very time-consuming project - for example, if your new brand guidelines state buttons on your company website must be of a specific size and colour. Whether you need to ensure the change is implemented site-wide, or that any amends you make don’t impact the rest of your site’s elements, it’s easy to end up with a design that’s a little off-brand.
In this first chapter of our Designing at Scale series, we’ll take you through the tried and tested methods we use to futureproof our clients’ websites and systems, and how we deliver digital success fit for an increasingly competitive world.
Read more through our three part blog series:
Part 1: Saving time, money and resources using Atomic Design
www.proctors.co.uk/knowledge-...
Part 2: How semantic naming future-proofs your website
www.proctors.co.uk/knowledge-...
Part 3: Breathing life into your website with motion design
www.proctors.co.uk/knowledge-...
To see more of our work and stay up to date, give P+S a follow:
• Website: www.proctors.co.uk
• Facebook: / proctorsbristol
• Twitter: / proctorsbristol
• Instagram: / proctorandstevenson
• LinkedIn: / proctorsbristol
.
.
.
.
.
.
.
.
.
.
.
.
.
.
#atomicdesign #branding #brandingmaintenance #patternlibraries #webdesign #uidesign #designsystem #designsystems

Наука

Опубликовано:

 

27 авг 2019

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 50   
@prawiraadam
@prawiraadam 3 года назад
The animation is just on another level
@alvinrochafi6600
@alvinrochafi6600 2 года назад
I will call this a 6 million dollar video because it has a compact explanation and an amazing animation. Thank you for the video !
@virgilpana
@virgilpana 3 года назад
Jesus F**king Christ, just 150 subs for this much effort and animation quality ...
@kontak1501
@kontak1501 Год назад
🏆
@benmacl
@benmacl 2 года назад
This animation and video is absolutely beautiful. I've send this to clients.
@Demilada
@Demilada 8 месяцев назад
Absolute gem of a video for the visual learner 💎
@waterm3lonlover937
@waterm3lonlover937 3 года назад
Beautiful explanation! Thank you! Absolutely loved the animations to go with it
@andynonimuss6298
@andynonimuss6298 2 года назад
Atomic Design's ideas are nothing new. Designers have been using Design Systems (reusable components and patterns) from the very beginning with Photoshop. Adobe Flash also used reusable graphic "components". We just didn't call it Design Systems back then. Nowadays it's easier to create a Design System with the cloud-based ability in Adobe XD. I think Brad Frost is a cool guy, but he only highlighted the idea of the obvious. I understand the small to large analogy of Atomic Particles, but trying to inject science terms into design language makes the concept confusing for designers.
@novaria
@novaria Год назад
agreed, very good point.
@nneddenn6207
@nneddenn6207 6 месяцев назад
Wow, some gorgeous motion design and sleek graphics here!
@martyrk
@martyrk Год назад
one of the... most important vid in the world of UI/X design
@siddharthaneupane3721
@siddharthaneupane3721 2 года назад
This video is so creative! Amazing work! Subbed!
@rezajafary8710
@rezajafary8710 3 года назад
Great Explanation and animation. thanks
@estebanlopez5372
@estebanlopez5372 4 месяца назад
Amazing! Thank you so much
@irhamsahbana5210
@irhamsahbana5210 Год назад
Thank you dude, this video so amazing, its very helpful to me!
@zil_silver
@zil_silver 2 года назад
Amazing video and explanation 🔥🔥🔥
@d-landjs
@d-landjs 11 месяцев назад
Excellent Explanation and fantastic animation !!! Thanks u :D
@shamit3045
@shamit3045 Год назад
Thank you for this gem of a video
@megatronDelaMusa
@megatronDelaMusa 9 месяцев назад
This is absolutely mindblowing and futuristic.
@mayararodrigues1066
@mayararodrigues1066 Год назад
Amazing explanation!! something so easy to understand but hardly applied in most cases!
@kenkalonia4104
@kenkalonia4104 2 года назад
Deserves much more likes and subs
@jordidimass
@jordidimass 3 года назад
This channel might be bigger
@hanzlaahabib
@hanzlaahabib 2 года назад
excellent work
@QuanNguyen-og6pq
@QuanNguyen-og6pq 3 года назад
excellent video.
@ouhoy
@ouhoy 2 года назад
I love the animation!!!
@tazz763
@tazz763 2 года назад
This is awesome ,
@alimransujon6388
@alimransujon6388 2 года назад
Astonishing
@sayedpritom
@sayedpritom Год назад
Good presentation.
@artaahenda
@artaahenda 8 месяцев назад
nice vidio
@uixsohel
@uixsohel Год назад
ooooooommmmygooooood, subscribed bro. Keep me updated 😍
@TechnoAsh
@TechnoAsh 3 года назад
Thanks guys
@oyabun9650
@oyabun9650 Год назад
Great explanation and amazing animation, well done!
@alyssa7618
@alyssa7618 6 месяцев назад
Thank you so much for the great video! The summary at the end of the video really helped to memorize it!
@archivort
@archivort 7 месяцев назад
Very clean animations, clear narrators and concise info. Surprised you guys only have 1k subs with such high quality content. :V
@MarkWhiteartist
@MarkWhiteartist Год назад
Good in theory but you’re at the mercy of your prototyping tool. In adobe XD this level of organization works until you want to prototype advanced animations. Considering you can’t prototype a component state and outside object at the same time. You’d have to ungroup your component to create your animation. Which means that click once to change the color everywhere wouldn’t work. But this is great if you have just a few pages and basic animations.
@justinoneill2837
@justinoneill2837 Год назад
Sounds like you need a better tool
@tangik432
@tangik432 Год назад
You left out the ion
@Kumar-SKS
@Kumar-SKS 4 месяца назад
isn't it similar to bootstrap ?
@alexandersoltesz8103
@alexandersoltesz8103 4 месяца назад
man this video is 4 years old, come on :/
@nofavors
@nofavors 3 года назад
Anyone can start their own vodoo design system and name it atom, cell or organic and what not. Design systems are proprietary not generic. UX is domain specific not something that can be applied generally.
@nofavors
@nofavors 3 года назад
@@djhardaker21 yes there are some very common elements but that is not design system. That is just a style guide. A design system has interaction patterns that are domain specific. Noobs and wannabes are tyring to prove their worth by introducing concepts and ideas that are hurting UX. UX is not trivial and not easy. One can take any natural system such as galaxy, atom, molecule, human body or ecology and convert it into a design system. This is just utter jargon.
@nofavors
@nofavors 3 года назад
@@djhardaker21 Sorry to say I've to disagree with your first statement and then lets leave it at that.
@nofavors
@nofavors 3 года назад
@@DoPeTz Problem is that designers are adopting this blindly/without giving it much thought. How would you assume that this has got nothing to do with UX? Templates mentioned here are just bogus. In practice, what we needed are domain specific interaction patterns and not domain agnostic templates.
@alexisfy
@alexisfy 2 года назад
@@nofavors oh, I undterstand now, you are confused. You are saying that UI is UX. Atomic Design is the base where Design systems are built upon. It's about Scalable User Interface. The only thing this could be used for in UX is when you need to wireframe and even then, you use Industry standard elements. As they say, Atomic design is an industry standard by now. It has little of UX, specially for pattern libraries and basic Interface knowledge but only that. Atomic Design is a UI pillar, not a UX pillar. And, last but not least. Domain specific interactions are constrained by grafic elements and their possible combinations with the help of animations, responsiveness and states. And those interactions can be suggested in the Design system and can be treated in an atomic, molecular or organic level. You are not completely wrong, just very wrong.
@nofavors
@nofavors 2 года назад
@@alexisfy You are contradicting yourself in different paras that you have written. There is a barrage of noobs who think they have found the ultimate solution. "You are saying UI is UX" - that is your own interpretation, not mine. I wonder who is wrong here. What you are saying is that design systems don't include interaction patterns. You'll have a hard time convincing UX and UI experts about that. And who is "they" here? Never heard that it is a standard. Only thing is that noobs have been using it to define interaction patterns and proprietary solutions. At least from what I've seen. What atomic design is good at is breaking down UI and style gyide into understandable chunks. At best it is a UI framework.
@user-us7oi6jw5i
@user-us7oi6jw5i 9 месяцев назад
WTF am I looking at? lol.. This is a fantastic explainer, yes, but atomic? Haven't templates been around forever and global changes adjusted by CSS controls? not getting it
@user-us7oi6jw5i
@user-us7oi6jw5i 9 месяцев назад
(This is just a way to visualize templating i reckon)
@JanSnieg
@JanSnieg Месяц назад
Where is the place for the real data? Like which of these are dumb and smart components
@Cotita
@Cotita Год назад
This "atom design" thing is nothing new. Just fancy words to say "abstraction", a basic notion widely used in programming to help maintain and escalate software. Just the same as RU-vid letting you "maintain" and reutilize your video by letting you update the year number in the title each time to match the current year 😂
Далее
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 725 тыс.
Atomic Design - How To Make Web and UI Design Easier
10:04
Dragon Age: The Veilguard | Official Gameplay Reveal
20:23
10 Design Patterns Explained in 10 Minutes
11:04
Просмотров 2,2 млн
Atomic Design in React | Storybook in React
11:20
Просмотров 4,8 тыс.
The Laws of UX - 19 Psychological Design Principles
10:04
Atomic Design 101: What is it and How to Use it
11:51
Просмотров 2,6 тыс.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
How to Properly Layout A Website (For Beginners)
14:50
Просмотров 506 тыс.
Atomic design
19:09
Просмотров 12 тыс.
5 laws of design layout & composition *golden rules*
7:01
WWDC 2024 - June 10 | Apple
1:43:37
Просмотров 9 млн
Автодержатель телефона
0:29
Просмотров 11 тыс.
Ноутбук без экрана
0:22
Просмотров 14 тыс.