طراحی تخت: چرا طراحی مسطح شد؟ طراحی تخت: گذشته، حال و آینده مزایا و معایب سبک.

نسبتاً اخیراً چنین جهت طراحی مانند طراحی FLAT یا طراحی مسطح رایج شده است.

کاربران ویندوز 8 و نسخه های بعدی از قبل با طراحی FLAT آشنا هستند، زیرا اولین چیزی که هنگام بارگذاری سیستم با آن مواجه می شوند این صفحه است.

ظاهر طراحی FLAT به دلیل گسترش اپلیکیشن های موبایل است. و من فکر می کنم این به دلیل این واقعیت است که اشیاء طراحی FLAT با استفاده از اشیاء برداری ایجاد می شوند و بر این اساس سازگاری آنها با پلتفرم های مختلف ابزار آسان تر است.

FLAT – طراحی دارای ویژگی های زیر است:

رد کامل یا جزئی گرادیان ها، بافت های پیچیده و سایه ها ، که من به شخصه بسیار خوشحالم. من هیچ شکایتی در مورد سایه ها ندارم و خودم عاشق استفاده از آنها هستم، اما اجازه دهید مشکلات ابدی با نمایش گرادیان برطرف شوند.

تایپوگرافی، هندسه به منصه ظهور می رسند. به خصوص وقتی صحبت از طراحی وب می شود.

هارمونی و. در طراحی از تعداد محدودی رنگ استفاده شده است. در اینجا نمونه ای از پالت طراحی FLAT محبوب است.

استفاده از آیکون های خلاقانه آموزنده

همانطور که قبلاً گفتم، طراحی FLAT در برنامه های تلفن همراه بسیار محبوب شده است، زیرا ویژگی اصلی آن سادگی چیدمان و سازگاری است. طراحی FLAT همچنین در اینفوگرافیک ها رواج یافته است، زیرا مبتنی بر درک هماهنگ اطلاعات از طریق استفاده از تکنیک های سازنده تایپوگرافی و رنگ است.

زمانی محبوب ترین گرایش در طراحی وب سایت وب 2.0 بود. اکنون جای آن با طراحی FLAT گرفته شده است. مد عادت دارد به گذشته های فراموش شده برگردد تا چیز جدیدی از آن بسازد. چه کسی می داند چه زمانی طراحی FLAT از مد می افتد، اما در حال حاضر از سادگی، هماهنگی و محتوای اطلاعاتی روند فعلی لذت ببرید. به هر حال، طراحی تخت قبلاً در دهه 80 محبوب بود، اما پس از آن به دلیل ویژگی های فنی و ناتوانی در نمایش سایه ها و گرادیان ها بود. و اکنون اکثر شرکت های پیشرو فناوری اطلاعات به طراحی Flat روی آورده اند.

خوب، ما نیز با جهان در حال تغییر سازگار خواهیم شد. در مقاله بعدی به شما نشان خواهم داد که چگونه می توانید با استفاده از اشکال ساده در فتوشاپ آیکون های سبک FLAT ایجاد کنید.

اگر انتشارات من به شما علاقه مند است، پس پیشنهاد می کنم از آخرین به روز رسانی های سایت مطلع شوید.

(بازدید شده 2,333 بار، 1 بازدید امروز)

چه کسی برنامه های تلفن همراه و وب سایت ها را توسعه می دهد، یک ستون برای ما نوشت و همه چیز را در مورد طراحی مسطح و متریال در جای خود قرار داد.

به طور کلی، تفاوت بین طراحی تخت و طراحی متریال ظریف است. برای شخصی که دانش عمیقی از طراحی گرافیک ندارد، ممکن است در واقع بسیار شبیه به نظر برسد. در این مقاله سعی می کنم برخی از تفاوت های بین آنها را "روشن کنم". دانش اضافی را دریافت خواهید کرد که بسیار ضروری است تا به طور تصادفی به طبیعت ظریف طراح آسیب نرساند.

کمی تاریخچه

قبل از شروع صحبت در مورد تفاوت بین دو محبوب ترین روند طراحی، بیایید دریابیم که آنها از کجا آمده اند. عقیده ای وجود دارد که طراحی مواد بر اساس یک تخت ایجاد می شود. پس طراحی تخت از کجا آمده است؟

اسکئومورفیسم

هنگامی که صحبت از رابط کاربری و طراحی وب می شود، مفهوم اسکئومورفیسم به رویکردی اشاره دارد که ایده اصلی آن تقلید است. بدون پرداختن به جزئیات زیاد، اجازه دهید رابط‌های پیش از iOS 7 اپل را با «بافت‌ها، نورپردازی و جلوه‌های وحشتناک واقعی» به یاد بیاوریم.

