طراحی

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

با افزایش کاربران موبایل، نمایش صحیح وب سایت در موبایل از اهمیت بالایی برخوردار شده است. این امر باعث شده تا طراحان وب سایت به سراغ “liquid layout” بروند.

اپلیکیشن تک صفحه ای چیست

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

وب اپلیکیشن های پیشرو تجربه کاربرانی می باشد که به وب دسترسی دارند. ویژگی های این وب اپلیکیشن ها به شرح زیر است:

تجربه کاربری وب سایت در طول سال ها و گذراندن فراز و نشیب هایی بهبود پیدا کرده است، اما هنوز وب سایت هایی وجود دارند که با دیدن آنها از خودمان می پرسیم "طراح آن با خودش چه فکری میکرده؟!"

رابط کاربری گرافیکی، واسط کاربری گرافیکی، Graphical User Interface یا همان GUI نوعی رابط کاربری است که شامل المان های گرافیکی نظیر آیکن ها، دکمه ها، منو های کرکره ای و... می باشد تا کاربر بتواند به کمک آنها با دستگاه های الکترونیکی تعامل برقرار کند. برای روشن تر شدن این تعریف میتوان به نسخه های مختلف ویندوز اشاره کرد. تمامی نسخه های ویندوز GUI محصوب میشوند. اولین رابط کاربری گرافیکی در سال 1981 توسط آلان کی و داگلاس انجلبارت و با همراهی گروهی از محققان در Xerox PARC توسعه پیدا کرد. پس از آن شرکت اپل با معرفی کامپیوتر لیزا در 19 ژوئن 1983 که اولین کامپیوتر تجاری جهان محسوب میشود از GUI استفاده کرد. تصویر زیر ویندوز 7 دسکتاپ را نشان میدهد.

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

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

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

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

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

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

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

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

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

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

در طراحی واکنش گرا تغییر دادن تصاویر امری طبیعی است و تصاویر میتوانند براساس فیچرهای صفحه نمایش لود شوند. بعضی وقتها این به معنای crop کردن تصویر نیز میباشد. حتی میتواند به معنای لود کردن تصویری دیگر با مقیاسی متفاوت باشد. تصویر میتواند براساس صفحه نمایش و لی اوتی که کاربر میبیند عوض شود. برای مثال:

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

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

طراحی فلت

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