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


علی طبیب زاده 21 دیدگاه ایده و خلاقیت Tuesday, 5th March , 2013 38585 بازدید

شاید اخیرا راجع به این مفهوم و تکنیک در طراحی‌های مدرن زیاد دیده و شنیده باشید. طراحی تخت یا 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



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


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

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



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

      موفق باشید.




  2. امید
    9 March 2013

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




  3. حامد
    9 March 2013

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

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



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

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

      موفق باشید.




  4. آستیاژ
    9 March 2013

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




  5. مهدی
    18 March 2013

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




  6. آرمین
    22 March 2013

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



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



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



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




  8. اونترنت
    2 April 2013

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




  9. رضا
    1 May 2013

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




  10. hamed
    9 May 2013

    عالی بود.




  11. پیام
    9 July 2013

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




    • مهدخت یافتیان
      9 July 2013

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




      • پیام
        9 July 2013

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




  12. Mersad
    6 August 2013

    سلام

    خیلی جالب بود

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




  13. کریمیان
    21 October 2013

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




  14. kourosh
    24 May 2014

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



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





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

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

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

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

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



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

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