تلاش برای شبیه سازی اشیاء دیجیتالی به همتایان دنیای واقعی خود با انگیزه نیاز به تسهیل تعامل کاربر با دستگاه انجام شد. در واقع، به همین دلیل است که همه رابط‌ها با بافت‌های واقع‌گرایانه برای سال‌ها بر دنیای دیجیتال تسلط داشته‌اند. طراحی Skeuomorphic به کاربران کمک می کند تا به طور یکپارچه از دنیای واقعی به دنیای دیجیتال منتقل شوند.

با این حال، با ظهور فناوری تلفن همراه، به تدریج نیاز به تمرکز در درجه اول بر راحتی و سهولت استفاده احساس می شود. موافقم، در این زمینه نیاز به ایجاد راه حل های تلفن همراه قابل دسترسی از دستگاه های مختلف به طور قابل توجهی در حال افزایش است. و در همین لحظه، سادگی به استاندارد طراحی جدید تبدیل می شود.

توجه: تحت هیچ شرایطی فکر نکنید که اسکئومورفیسم کاملاً از بین رفته است. این به طور گسترده در بازی هایی استفاده می شود که در آن لازم است دنیایی واقع گرایانه ایجاد شود و به بازیکنان کمک کند شخصیت خود را احساس کنند تا عمیقاً خود را در روند بازی غرق کنند.

طراحی تخت

این سبک کاملاً عاری از هر گونه اشیاء سه بعدی است. به طور کلی، طراحی مسطح فاقد عناصر سبکی مانند سایه‌ها، بافت‌ها، گرادیان‌ها است، اما به بازی فونت‌ها و رنگ‌ها و نمادها توجه می‌کند. اما چرا این همه لازم بود؟ پاسخ ساده است.

اولا، طراحی مسطح زمان بارگذاری صفحه را به میزان قابل توجهی کاهش می دهد. فقدان جزئیات اسکئومورفیک «سنگین» (فکر کنید: لایه‌ها، فونت‌های سریف، گرادینت‌ها) عناصر طراحی مسطح را «سبک‌تر» می‌کند، که به نوبه خود زمان بارگذاری را به طور قابل توجهی سرعت می‌بخشد. علاوه بر این، عناصر تخت در هر دو صفحه نمایش با وضوح بالا و پایین به یک اندازه جذاب به نظر می رسند.

ثانیاً، تصاویر ساده می توانند ایده شما را سریعتر از تصاویر دقیق به کاربران منتقل کنند: آنها طرح دار هستند و بنابراین درک آنها آسان است.

و البته، آیکون های مسطح با فونت نسبتاً ساده می توانند توجه کاربران را به محتوای واقعاً مهم هدایت کنند.

امروزه طراحی مسطح به رسمیت شناخته شده است، اما هنوز هم مشکلات خود را دارد. بارزترین نمونه چنین مشکلاتی انتشار ویندوز 8 توسط مایکروسافت بود. این سیستم عامل یکی از پیشگامان طراحی مسطح محسوب می شود و از مفهوم طراحی مترو پشتیبانی می کند. چیزی که منجر به مشکلات شد این بود که شرکت توجه بیشتری به تایپوگرافی نسبت به خود گرافیک را ضروری می دانست.

نتایج آزمایش قابلیت استفاده ویندوز 8 که توسط گروه NN انجام شد نشان داد که کاربران در تشخیص اشیای قابل کلیک از غیرقابل کلیک مشکل داشتند. کاربران شکایت داشتند که اشیایی که ثابت به نظر می‌رسند واقعاً قابل کلیک هستند. در نتیجه، ماموریت اصلی شرکت - کمک به کاربران برای تفسیر صحیح سیستم - شکست خورد.

شرکت دیگری که اغلب با طراحی تخت همراه است، اپل است. آنها از عناصر طراحی اسکئومورفیک در سیستم عامل موبایل iOS 7 که در سال 2013 منتشر شد، فاصله گرفتند. این بار انتقال کمی بهتر دریافت شد، عمدتاً به این دلیل که این شرکت سعی نکرد مفهوم رابط کاربری را به طور کامل به روز کند، بلکه فقط چند تغییر را به سمت طراحی مسطح اضافه کرد. این به کاربران اجازه می داد تا با تکیه بر تجربه قبلی خود در سیستم عامل ها و وب سایت ها از محصول استفاده کنند.

طراحی متریال

بیایید در حال حاضر واضح بگوییم: طراحی متریال بیشتر یک محصول مارکدار است تا یک روند طراحی خود به خودی که مقبولیت گسترده ای پیدا کرده است. این چیزی است که به طور عمده آن را از طراحی تخت آن متمایز می کند.

منظور من از نامیدن مواد طراحی "برند" این است که مجموعه ای کامل از توصیه ها و اصول به وضوح تعریف شده دارد که هر طراح محترمی از آنها پیروی می کند. کاملاً واضح است که چرا Google Material Design خود را معرفی کرد: نیاز به یکپارچه سازی طراحی وجود داشت تا برنامه ها در هر یک از بسیاری از دستگاه های اندرویدی یکسان به نظر برسند.

