ساعدنیوز
ساعدنیوز

نحوه طراحی فلت با کورل

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

طراحی فلت چیست؟

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

تاریخچه ای کوتاه از طراحی فلت

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

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

تصویر

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

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

  • طراحی مترو مایکروسافت (Metro Design)
  • طراحی iOS 7 اپل
  • طراحی متریال گوگل
  • ویژگی های مهم طراحی تخت (Flat Design)

سادگی

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

تصویر

زیبایی

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

تصویر

رنگ ها

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

تصویر

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

سایه ی بلند

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

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

فونت ها

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

نکات مثبت و منفی در طراحی فلت

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

نکات مثبت

سادگی

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

شفافیت

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

نکات منفی

مشکل انعطاف پذیری

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

مشکل تایپوگرافی (چیدمان حروف)

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

محدودیت

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

آینده طراحی فلت (طراحی تخت)

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

تصویر

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

چگونه طراحی فلت را شروع کنیم

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

پایگاه خبری ساعدنیوز را در شبکه‌های اجتماعی دنبال کنید.

دیدگاه ها
  دیدگاه ها
پربحث های هفته   
مراسم سلام عید نوروز و اهداء سکه توسط فرح پهلوی به همسران مقامات دولتی +عکس/ ولخرجی زن تازه به دوران رسیده زمانی که مردم غرق در فقر و بدبختی بودند! (378 نظر) میزبانی حسن روحانی از سیاستمداران و اقوام در مراسم عید دیدنی در منزل زیبا و ایرانی پسندش+ عکس/ چه مبلمانی، چه فرش هایی، از همه مهمتر چه خونه دلبازی😍 (327 نظر) خلاقیت خنده دار یک ایرانی برای گرم کردن آب حماسه ساز شد/ خسته نباشی هم وطن+ عکس (248 نظر) تلاوت زیبا و دلنشین سوره شمس توسط رهبر معظم انقلاب+ویدئو (235 نظر) صبحانه مفصل و رنگارنگ دو نفره رضا گلزار و آیسان خانوم+عکس/از خاویار گرفته تا آواکادو و انار وحشی... (191 نظر) روایتی از هواپیمایی که برای آوردن یک روبان عروسی برای فرح پهلوی از تهران به پاریس رفت! (159 نظر) تصویری از عیادت نجم الدین شریعتی، مجری برنامه سمت خدا از رهبر معظم انقلاب و استقبال گرم ایشان (158 نظر) رونمایی منوچهر هادی از خواهر و شوهر خواهر پزشکش+ عکس/ به قولی مخ خانواده ایشون هستن که پسرش هم دکتره (148 نظر) خلاقیت منحصر به فرد پسر مشهدی با ساخت تریلی حماسه آفرید/ هیلتر هم مغز اینو نداشت!+عکس (140 نظر) دو پادشاه یکی از ایران (ناصرالدین شاه) و دیگری از ژاپن (میجی) در یک زمان به اروپا رفتند/ تفاوت ها را بنگرید (134 نظر) مراسم تولد جگرسوز آزاده نامداری در خانه ابدی اش و گریه های دلخراش همسر و پدرش/ روحت شاد+ عکس (126 نظر) خواهر یکتا ناصر سکوتش را شکست (120 نظر) خنده های رهبر معظم انقلاب به اشعار شاعر طنزپرداز با موضوع آقازاده+ویدئو/ ای صورت و سیرت تو مطلوب، به‌به به‌به به این ژن خوب (109 نظر) استوری معنادار شاهین صمدپور برای یکتا ناصر و منوچهر هادی (108 نظر) اتاق خواب اروپایی و امروزی سانیا سالاری، ارغوانِ سریال دلدادگان با طراحی مدرن+عکس/ انصافا سلیقه خاصی داره! (102 نظر)
دیگران می‌خوانند   
فال انبیاء روزانه جمعه 10 فروردین ماه 1403 عکس جنجالی با استایل بهاری مرجانه گلچین/ فخر فروشی مرجانه گلچین با طلا و جواهراتش ! (عکس) نمایی دیده نشده و خاص از دکوراسیون داخلی و نوروزی خانه ملیکا شریفی نیا/دکور شاد و رنگی رنگی! عکس عاشقانه امیر علی نبویان و همسرش بهار نوروزپور با دسته گل زیبا و بهاری/ جذاب ترین زوج تلویزیون ! جلوه‌گری فرح دیبا با چادر توری در حرم امام رضا/اقدامات ریاکارانه برای بهره برداری سیاسی از دین! (عکس) عکس لو رفته و متفاوت از نرگس محمدی بازیگر سریال ستایش و خواهر پژمان جمشیدی در کانادا/خوش گذرانی خانم ها کنار آبشار نیاگارا! کتابخانه شخصی دلنشین و مملو از کتاب سید حسن خمینی در خانه‌اش با رونمایی از قاب عکس رهبری و دخترشان+عکس/ محبوب‌ترین بخش منزل نوه امام (عکس) منوی غذای مفصل کافه هنر شهاب حسینی، قباد سریال شهرزاد در لواسان/ از کیک شکلاتی گرفته تا آیس آمریکانو... استعداد و هوش بالای خانمهای شرکت کننده در مسابقه حامد آهنگی و عصبانیت بانمک او از نباختنشون+ویدئو رامین رضائیان ستاره تیم ملی درحال نماز خواندن در اتاقش+عکس علی دایی: زندگی مرفه حق من است، اما پنت هاوس ندارم دختر گدایی که یه شبه میلیاردر شد! دختری که در خیابان برای پول و غذا گدایی می کرد+عکس نان محلی پختن حرفه‌ای و جالب آزیتا حاجیان با تنور روستایی/ خانم بازیگر رو با این تیپ محاله بشناسید!+عکس (ویدئو) دکتر فیروز نادری اطلاعات مرموز ناسا را فاش کرد خلاقیت خنده دار و اقتصادی پدر ایرانی با هدف صرفه جویی در استفاده از چای کیسه ای حماسه آفرید+عکس/ هنر نزد ایرانیان است و بس! صحبت های شنیدنی هادی چوپان قهرمان جهان در حضور آرنولد/ من یک جنگجو هستم +فیلم روایت خنده دار گاوی که از روی ملیکا شریفی نیا رد شد و عمرش را داد به مهران مدیری/ بیژ بیژ را بیشتر بشناسید+فیلم میز ناهار رنگارنگ مصطفی زمانی و مهتاب کرامتی در یک رستوران شیک چینی+عکس (عکس) کشف شگفت انگیز حلقه طلایی و زیبای کوروش هخامنشی در روسیه/ انگشتری متعلق به 500 سال قبل از میلاد مسیح عکس های دکوراسیون شیک و لاکچری خانه شیلا خداداد و همسر جراحش/ هفت سین جذابش را هم ببینید (تصاویر) حیوانات خانگی عجیب و غریب ملکه الیزابت دوم / باورتون میشه واقعا؟ (عکس) تلاشهای بی وقفه ی زن بریتانیایی برای جلب رضایت همسرش جواب داد و رکوردش در کتاب گینس ثبت شد فال قهوه با نشان روز جمعه 10 فروردین ماه 1403 فال ابجد روزانه جمعه 10 فروردین 1403 فال حافظ با تفسیر جمعه 10 فروردین 1403 + فیلم فال شمع روزانه امروز جمعه 10 فروردین 1403 فال روزانه امروز جمعه 10 فروردین ماه 1402 (عکس) جواد عزتی و علی مردانه در پشت صحنه فصل 3 سریال زخم کاری در رامسر / فصل 3 زخم کاری در راه است رونمایی از سفره افطار مفصل و رنگین 6 کیلومتری در مشهد +عکس 12 دروغ شاخداری که پدر و مادرها در بچگی به ما گفتند / خیلی از باورهای کودکیمان حقیقت ندارد و باید با واقعیت رو به رو شد اگر این 10 رفتار را در اولین قرارتان دیدید پا به فرار بگذارید / اگر طرف مقابل این رفتارها را داشت بدون فرد مناسبی برای ازدواج نیست (عکس) خوابیدن محمدرضا گلزار وسط تمرین ورزش / مثل اینکه فشار زندگی متاهلی با آیسان خانم زیاده🤣 جزئیات مسمومیت شدید یک جوان در پی بلعیدن مواد مخدر چهرۀ «خون‌آشام ایتالیایی» بعد از 400 سال بازسازی شد+ عکس مخالفت با بازیگر شدن فریبرز به سبک ژاله صامتی، پریِ سریال زیرخاکی+ویدئو/ اون تیکه معنی کردن چپر چلاغ برا کاوه خیلی خوب بود رونمایی از برادر جوان و قدبلند داریوش فرضیایی، عموپورنگ پرانرژی بچه ها/ جفتشون چقدرم مهربون و خوش استایلن+عکس امروز آخرین مهلت ثبت‌نام دیدار رمضانی دانشجویان با رهبر معظم انقلاب جایی که ابر‌ها زیر پای‌تان شناورند/ پیشنهادی رویایی برای سفر یک روزه در اطراف تهران (ویدئو) مظنون فراری از دست پلیس به خودروی در حال حرکت آویزان شد حرکات با مزه گربه وقتی خودش رو توی آینه میبینه/ چه دیوونه بازی هایی درمیاره+ فیلم
تیتر امروز   
جلوه‌گری فرح دیبا با چادر توری در حرم امام رضا/اقدامات ریاکارانه برای بهره برداری سیاسی از دین! 12 دروغ شاخداری که پدر و مادرها در بچگی به ما گفتند / خیلی از باورهای کودکیمان حقیقت ندارد و باید با واقعیت رو به رو شد اگر این 10 رفتار را در اولین قرارتان دیدید پا به فرار بگذارید / اگر طرف مقابل این رفتارها را داشت بدون فرد مناسبی برای ازدواج نیست جزئیات مسمومیت شدید یک جوان در پی بلعیدن مواد مخدر علی دایی: زندگی مرفه حق من است، اما پنت هاوس ندارم چهرۀ «خون‌آشام ایتالیایی» بعد از 400 سال بازسازی شد+ عکس دختر گدایی که یه شبه میلیاردر شد! دختری که در خیابان برای پول و غذا گدایی می کرد+عکس امروز آخرین مهلت ثبت‌نام دیدار رمضانی دانشجویان با رهبر معظم انقلاب جایی که ابر‌ها زیر پای‌تان شناورند/ پیشنهادی رویایی برای سفر یک روزه در اطراف تهران فال قهوه با نشان روز جمعه 10 فروردین ماه 1403 فال ابجد روزانه جمعه 10 فروردین 1403 فال حافظ با تفسیر جمعه 10 فروردین 1403 + فیلم فال شمع روزانه امروز جمعه 10 فروردین 1403 واکنش معین به انتشار خبر حضور پنهانی‌اش در ایران/ معین چند بار به ایران آمده؟ فال روزانه امروز جمعه 10 فروردین ماه 1402