نمونه وب‌سایت با پیروی از اصل Flat Design یا طراحی تخت


علی طبیب زاده ۲۱ دیدگاه ایده و خلاقیت سه شنبه, ۱۵ام اسفند , ۱۳۹۱ 30432 بازدید

شاید اخیرا راجع به این مفهوم و تکنیک در طراحی‌های مدرن زیاد دیده و شنیده باشید. طراحی تخت یا Flat Design مدتی است که به یک Trend دوست‌ داشتنی تبدیل شده است. در این نوع طراحی دیگر خبری از سایه‌ها٬ گرادینت‌ها و تکسچرها و پترن‌های ملایم نیست. بلکه استفاده درست از رنگ‌های ساده و یک‌پارچه٬ ساختارهای تمیز و مرتب٬ گوشه‌ها و تایپوگرافی شارپ ، زیبایی چشم‌گیری را به این نوع از طرح‌ها می‌دهد.

چیزی شبیه به رابط کاربری مترو در ویندوز هشت . می‌توان گفت که شاید عرضه این رابط کاربری از سوی مایکروسافت مقدمه‌ای برای ظهور بیش از پیش طراحی تخت یا Flat Design است و به نظر میرسد این نوع از طراحی به ویندوز هشت شروع شد و یا میتوان بهتر گفت که رونق پیدا کرد .

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


http://alan-horne.com/


http://craftingtype.com/


http://www.datadrivenlondon.com/


http://etchapps.com/


http://www.floatdesign.net/


http://friendsoftheweb.com/


http://inky.com/


http://www.tinyfactory.co/#!home


http://itsashapechristmas.co.uk/


http://www.larkef.com/


https://layervault.com/


http://www.metrotwit.com/


http://oak.is/


http://natl.tv/#


http://www.rdio.com/


http://www.spelltower.com/


http://www.windowsphone.com/en-us


http://natl.tv/#


http://www.unitedpixelworkers.com/

طبق روند قبلی و در مطالبی مانند وب سایتهایی با تصاویر پس زمینه مات یا blur به معرفی نمونه هایی از وب سایتهای ایرانی که شما دوستان معرفی مینمائید نیز در انتهای مطلب اشاره خواهد شد . در زمینه Flat Design یا « طراحی تخت » ، در بین سایت‌های ایرانی به عنوان نمونه ، صفحه اول « اولین همایش تخصصی نرم‌افزارهای موبایل و موبایل وب ایران » که همین چند روز پیش در تهران برگزار شد را معرفی کرده ایم . باز هم طبق روال گذشته ٬ اگر وب سایتی را می‌شناسید و یا پیشنهادی دارید برای افزوده شدن به این پست از آن استقبال می‌کنیم.


http://www.iranappfest.com


http://www.khabargir.com



نویسنده / مترجم : علی طبیب زاده


۲۱ دیدگاه برای این نوشته ثبت شده است


  1. فرزین سیف الهی
    ۱۹ اسفند ۱۳۹۱

    سلام.
    بسیار نمونه های عالی بود.
    در برخی از سایت ها می بینم که در قسمت های مختلفی از طراحی خود Flat Design را بسیار تشدید کرده اند و در قسمت های دیگر از سایه ها و گرادینت ها استفاده کرده اند. فکر می کنم این خوب نیست. شاید یک نوع طراحیست :)
    با تشکر از شما.




    • علی طبیب زاده
      ۱۹ اسفند ۱۳۹۱

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

      موفق باشید.




  2. امید
    ۱۹ اسفند ۱۳۹۱

    پس من یه Flat Designer بودم و خبر نداشتم!




  3. حامد
    ۱۹ اسفند ۱۳۹۱

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

    تو جریان جشنواره وب موردهایی که فلت کار کرده بودن و مثال زدنی بود نسبتاً کم نبود.




    • علی طبیب زاده
      ۱۹ اسفند ۱۳۹۱

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

      درسته٬ این سبک هم توی کشورمون در حال جا افتادن و به کار گرفته شدن هست٬ ممنون می‌شم اگر پیشنهاد و نمونه‌ی خوبی در ذهن دارید برای ما بفرستید :)

      موفق باشید.




  4. آستیاژ
    ۱۹ اسفند ۱۳۹۱

    پس منم به Flat Design علاقه داشتم و خبر نداشتم خیلی طرح های قشنگی بود




  5. مهدی
    ۲۸ اسفند ۱۳۹۱

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




  6. آرمین
    ۲ فروردین ۱۳۹۲

    pichak.co و khabargir.com
    این دوتا از دیگر نمونه های قارسی هستن




    • علی طبیب زاده
      ۱۰ فروردین ۱۳۹۲

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




  7. علی حدادکار
    ۹ فروردین ۱۳۹۲

    با سلام مطلب مفیدی بود.
    به نظر من طراحی Flat Design خیلی زیباست ولی سختی های خودش رو داره که مهمترینش ترکیب رنگ مناسبه.من خودم تا حالا تو این جور طرح ها بیشترین وقتی که گذاشتم روی ترکیب رنگش بوذه شاید تو یه طرح ۱۰ بار رنگ عوض کردم تا به دلم نشسته :دی
    بازم ممنون بخاطر مطلب خوبتون




    • علی طبیب زاده
      ۱۰ فروردین ۱۳۹۲

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




  8. اونترنت
    ۱۳ فروردین ۱۳۹۲

    ممنون از شما
    کارتون حرف نداره




  9. رضا
    ۱۱ اردیبهشت ۱۳۹۲

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




  10. hamed
    ۱۹ اردیبهشت ۱۳۹۲

    عالی بود.




  11. پیام
    ۱۸ تیر ۱۳۹۲

    مرسی از معرفی این سایت های خوب. پیشنهاد می کنم به این سایت هم سری بزنید :) http://www.chargush.com
    البته هنوز کامل نشده اما خیلی خوشحال میشم نظرتون رو بگید ..




    • مهدخت یافتیان
      ۱۸ تیر ۱۳۹۲

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




      • پیام
        ۱۸ تیر ۱۳۹۲

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




  12. Mersad
    ۱۵ مرداد ۱۳۹۲

    سلام

    خیلی جالب بود

    میخواستم اگه براتون امکانش هست، مقاله ای با محوریت اصول ساخت صفحات Flat Design انتشار بدین. کلا میخوام بدونم برای ساخت این صفحات باید از چه قوانینی پیروی کرد




  13. کریمیان
    ۲۹ مهر ۱۳۹۲

    سلام، خیلی عالی بود. متشکر




  14. kourosh
    ۳ خرداد ۱۳۹۳

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



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

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

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.