اگرچه کاملاً کاربردی است، اما هنوز درک طراحی مسطح دشوار است. حقیقت این است که اشیاء مسطح روی صفحه می توانند کاربران را گیج کنند (مخصوصاً کسانی که در استفاده از رابط های تلفن همراه و وب تجربه ندارند). بنابراین، طراحی متریال سعی می کند عناصر اسکومورفیسم را بازگرداند، اما به شکل بسیار ساده شده. تصاویر صاف به نظر می رسند، به خصوص وقتی صحبت از رنگ ها می شود، اما به لطف وجود محور Z همچنان چند بعدی هستند.

به عبارت دیگر، طراحی متریال را می توان نسخه بهبود یافته طراحی مسطح با عناصر اسکومورفیسم - انیمیشن، سایه ها و لایه ها نامید. به این ترتیب می توانید محصول را از نظر ناوبری بصری تر کنید و از پیچیدگی های غیر ضروری در سبک کلی جلوگیری کنید.

مزایا و معایب طراحی تخت

بیایید تاریخچه تکامل سبک ها را پشت سر بگذاریم و به چیز مهمتری برویم - نقاط قوت و ضعف طراحی تخت را فهرست می کنیم.

مینیمالیسم و سبک
شهود. انتقال ایده خود به کاربران برای شما آسان تر خواهد بود.
صرفه جویی در زمان و منابع. صفحات بسیار سریعتر با مصرف پهنای باند کمتر بارگیری می شوند.
روی محتوا تمرکز کنید. این رابط فاقد جزئیات غیر ضروری است که می تواند حواس را از اطلاعات واقعاً ارزشمند منحرف کند.
در دستگاه های مختلف به همان اندازه خوب به نظر می رسد، چه یک مرورگر رایانه شخصی یا یک تلفن هوشمند.
با حذف لمس های غیر ضروری طراحی، روند توسعه وب سایت یا برنامه را سرعت می بخشد.

سبک مینیمالیستی
کاملاً شهودی در سطح شهودی. درک طراحی متریال هم برای کاربران با تجربه و هم برای مبتدیان به همان اندازه آسان خواهد بود.
اسکئومورفیسم متوسط. به لطف استفاده از محور Z (مفهوم منحصر به فرد گوگل) همه چیز واقعی تر به نظر می رسد.
مجموعه ای از دستورالعمل ها وجود دارد که دائماً به روز می شوند. بنابراین، هر طراح همیشه می تواند در صورت بروز مشکلات در طول فرآیند کار، به آنها مراجعه کند.
انیمیشن برای راه حل های وب تشویق می شود. نیازی به یادآوری نیست که مردم چقدر حرکت را دوست دارند. علاوه بر این، انیمیشن به شما این امکان را می دهد که رابط کاربری را واضح تر و شهودی تر کنید.

مالک (شرکت گوگل) دارد. بنابراین، هر گونه سوال و پیشنهاد برای بهبود باید به مالک خطاب شود.
با توجه به محور Z، فرآیند طراحی ممکن است طول بکشد تا تکمیل شود.
عناصر متحرک به منابع بیشتری نیاز دارند.
رعایت دقیق دستورالعمل ها می تواند اصالت یک طرح را محدود کند.

بیایید آن را جمع بندی کنیم

در واقع، یکی از رویکردهای طراحی مورد بررسی نباید دارای مزیت آشکار نسبت به دیگری در نظر گرفته شود، زیرا سبک های تخت و متریال در کنار یکدیگر قرار می گیرند. هر دو فوق العاده محبوب هستند و هر دو فاقد واقع گرایی بیش از حد هستند. طراحی متریال جانشین طراحی تخت است، در حالی که طراحی تخت خود واکنشی به راه حل هایی بود که بیش از حد سنگین و واقعی بودند. طراحی متریال چیزی را اضافه کرد که طراحی مسطح همیشه سعی کرده است از آن دور شود - کمی اسکومورفیسم. اگرچه یک چیز همیشه بین این رویکردها متفاوت است: طراحی متریال محصول اختصاصی Google است و طراحی مسطح نتیجه ادغام چندین روش طراحی است که در درجه اول برای سادگی کلی تلاش می کند.

در حقیقت، طراحی تخت در سال های اخیر بسیار تکامل یافته است، از سبک کاملاً "مسطح" به سبک "نیمه تخت". اکنون امکان استفاده از لایه‌ها و سایه‌های ظریف را فراهم می‌کند تا اجسام عمیق‌تر از آنچه قبلاً ظاهر می‌شدند ظاهر شوند. بنابراین، من و شما معاصران خوشحال طراحی تخت 2.0 هستیم.

