از ایده تا طراحی برای افراد غیر طراح

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

1. اهداف
2. الهام بخش
3. چیدمان
4. رنگ ها
5. تایپوگرافی
6. دکمه ها
7. پیوندها
8. همه اش را بگذار کنار هم

اهداف

1. به نظر می رسد که شما در مورد آن فکر می کنید

هدف ما کیفیت طراح حرفه ای نیست. هدف ما کامل نیست. تنها چیزی که ما می خواهیم این است که کاربر فکر کند “آنها به ظاهر صفحه خود فکر کردند.”

2. کاهش خستگی تصمیم گیری

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

3. یکنواختی

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

4. مسائل دسترسی را به حداقل برسانید

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

الهام بخش

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

سایت هایی مانند dribbble، bestwebsite، الهام بخش طراحی وب، awwwards و siteinspire را بررسی کنید. به خاطر داشته باشید که برخی از این وب سایت ها برای طراحان برای به اشتراک گذاشتن ایده های خلاقانه است، نه وب سایت های کاربردی.

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

مهمتر از همه، آن را مال خود کنید! “من یک طراح نیستم.” بهانه ای عالی برای ساختن هر صفحه ای که دلتان می خواهد. می دانم که از تکلیف “طراحی صفحه 90” در Bootcamp لذت بردم. در پایان، اگر از وب سایت خود راضی هستید و مردم می توانند از آن استفاده کنند، این سایت عالی است.

چیدمان

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

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

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

رنگ ها

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

بعد، سه رنگ غیر خاکستری با کنتراست کافی انتخاب کنید. در اینجا چند ابزار وجود دارد که به شما کمک می کند تا به سرعت رنگ هایی با کنتراست کافی تولید کنید:

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

اگر ایده انتخاب رنگ ها برای شما دردناک به نظر می رسد اما ریاضی را دوست دارید، در اینجا چند راه برای انتخاب رنگ ها با ریاضی وجود دارد:

اگر رنگ ها و ریاضیات رنگ فنجان چای شما نیستند، می توانید مقیاس خاکستری خود را حفظ کنید! فقط کنتراست خود را بررسی کنید.

اگر کنتراست شما خیلی کم باشد، کاربران نمی توانند متن شما را بخوانند. اگر کنتراست شما خیلی زیاد است، مانند رنگ مشکی (#000000) و سفید (#FFFFFF)، چشم کاربران شما را تحت فشار قرار می دهد. اگر کار دیگری با طراحی برنامه خود انجام نمی دهید، از خاکستری تیره استفاده کنید (مانند #333333) برای متن شما و رنگ سفید (مانند #F3F3F3) برای پیشینه شما.

تایپوگرافی

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

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

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

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

دکمه ها

دکمه ها برای اعمال هستند و می توانند به عنوان اولیه، ثانویه و سوم طبقه بندی شوند.

دکمه های اصلی دکمه های فراخوانی شما هستند – چیزهایی که واقعاً می خواهید کاربر بداند که می تواند انجام دهد. به عنوان مثال، برای یک فرم ورود ارسال کنید.

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

دکمه های درجه سوم اقدامات متفرقه ای هستند که برای اکثر کاربران ارزشمند نیستند. آنها کمتر مشهود هستند و اغلب شبیه پیوندها هستند. یک مثال خوب یک دکمه ورود در فرم ثبت نام است.

برای مجموعه‌ای از نمونه‌ها، سه دکمه برای یک سایت حباب‌دار و رنگارنگ را بررسی کنید.

پیوندها

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

به یاد داشته باشید، در CSS شما 4 حالت عمل پیوند دارید.

• a:link
• a:visited
• a:hover
• a:active

آنها را به این ترتیب در شیوه نامه خود قرار دهید، در غیر این صورت ممکن است یکدیگر را لغو کنند.

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

a:hover {
  cursor: pointer;
}

همه اش را بگذار کنار هم

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

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

از متغیرها و قراردادهای نام‌گذاری استفاده کنید که اگر ماه‌ها بعد به این پروژه بازگردید، همچنان واضح و قابل استفاده خواهند بود. من رنگ های خود را به متغیرهای CSS اختصاص می دهم. رنگ متن تیره ترم را نام می برم --dark-text و یادداشت هایم را در تضاد آن با رنگ های دیگر در همان فایل قرار دهم. من از نام‌های کلاس BEM استفاده می‌کنم، بنابراین استایل‌هایی که برای همه دکمه‌های من اعمال می‌شوند در این قسمت خواهند بود .button کلاس من استفاده خواهم کرد .button--primary برای سبک هایی که فقط برای دکمه های اصلی اعمال می شوند. برای اطلاعات بیشتر در مورد سازماندهی CSS خود، راهنمای شبکه توسعه دهنده موزیلا را بررسی کنید.

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

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

نتیجه

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

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

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