کــــار آفرینــــ بلاگــــ

بلاگیــــ برایــــ امروزیــــ ها

۱۴ روش جذاب طراحی وب سایت در سال ۲۰۱۵( قسمت دوم)

۱۴ روش جذاب طراحی وب سایت در سال ۲۰۱۵( قسمت دوم)

 

١٤ روش طراحی وب سایت  ٢٠١٥ (٢)

 

به ادامه نکات ١٤ روش طراحی وب سایت٢٠١٥  می پردازیم.

 

۸- اسکرول پارالاکس Parallax Scrolling

 

یک روش برای سرگرم کننده تر و جالب تر کردن وب سایت است , پارالاکس اسکرولینگ یک توهم سه بعدی که باعث می شود بیننده را به سمت محتوای وب سایت بکشاند ایجاد می کند. برندهای زیادی از Parallax Scrolling برای طراحی وب سایتتاثیر گذار استفاده می کند. وب سایت Dangers of fracking از این روش به صورت برجسته ای استفاده کرده است. به صورتی که شما قطره ای از باران را که از ابرها می افتد تا عمق دریا دنبال می کنید.

 

08webdesign

 

۹- طراحی ماژولی

 

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

 

09webdesign

 

۱۰- تکامل تدریجی طراحی مسطح (Flat)

 

سال گذشته طراحی مسطح تاثیر بسزایی بر روی گرافیک ها گذاشت. در حدی زیاد که گوگل ورژن طراحی مسطح اختصاصی خود را ارائه داد و آن را Material Design نامید. Material Design همان زیبایی شناختی که طراحی مسطح دارا بود را به کار گرفت. تمرکز آن بر روی ساده کردن و ارائه تمیز و مرتب بود , اما طراحی گوگل مهارت و ظرافت خاص خود را داشت. در حالیکه طراحی مسطح حاوی اشکال ساده برای به وجود آوردن محتوای دو بعدی قابل تشخیص و مینیمالیسم می باشد, material design از زاویه دار کردن و انیمیشن های جزئی و سایه زدن برای عمق دادن به عکس ها استفاده می کند. با وجود تعداد زیادی از طراحان وب سایت با طرز فکر مینیمالیستی , طراحی مطالب و مواد ادامه خواهد داشت. در زیر صفحه فرود وب سایت Material Design's Blog را مشاهده می نمایید که مثالی عالی برای طرز کار Material Design در طراحی لوگو می باشد.

 

10webdesign

 

۱۱- تصویرهای خطی

 

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

 

11webdesign

 

 

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

 

۱۲- تراکم نقشه های گوگل

 

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

 

14webdesign

 

۱۳- جهت ها و بردارهای گرافیکی مقیاس پذیر (SVG)

 

زمانی که شرکت اپل , صفحه نمایش Retina را به بازار عرضه کرد طراحان بسیار ناراحت شدند چون ناگهان گرافیک ها و عکس هایشان در صفحه نمایش کیفیت بالای Retina به حالت پیکسلی در آمده بود. آنها مجبور شدند به متدهای جدیدی که به آنها این اجازه را می داد که از تصاویر خوب و قابل سازگاری در هر وسیله ی ارتباطی استفاده کنند, عادت کنند. خوشبختانه این جهت های گرافیکی مقیاس پذیر(SVG) در چالش برنده شوند. SVG گرافیک ها را به صورت بردار و جهت دار معرفی کرد که به آنها این اجازه را می داد که با کیفیت وضوح های متفاوت گرافیک ها را متناسب کنند. به کمک SVG عکس ها در تمام دستگاه ها وضوح و شفافیت خود را حفظ خواهند کرد. Snap.svg و کتاب خانه ی‌ Javascript SVG تعداد زیادی مثال موجود دارد که در زیر یکی از آنها را مشاهده می کنید.

 

13webdesign

 

۱۴- طرح های تقسیم شده ی عمودی

 

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

 

12webdesign

 

 

 

 با ما در مقالات دیگر کارآفریت بلاگ همراه باشید.

١٤ روش طراحی وب سایت  ٢٠١٥ (١) 

٦ شیوه طراحی وب سایت ٢٠١٦

اشتباهات رایج در طراحی وب سایت

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