در نهایت، هیچ چیز مانع از تلاش شما برای ترکیب این دو رویکرد برای ایجاد یک محصول واقعا کاربردی و کاربرپسند نمی شود. بنابراین، از استادان طراحی مسطح و متریال الهام بگیرید و دست به کار شوید!

اگر اشتباه تایپی پیدا کردید، آن را برجسته کنید و Ctrl + Enter را فشار دهید! برای تماس با ما می توانید استفاده کنید.

تخت - طراحی (طراحی تخت) یک سبک محبوب در طراحی وب سایت ها و رابط ها و همچنین سیستم عامل ها است که از ویژگی های بارز آن سادگی، پیچیدگی و مینیمالیسم است. طراحی مسطح در سال 2010 به عنوان مخالف اسکومورفیسم محبوبیت پیدا کرد.

اسکئومورفیسم- یک زیور فیزیکی یا عنصر طراحی که از شکل یک شی دیگر کپی شده، اما از مواد مختلف یا با استفاده از روش های مختلف ساخته شده است. نمونه‌ها عبارتند از سفال‌هایی که با پرچ‌های بدلی تزئین شده‌اند تا شبیه گلدان‌های فلزی مشابه باشند، یا تقویم رایانه‌ای که ظاهر صفحات منگنه‌شده تقویم رومیزی کاغذی را تقلید می‌کند (تعریف از ویکی پدیا).

محبوبیت سبک مسطح در طراحی با انتشار سیستم عامل ویندوز 8 از مایکروسافت به سبک مترو و همچنین iOS 7 تسهیل شد که در آن اپل نیز سبک مسطح را انتخاب می کند. پس از این است که دوران واقعی طراحی تخت آغاز می شود. به زودی، سرویس‌ها و برنامه‌های جستجوی بزرگ - گوگل، یوتیوب - به طراحی Flat تغییر می‌کنند، بسیاری از سایت‌ها که از اصول سبک مسطح در طراحی خود استفاده می‌کنند. در سال های اخیر، طراحی تخت پیشرو در روند طراحی وب سایت جهانی بوده است.

مزایای طراحی تخت

عملی بودن- استفاده از طراحی مسطح به شما امکان می دهد تعداد سبک ها، اسکریپت ها و انیمیشن ها را به حداقل برسانید، که به سایت اجازه می دهد سریعتر بارگذاری شود.
سازگاری آسان- طراحی مسطح برای انطباق با وضوح های مختلف صفحه به اندازه کافی آسان است.
سهولت استفاده- به لطف سبک ساده شده، درک اطلاعات در سایت برای کاربران آسان تر است.
زیبایی- بی طرفی خارجی و طراحی های ساده به شما امکان می دهد روی طرحی تمرکز کنید که واقعاً شما را جذب می کند.

5 اصل طراحی وب سایت تخت

طراحی تخت اصلاً خسته کننده نیست، همانطور که ممکن است در نگاه اول به نظر برسد. به لطف خلوص و پیچیدگی آنها، راه حل های طراحی می توانند شیک و زیبا، بدون سر و صدای غیر ضروری باشند و به شما این امکان را می دهند که روی محصول یا خدمات خود تمرکز کنید.

1 - استفاده از اشیاء دو بعدی

طراحی مسطح استفاده از عناصری را که به یک شی عمق و حجم می بخشند، حذف می کند: سایه ها، شیب ها، برجسته ها، بافت ها، بازتاب ها، انیمیشن. هنگامی که یک شی تصویربرداری می شود، فقط خطوط کلی آن نمایش داده می شود.

2 - آیکون ها و اشیاء ساده

استفاده از آیکون های تخت و اشکال تک هجا با خطوط واضح و یک رنگ به شما این امکان را می دهد که طرح را تا حد امکان ساده کرده و آن را سبک تر کنید. کنترل ها برای کاربر شهودی می شوند و تعامل را تشویق می کنند.

3 - فونت های ساده در سبک طراحی

توجه زیادی به تایپوگرافی و فونت در طراحی تخت می شود. در اینجا از حروف کج استفاده نمی شود. حتی در انواع فونت برای سایت، سبک مینیمالیستی تشویق می شود.

4 - بازی رنگ ها

طراحی مسطح شامل چندین رنگ اصلی است که استفاده از انتقال ها و گرادیان های صاف را حذف می کند، اما می تواند روشن و متضاد با یکدیگر باشد.

5 - مینیمالیسم

طراحی مسطح شامل استفاده از تجسم عناصر، استفاده از کل عرض صفحه و در عین حال به حداقل رساندن اطلاعات است.

چیزی به نام طراحی تقریبا مسطح وجود دارد. این یکی از مفاهیم طراحی تخت است که مبتنی بر استفاده از عناصر ساده و فضای دو بعدی است. نمونه‌ای از این می‌تواند یک عکس با کیفیت بالا باشد که پس‌زمینه را محو یا تیره می‌کند. این به شما امکان می دهد عمق و پرسپکتیو شی را ایجاد کنید.

نمونه های طراحی تخت

در اینترنت، از جمله در بخش بلاروس، می توانید نمونه های زیادی از توسعه وب سایت هایی با طراحی مسطح در موضوعات مختلف از جمله منابع خبری، پورتال ها و حتی فروشگاه های آنلاین پیدا کنید.

از نویسنده:درود، دوستان! امروز در مورد طراحی فلت یا طراحی وب سایت تخت صحبت خواهیم کرد. این اصطلاح مدتهاست که قلب طراحان وب را به دست آورده است و امروزه نیز با اطمینان در حال ترند است. بزرگترین شرکت ها (گوگل، یوتیوب، مایکروسافت، اپل، و غیره) از آن برای طراحی وب سایت ها و برنامه های خود استفاده می کنند. آیا هنوز در فرقه طرفداران طراحی وب سایت مسطح نیستید؟ پس ما به سمت شما می آییم!

به نظر شما دلیل این همه محبوبیت وحشیانه طراحی تخت چیست؟ من به طور خلاصه به شما پاسخ می دهم: واقعاً کار می کند! در این مقاله، من به شما توضیح می دهم که این سبک چیست، در مورد مزایا و معایب آن به شما می گویم و چند نمونه عالی از طراحی وب سایت تخت را به شما نشان می دهم که مطمئناً شما را برای انجام کارهای بزرگ ترغیب می کند. پس بیا بریم!

همه چیز با اسکئومورفیسم شروع شد

برای کسانی که نمی دانند، اسکیومورفیسم یک کلمه کثیف نیست، بلکه سبک دیگری از طراحی وب است. طراحی مسطح اغلب به عنوان مخالف اسکومورفیسم ارائه می شود که به نظر من کاملاً صحیح نیست. این بیشتر یک ساده سازی است تا یک تضاد.

تا سال 2010، اسکئومورفیسم سبک غالب در طراحی رابط بود. او عناصر را همانطور که در واقعیت ظاهر می شد، به نمایش می گذاشت و به طور فعال از بافت ها، سایه ها، بازتاب ها و سایر ویژگی های یک تصویر سه بعدی استفاده می کرد. اپل تلاش های خاصی در این زمینه انجام داد و اکثر اشیاء نرم افزاری را با دقت از اشیاء واقعی کپی کرد.

به زودی، آیکون های شبه محدب دیگر جذب اکثر کاربران و توسعه دهندگان وب نشدند، که نشان دهنده آغاز عصر طراحی وب سایت تخت بود. دنیا به این نتیجه رسیده است که تمام عناصر تزئینی باید حذف شوند و تنها چیزی که برای تعامل کاربر نهایی راحت است باید باقی بماند.

"بهترین طراحی، طراحی کمتر از حد ممکن است"

چگونه دیتر رامز به آب نگاه کرد - یک طراح صنعتی معروف که مخالف طراحی مزاحم، جلوه های انیمیشن و غیره است. در ژوئن 2013، Apple Inc. iOS 7 انقلابی را معرفی کرد که تمام ویژگی های سبک طراحی وب تخت را دریافت کرد. با این حال ، هواپیما بلافاصله واقع گرایی و حجم را "شکست" نداد.

برای مدت طولانی، کاربران نمی‌توانستند جادوی استیو جابز و نمادهایی را که «می‌خواهی لیس بزنی» فراموش کنند. بسیاری حتی با "هفت فقیر" خداحافظی کردند و به "اندروید تابشی" روی آوردند. سوخت به آتش، تعداد زیاد باگ‌های موجود در iOS 7 و طراحی سفید و شفاف با اختلاف منظر و انیمیشن «snot» هنگام باز کردن برنامه‌ها بود.

کسانی که خود را به واقعیت اجتناب ناپذیر تسلیم کردند و با سیستم عامل اپل باقی ماندند، در نهایت متوجه شدند که طراحی وب تخت نه تنها جالب به نظر می رسد، بلکه نظم و سبک بصری یکپارچه را برای همه برنامه ها به ارمغان می آورد.

مزایا و معایب طراحی تخت

مزایای استفاده از این سبک عبارتند از:

وضوح ترکیب و مختصر بودن وسایل کمک بصری. رابط پاسخگو به سبک "هیچ چیز اضافی"، که به لطف آن کاربران به سرعت متوجه می شوند که چه چیزی را می خواهند به آنها منتقل کنند.

تاکید بر تایپوگرافی خوب محتوا در درجه اول قرار دارد، که در فراوانی اطلاعات امروزی بسیار مهم است.

اندازه کوچکتر صفحات وب و عملکرد سریعتر سایت به دلیل حداقل تعداد جلوه های بصری. این به ویژه هنگام ایجاد نسخه‌های تطبیقی مفید است، زیرا هر چه فرم‌ها ساده‌تر باشند، نمایش آن‌ها در صفحه‌نمایش‌های کوچک دستگاه‌های تلفن همراه آسان‌تر است.

طراحی وب تخت دارای معایبی نیز می باشد:

محدود کردن تخیل طراح وب به رنگ های ساده، تایپوگرافی و شمایل نگاری. بنابراین، خطر ایجاد یک وب سایت خسته کننده و غیر قابل بیان بیشتر است.

فقدان سه بعدی بودن و سایه ها گاهی اوقات درک اینکه آیا یک عنصر قابل کلیک است یا خیر دشوار می کند.

عدم وجود قوانین ثابت مشخص

اگر تصمیم گرفته اید از این سبک در سایت خود استفاده کنید، به شما تبریک می گویم - این نشان می دهد که به تجربه کاربر اهمیت می دهید و با زمان همگام هستید. اگر به‌تازگی به‌عنوان یک طراح وب شروع به کار کرده‌اید و نمی‌دانید چگونه به درستی از طراحی مسطح استفاده کنید تا سایت خود را بدون ساده انگاری مرتبط جلوه دهید، این نکات را امتحان کنید:

"دیوارهای آجری" و پس زمینه های روشن را فراموش کنید. طراحی وب تخت تمایل دارد از تصاویر ساده، صاف و نرم برای پس زمینه استفاده کند.

روندها و رویکردهای مدرن در توسعه وب

الگوریتم رشد سریع را از ابتدا در ساخت وب سایت بیاموزید

بدون شیب، آیکون های سه بعدی، انتقال متحرک یا جلوه های ویژه دیگر. همه اینها سایت شما را سنگین تر می کند و سر و صدا را افزایش می دهد - آیا به آن نیاز دارید؟

از نمادهای مسطح با خطوط واضح برای افزودن راحتی و عملکرد استفاده کنید.

از یک پالت رنگ روشن و غنی استفاده کنید. اکنون روند رنگ‌های طیف خورشیدی است: زرد روشن، صورتی و سبز. نکته اصلی این است که زیاده روی نکنید - نباید بیش از 3 رنگ در صفحه وجود داشته باشد.

روی تایپوگرافی تمرکز کنید در طراحی مسطح، اولویت به کتیبه های روشن و اصلی داده می شود که فراخوانی برای اقدام ایجاد می کند و ناوبری آسان در اطراف سایت را فراهم می کند. در اینجا نیز مهم است که زیاده روی نکنید. فونت‌های «دست‌نویس» و دیگر فونت‌های فانتزی را فراموش کنید. برای برجسته کردن عنوان ها می توان از حروف بزرگ استفاده کرد.

با خیال راحت از انواع اشکال هندسی استفاده کنید. مربع، دایره، خطوط و اشکال دیگر نه تنها ساختار یک وب سایت را بهبود می بخشد، بلکه یک سلسله مراتب واضح ایجاد می کند و محتوا را تقسیم می کند. باور کنید کاربران از این موضوع قدردانی خواهند کرد.

منوی پیمایش و سایر عناصر سایت را تا حد امکان ساده کنید. برای دکمه ها، از مستطیل های معمولی بدون سایه یا هایلایت استفاده کنید.

بنابراین، در طول سال‌ها، وب‌سایت‌های طراحی مسطح به استانداردی تبدیل شده‌اند که مطلقاً همه آن را پذیرفته‌اند. به اکثر وب سایت های مدرن نگاه کنید - آنها تا هسته صاف هستند.

در نهایت، من نمونه های وعده داده شده از طراحی تخت موفق را ارائه خواهم کرد که می تواند به عنوان الهام بخش شما برای ایجاد شاهکارهای خود باشد.

1. وب سایت http://dunked.com.

یک پلت فرم محبوب برای انتشار نمونه کارها، با هدف نمایندگان حرفه های خلاق مختلف. طراحی وب تخت مینیمالیستی احساس یک سرویس قابل اعتماد و قابل درک را القا می کند که با جلوه های ویژه غیر ضروری حواس را پرت نمی کند.

2. رابط مایکروسافت.

مایکروسافت یکی از شرکت هایی است که سبک تخت را تا این حد محبوب کرده است. شاید به یاد داشته باشید پخش کننده Zune، رقیب آی پاد، که مایکروسافت در اواسط دهه 2000 عرضه کرد؟ بنابراین، طراحی این محصول به شدت به دلیل تایپوگرافی بزرگ، آیکون های مسطح، اشکال بزرگ و روشن، با اکثر کاربردهای آن زمان تفاوت زیادی داشت.

این رابط که مترو نام داشت، بعداً به رایانه های شخصی (سیستم عامل ویندوز 8)، رابط Xbox 360 و سایر محصولات نرم افزاری Mircosoft منتقل شد.

3. وب سایت http://www.vox.com.

خوب، آیا شما الهام گرفته اید؟ مرگ بر زیبایی شناسی سه بعدی شبه واقع گرایانه!

همین. مشترک شوید و مقالات ما را با دوستان خود در شبکه های اجتماعی به اشتراک بگذارید. تبدیل بالا به شما!

روندها و رویکردهای مدرن در توسعه وب

الگوریتم رشد سریع را از ابتدا در ساخت وب سایت بیاموزید

وب‌سایت‌هایی در سبک طراحی مسطح مانند یک فضای بلوک هندسی ساده با لهجه‌های رنگی (آیکون‌ها، متن‌های برجسته، اینفوگرافیک) با حداقل جزئیات گرافیکی و بدون اطلاعات متنی اضافی به نظر می‌رسند. همانطور که می گویند، "مینیمالیسم" و هیچ چیز اضافی.

چگونه آیکون های تخت نکشیم

طراحی وب سایت "مسطح" همراه با رابط های جدید ویندوز مد شده است. محبوبیت روزافزون این سبک در روسیه با افزایش تعداد طراحان وب خودآموخته که نمی دانند رابط وب سایت و رابط "انگشتی" (گوشی های هوشمند) یکسان نیستند تسهیل شده است (پیمایش آسان است. صفحه را با انگشت خود پایین بیاورید - و برعکس، برای پایین آوردن چرخ ماوس 3-4 صفحه نمایشگر به صبر و علاقه واقعی زیادی نیاز خواهید داشت). در سایت های مسطح روسی اغلب می توانید نمادهای زیر را پیدا کنید:

نمونه فقط رنگ های روشن است که با یکدیگر تناسب ندارند + نمادهای با کیفیت پایین (من نمونه را از یک مجموعه پولی گرفتم، اما تقریباً همیشه فریلنسرها از آیکون های بارگیری رایگان از مجموعه های مختلف استفاده می کنند که با یکدیگر همخوانی ندارند) .

به دلیل ناتوانی در ترسیم گرافیک با کیفیت، طراحان تازه کار به راحتی از فرصت استفاده می کنند و همه چیز را ساده می کنند. در عین حال، نادیده گرفته می‌شود که طراحی به سبک «مینیمالیستی» مستلزم شرح دقیق جزئیات با کیفیت بالا است و نه صرفاً قرار دادن نمادهای دانلود شده از اینترنت بر روی مربع‌های رنگی به سبک ویندوز 8 (که اکنون می‌توانید آنها را پیدا کنید. در بسیاری از صفحات فرود ظاهراً مدرن).

نمونه ای از آیکون های مسطح خوب:

رنگ ها و نمادها نه تنها باید با یکدیگر ترکیب شوند، بلکه باید یک کل واحد را تشکیل دهند.

مشکلات طراحی تخت با کیفیت پایین

1. ناوبری و قابلیت استفاده

شبکه یک فضای واقعی نیست، بنابراین، برای ایجاد حس واقعیت و درک مکان شما، سایت‌ها از «خرده‌های نان» استفاده می‌کنند و تصاویر آیکون‌ها برای درک سریع و سهولت ناوبری به اشیاء واقعی نزدیک هستند. بنابراین، با نماد خانه بلافاصله مشخص می شود که این "خانه" است، با نماد گوشی - که این یک تلفن است، توسط سبد - که این یک سبد است (مانند یک سوپرمارکت - همه چیز واضح است و ساده)، یک نماد با تصویر یک هدیه - یک هدیه و غیره.

با این حال، طراحان تخت جدید اغلب آیکون ها را بیش از حد ساده می کنند. و هر چه طراحان بیشتر از تصاویر بصری باشند، تفسیر آنها برای کاربر دشوارتر است. ساده سازی بیش از حد، گاهی ناوبری را دشوار می کند. به محض اینکه همه برای ایجاد طراحی وب سایت مسطح شیک عجله کردند و سعی کردند از طراحان اروپایی تقلید کنند، قوانین ساده استفاده فراموش شد.

2. پیچ های بلند پای صاف

صفحات 3-4 صفحه نمایش به سمت پایین کشیده می شوند، در حالی که فضا نه تنها به مقدار کم استفاده می شود، بلکه برعکس، مقدار زیادی "هوا" اضافه می شود. در عین حال، هیچ انگیزه بصری برای اسکرول وجود ندارد - بدون تراشه، بدون انیمیشن. اینکه چگونه توسعه‌دهندگان برنامه‌ریزی کرده‌اند که بازدیدکنندگان را به پایین کشیدن صفحه علاقه‌مند کنند، مشخص نیست. از این گذشته، در مقایسه با سایت‌هایی که همه چیز جمع و جور است، سایت‌های پارچه‌ای برای حرکت دادن ماوس در کل صفحه و اسکرول به انرژی زیادی نیاز دارند.

3. دکمه های گیج کننده

در سایت های مسطح، عناصر فعال دیگر مشخص نیستند. با ظهور طراحی تخت، دکمه ها نیز صاف شدند. اما تصویر بصری دکمه از یک دکمه فیزیکی واقعی می آید، و سایه ها و گرادیان ها فقط نشان می دهند که "شما قطعا می توانید اینجا را کلیک کنید."

4. آیکون های ضعیف کشیده شده است

به دلیل کار نامناسب طراحان، آیکون ها در وب سایت ها (این امر به ویژه در وب سایت های سبک مسطح قابل توجه است) تصاویر قابل پیش بینی خود را از دست داده اند. یا به دلیل بودجه طراحی محدود، یا به دلیل بی کفایتی خود طراحان وب، عناصر ناوبری در سایت ها اغلب با انجمن های اولیه مطابقت ندارند و "دور از تصور" هستند.

من فرض می‌کنم که کار روی ایجاد آیکون‌ها چیزی شبیه به این است: با توجه به مشخصات فنی، نماد "رویکرد فردی به مشتریان" مورد نیاز است. من شخصاً تصویری از یک مدیر و دو مشتری دارم که هر یک از آنها توسط یک فلش با رنگ متفاوت هدایت می شوند (یک فلش آبی به مشتری آبی منتهی می شود و یک فلش قرمز به مشتری قرمز منتهی می شود). اگر طراح نقاشی بلد نباشد در مجموعه های آماده به دنبال نماد می گردد (در بهترین حالت از بانک عکس می خرد و در بدترین حالت از اینترنت دانلود می کند) و از آن چیزی استفاده کنید که از نظر معنی مناسب تر است. به احتمال زیاد، این نماد یک مرد با کراوات یا چمدان خواهد بود. به طور کلی، او خیلی دور نرفت، اما هنوز در طراحی سایت مشخص خواهد شد که چمدان برای "رویکرد فردی به همه" و ساعت برای "10 سال در بازار" (به هر حال، من در واقع دیدم آن!) - طراح تقلب کرد.

5. تمرکز بر محتوای نادرست

طراحی وب سایت تخت بر روی محتوا تمرکز می کند. خوب، بدیهی است - اگر تأکید بر گرافیک نیست، پس بر روی اطلاعات. اما اگر به صفحات فرود "مدرن" به سبک مسطح ارائه شده توسط استودیوهای وب روسی با دقت نگاه کنید، توجه کمی به محتوا می شود. یعنی:

متن به صورت تصادفی ارائه شده است. مشخص نیست لهجه ها چگونه در آن قرار گرفته اند، به چه چیزی بچسبند و چه چیزی فرعی است.
هیچ طراحی به این صورت وجود ندارد. جداول، فهرست‌های گلوله‌دار، سرفصل‌ها، اعلان‌ها اغلب اصلاً ایجاد نمی‌شوند.
متن اغلب خالی هیچ تصویر یا نمادی برای پشتیبانی بصری بلوک های متنی وجود ندارد. در نتیجه، تأکید نه بر گرافیک و نه بر متن، بلکه بر خود «سبک» است. در همان زمان، شرکت و پیشنهادات آن از بین می رود.

پس آیا اصلا طراحی مسطح برای وب سایت ها ضروری است؟

همه چیز با طراحی رابط های تلفن های هوشمند روشن است - سبک، بدون بار، آسان برای استفاده. اما با طراحی وب سایت به سبک فلت، شخصاً یک سوال بزرگ دارم: آیا اصلاً مؤثر است؟

اکثر مشتریان کیفیت گرافیک را درک نمی کنند و هنگام تایید یک طراحی وب سایت، با سلیقه شخصی خود (پسندیدن/نپسندیدن) هدایت می شوند. و در اینجا مد نقش دارد.

طراحی وب سایت تخت می تواند جالب باشد. اما! یک طراحی جالب نیاز به طراحی واقعاً با کیفیت بالا از قابلیت استفاده و عناصر گرافیکی و وجود ویژگی ها و جلوه های خلاقانه دارد. و اگر در طراحی غایب باشند، اگر سایت ها فاقد اصالت باشند، یکنواخت، خالی و خسته کننده به نظر می رسند. به طور کلی، این چیزی است که اکنون در اکثر سایت های روسی موجود است.

نمونه ای از طراحی تخت با کیفیت بالا:

مد برای طراحی وب سایت تخت مانند هر مد دیگری موقتی است. برخی از افراد طرح‌های خلاقانه و اصیل ایجاد می‌کنند، در حالی که برخی دیگر از آن‌ها کپی می‌کنند و به سبکی از آنها تقلید می‌کنند، زیرا نمی‌دانند چگونه خودشان آن‌ها را طراحی کنند. و سایت های ارزان "مد" مانند قارچ رشد می کنند ...