نحوه طراحی وب سایت با نرم افزار تحت وب UI Kit در فتوشاپ ادوبی
در این آموزش ما در حالی که درباره توانایی سازگاری و استفاده مجدد کیت UI می پردازیم ، کیت رابط کاربری را نیز طراحی خواهیم کرد.
نیازهای این آموزش
به منظور انجام آموزش شما بایستی نیازهای زیر را رفع کنید:
عدم باز کردن فونت Squirrel یا گوگل
تهیه تصویری استوک از طریق Unsplash
تهیه صورت هایی از UI Faces
تهیه آیکون Arrow از Iconfinder
آماده سازی سند در فتوشاپ
مرحله اول
فتوشاپ را باز کرده و مطابق با تنظیمات تصویر زیر سند جدیدی را ایجاد نمایید. شما می توانید یک بوم با هر ابعادی را انتخاب نمایید، البته وب عرض ثابتی ندارد.
مرحله دوم
بیایید با استفاده از برخی راهنماها کیت UI خود را به صورت سازمان یافته ای تبدیل کنیم. ما همیشه از یک شبکه استفاده نمی کنیم اما اگر برخی محدودیت ها را با تنظیم کردن ثبات بخشیم قطعا تضمین کننده خواهد بود. برای انجام ابتدا باید به Go to View و سپس به New Guide مراجعه نمود. در نهایت برخی دستورالعمل ها را باید تنظیم کرد. ما معمولا 1000px را به عنوان عرض یک وب سایت انتخاب می کنیم پس بیایید کیت UI ما در چنین ابعادی باشد.
نکته: در این دستورالعمل 100px, 600px و 1100px را به عنوان ابعاد بکار می گیریم.
نکته : شما برای اینکه فرآیند مورد اشاره سریع تر انجام گیرد بهتر است از افزونه فتوشاپیGuideGuide استفاده کنید.
مرحله سوم
اگر طبق قوانین و مقررات فتوشاپ عمل کنیم همه چیز سازمان یافته و آسان است. در محیط کاری این کیت UI مورد نیاز است تا از چند نقطه مرجع و توسعه استفاده شود. بنابراین بایستی شما آن را به شکل سازمان یافته ای نگه دارید. بیایید شش گروه لایه ای به نام تایپوگرافی، دکمه ها، فرم ها، تصاویر، آواتار و رنگ ایجاد کنیم.
برای ایجاد گروه جدید باید ابتدا به Layer سپس به New و در نهایت به Group رفت. برای آن که گروهی سریع ایجاد شود روی آیکون کلیک کنید.
تعریف تایپوگرافی
Oliver Reichenstein مشهور می گوید” 95 درصد طراحی وب به تایپوگرافی مربوط است.”بنابراین نیاز است که شما درباره آن اطلاعاتی کسب کنید. در ابتدا ما نیاز داریم تا محیطی مناسب را ایجاد کنیم. پس زمینه ای خنثی که موجب ناراحتی چشم نشود باید انتخاب شود. بنابراین پس زمینه و تایپوگرافی باید از کنتراست مناسبی برای قابل خوانده شدن برخوردار باشند. اجازه دهید برای این آموزش از رنگ خاکستری روشن استفاده کنیم، رنگی که خنثی بوده و به اندازه کافی به چشم می آید. ما رنگ پیش زمینه را #e9eeef انتخاب کرده و برای پس زمینه بایستی Alt+Backspace را فشار دهیم.
مرحله اول
ابتدا تایپوگرافیگی گروپ را باز کرده و Horizontal Type Tool را انتخاب می کنیم و همچنینOpen Sans font را بر می‌گزینیم. Open Sans فونت مدرنی بوده که در عین حرفه ای بودن استقبال فراوانی از آن می شود. چنین فونتی برای عنوان شیک بوده و همچنین برای سایت نیز مناسب است.
Open Sans انواع مختلفی داشته و برای این کیت UI ما از یک نوع آن استفاده می کنیم. توجه نمایید که اگر در پروژه خود از دو فونت مختلف بهره بگیرید فضای شغولی ایجاد می شود.
ما رنگ foreground را به رنگ مشکی درآورده و سپس از ابزار Horizontal Type Tool برای روشن کردن فونت Open Sans و تغییر سایز به 55px استفاده می کنیم. ما همچنان از این سبک و سایز برای عناوین آینده نیز بهره می گیریم.
مرحله دوم
در حال حاضر ما نیاز داریم تا سلسله مراتبی را برای تایپوگرافی خود ایجاد کنیم.
HTML شامل برچسب های مختلفی بوده که به شما کمک می کند، محتوای یک صفحه مرورگرها را تفسیر کنید. بسیاری از این دستورات به طور خاصی همچون <h1>, <h2>, <h3> برای تایپوگرافی وب مورد استفاده قرار می گیرند. <h1> یکی از مهم ترین توصیف سرفصل ها به شمار می رود. پس از تگی برای پاراگراف استفاده می شود که <p> می باشد. البته نیازی نیست به جزئیات بیشتری درباره HTML پرداخت و همین عناصر کافی هستند.
با استفاده از Horizontal Type Tool شما باید T را وارد سرفصل خود کنید. ما از Open Sansروشن 55px برای h1، سایز 44px برای h2 و سایز 32px برای h3 استفاده می کنیم و باید فاصله بین 30px را ترک کرد. فاصله نکته مهمی بوده که باید توجه نمود. ترک کردن فضای کافی موجب توانایی خواندن متعادل می شود.
نکته : ما از وزن متعادلی برای h3 استفاده می کنیم. اگر ما نوع کوچکتر را انتخاب کنیم ممکن است خوانایی کمتر شود.
مرحله سوم
اجازه دهید از آنجایی که سرفصل ما به صورت مجموعه ای می باشد ما کپی از محتوای واقعی داشته باشیم. تمامی تغییرات شامل کپی شده و در کیت UI نیز به نمایش در می آید، به شکلی که سازندگان می توانند آن چیزی را که برنامه ریزی کردید به اجرا درآورند.
فکر می کنیم از سبکی داخل بند، ضخیم مورب و همچنین به شکل لینک برای تیتر استفاده کنیم بد نباشد.
برای رنگ کپی اصلی ما رنگ خاکستری #838383، برای تیتر رنگ مشکی #000000 و برای لینک از رنگ آبی #006ee3 استفاده می کنیم.
تیتر نسبت به کپی اصلی باید تیره تر باشد زیرا تاثیر بیشتری خواهد گذاشت. رنگ محتوای اصلی نیز باید آرامش بخش و خوانا باشد. البته رنگ دیگری برای لینک انتخاب کنید تا کاربران آگاه شوند لینکی در محتوا به کار گرفته شد.
نکته : در عنوان و لینک از قلم Semibold برای بزرگتر نشان دادن استفاده کنید.
ایجاد کلیدها
کلید برای پروژه های وب اهمیت بالایی دارد. آنها در اکثر مواقع ساده یا در فرم لینک هستند. آنها همچنین در صفحه خدمات تماسی نیز به عمل آوررند. بسیار حیاتی بوده که نگاه منسجمانه ای به کلید دهید تا کاربر در طول برنامه با آن آشنایی پیدا کند.
مرحله اول
با کلیک برروی فلش کوچک کنار نام گروه می توانید گروه تایپوگرافی را به حداقل برسانید. پس از آن بایستی طبق دستورالعمل‌های جدید عمودی به شکل سه قسمت مساوی با شکاف بین 35PX عمل کرد. ابتدا به Go to View و سپس به New Guide بروید. خط راهنمای عمودی زیرا به شکل 410px, 445px, 755px و 790px تنظیم کنید. این جایی بوده که ما به طور مستقیم از کلیدها استفاده می کنیم.
مرحله دوم
به قسمت گروه تایپوگرافی می روید و عنوان لایه را یافته و با کلیک کردن CMD+J آن را کپی می نمایید. سپس آن را به گروه کلیدها انتقال داده و به نام کلید تغییر می دهید.
سپس وارد سه عنوان منطقه های کلید از جمله عادی، شناور و فعال می شود. با در نظر گرفتن فاصله 35PX بین مناطق اول، دوم و سوم، این منطقه را به سمت چپ می کشانیم.
مرحله سوم
در حال حاضر رنگ پیش زمینه را به رنگ آبی #006ee3 که قبلا استفاده کردیم تنظیم نموده و گروه جدیدی به نام اولیه Normal ایجاد می کنیم. پس از آن با ابزار Rounded Rectangle Toolمجموعه ای شعاع 3px و یک دایره 310x44px به شکل مستطیل رسم می کنیم. برای مکان آن تیتری به نام Normal انتخاب خواهیم کرد. برای نهایی کردن کلید نوشتن پایین، از متنی با رنگ سفید#ffffff که خواناست استفاده می کنیم.
مرحله چهارم
در حال حاضر می توان با کلیک کردن کلیدهای CMD+J از Primary Button در گروه کپی گرفته و نام را به Primary Hover و Primary Active تغییر دهیم. پس از آن گروه جدید زیر دو بخش ایجاد شده قبل قرار می گیرد.
شاید از خود بپرسید منظور از hover یا active چیست؟Hover یا همان شناور توصیف وضعیتی بوده که یک کلید از حرکت بسیار ماوس داشته، بنابراین ما نیاز به نشان دادن برخی از بازخوردها با کلید داریم. سپس لینک فعال شده و می توانید روی آن کلیک کنید.
برای وضعیت شناور یا hover ظاهری طراحی شده و مناطق کلید های فعال را باید تیره کرد. یک لایه جدید بالای شکلی همچون کلید ایجاد کرده و آن را به رنگ مشکی #000000 در می آوریم. پس از آن روی کلید Alt نگه داشته و سپس ماوس را تا زمانی که یک آیکون فلش ظاهر نشده ترک نکنید. پس از آن Clipping Mask ایجاد می شود و باید درجه شفافیتش را به 10 درصد کاهش داد.
نکته: برای حالت فعال شفافیت لایه مشکی را باید به 10 درصد رساند.
مرحله پنجم
در حال حاضر باید تمام کلیدهای گروهی را کپی و رنگ و عنوانش را تغییر داد. ما به سادگی رنگ دیگری انتخاب می کنیم که در این آموزش رنگ سبز #36c265 انتخاب شد.
فرم طراحی
فرم ها عنصری بسیار مهم در برنامه وب محسوب می شوند که به کاربران اجازه می دهد از طریق اطلاعات ورودی با برنامه تعامل داشته باشند. ما نیز به طراحی برخی پایه ها می پردازیم تا با همان سبک توسعه دهندگان سازگاری داشته باشد.
مرحله اول
کلید گروه را به حداقل می رسانیم و سپس فرم گروه را باز می کنیم. یک بار دیگر از عنوان بخش کپی گرفته و نام آن را به فرم ها تغییر می دهیم. ما باید برخی از انواع پایه را همچون فرم ورودی، ورودی متن، فیلد رمز عبور را پر کرده و سپس منویی را باز می نماییم و فیلدی انتخاب می شود. در نهایت فیلدی به سادگی با انجام فرآیند ایجاد می گردد.
در هنگام طراحی فرم، وضوح و آشنایی داشتن از عوامل کلیدیست. سعی کنید گروه جدیدی را ایجاد کنید و نامش را همان Name بگذارید. سپس Horizontal Type Tool را انتخاب کرده و در فیلد ورودی برچسب ها را وارد می کنیم. در قسمت درباره من First Name قرار داده می شود و سایز را به 18px و رنگ را به مشکی #000000 در می آوریم. همچنین فونت Open Sans را انتخاب می نماییم.
در حال حاضر یکی از لایه های به شکل کلید را کپی کرده و نام گروه را در آن وارد می کنیم. پس از آن رنگ پس زمینه را به سفید #ffffff و خاکستری #d5d5d5 در آورده و سایز 1px انتخاب می شود. در نهایت مشخصات و نمونه ای از متن ورودی را در داخل مستطیل قرار می دهیم. برای مثال ما 16px Open Sans و رنگ خاکستری #838383 را همانطور که برای متن بهره گرفتیم، استفاده می کنیم.
مرحله دوم
ایجاد برخی فیلدهای ورودی با عنوان به سادگی از طریق فیلد ورودی نخست انجام می گیرد. به طور سنتی در فیلد رمز عبور از نقطه یا ستاره استفاده می کنیم. یک مثالی در تصویر زیر آورده شده که می توانید مشاهده کنید.
با CMD+J از کلید گروه ها کپی گرفته و آن را به گروه فرم ها و مکانی در زیر فیلد ورودی ایجاده شده منتقل می کنیم. البته بسیار مهم بوده که از عناصر قبلا ایجاد شده، استفاده مجدد شود.
مرحله سوم
در این آموزش ما می خواهیم یک رابط کاربری بسیار اساسی ایجاد کنیم که می تواند یک برنامه وب ساده را پشتیبانی کند. حال بیایید نوع دیگری از متن را در فیلد ورودی تایپ کنیم و آن Select است.
از فیلد ورودی گروه ها کپی گرفته و در مکانی بین خط راهنمای عمودی سوم و چهارم جای دهید و مطمئن شوید کار به درستی انجام می گیرد. value را به هر اندازه ای که می خواهید تغییر دهید و آیکون فلش ساده ای نشان می دهد که آن یک منو بار است. شما می توانید آیکون ها را درIconfinder بیابید.
مرحله چهارم
راه توسعه آسانتری پیدا کرده و مطمئن شوید که شما شامل حالت اکتیو یا همان فعالید. چگونه زمانی که کاربر به آن نگاهی می اندازد همچون منو باریست؟ این کار یک طراحی بوده که برای هدایت توسعه جهت ایجاد تجربه ای سازگار و یکپارچه انجام گرفته است.
این همان منو بار گروهیست که اخیرا ساخته شد. با استفاده از Direct Selection Tool روی گوشه ای که به شکل نقطه بوده کلیک می کنید و سپس کلید Shift را نگه خواهید داشت. پس از آن چهار نقطه ای که در پایین قرار داشته را انتخاب کرده و برای گسترش شکل روی قسمت پایین چند بار ضربه می زنید. این روش موجب می گردد که شکل شما ساختار دست نخورده خود را حفظ کند.
پس از آن به سادگی انتخاب های ممکن را کپی و در قسمت زیرین نخستین ساخته خود قرار می دهید. از ابزار Line Tool استفاده کنید تا اندازه را به 1px و رنگ فلش را به یک موردی همچون کلیدی که قبلا استفاده کردید، در می آورید. این کمک می کند تا نشان دهد که این زمینه فعال می باشد.
مرحله پنجم
ما در حال حاضر یک سناریو پیام خطای ساده ایجاد کردیم برای مثال زمانی که فردی رمز عبور ضعیفی وارد می کند، ظاهر می شود.
از قسمت گذر واژه با CMD+J کپی گرفته و آن را به صورت مستقیم زیر زمینه ای به صورت منو بار قرار می دهید. پس از آن به تغییر رنگ این زمینه می پردازیم به شکلی که ابتدا رنگ قرمز ظریف و سپس زمینه را به رنگ قرمز مایل به خاکستری #e9dde3 در می آوریم. در نهایت رنگ قرمز #b63131 پررنگی جهت پیام خطا انتخاب می کنیم.
ما اصول اولیه را در این آموزش پوشش دادیم و همچنین برای شروع طراحی پیچیده کافیست.
آواتارها
آواتارها تقریبا در هر وب سایت استانداردی یافت می شود. در حقیقت آواتارها موجب تعامل تصویری کاربران با یکدیگر می‌گردد.
مرحله اول
گروه های غیرضروری را به حداقل رسانده و گروه آواتارها را باز می کنیم. ابزار Ellipse Tool را انتخاب کرده و کلید Shift را نگه می داریم. سپس دایره ای 80x80px را رسم خواهیم کرد. به سایتuifaces.com رفته و تصویری انتخاب می کنیم. آن را کپی کرده و در قسمت بالاتر دایره تازه ایجاد شده قرار خواهیم داد. Alt و ماوس را با یکدیگر نگه می داریم تا اینکه فلش کوچکی ظاهر شود و سپس ماوس را رها و Clipping Mask ایجاد می کنیم.
مرحله دوم
این مهم است که آواتار در موقعیت های مختلف چگونه استفاده شود. برای مثال برروی صفحه نمایش باید سایز آواتار بزرگ باشد اما در بخش نظرات باید آواتار به صورت کوچک قرار گیرد.
شما می توانید با نگه داشتن روی نماد آواتار و فشردن CMD+T همراه با نگه داشتن Shift حفظ نسبت کنید.
تصاویر
ما واقعا باید بدانیم که چگونه تصاویر در برنامه ها به نمایش در می آیند. با توجه به تصویر داخل مستطیل، تصاویر ما باید گوشه های منحنی داشته باشند.
مرحله اول
ابتدا باید ابزار Rounded Rectangle Tool را انتخاب نمود و سپس شکلی مستطیلی بین دستورالعمل عمودی در زیر گروه آواتارها رسم کرد. پس از آن تصویری انتخاب کرده و ما از unsplash.comبرای انتخاب تصویر استفاده کردیم. همچنین برای تغییر اندازه باید CMD+T را فشار داده و Clipping Mask ایجاد نمود.
تعریف رنگ
در نهایت به پوشش رنگ می پردازیم. پالت رنگ جامد از اهمیتی بسیاری برخوردارست. بنابراین شما باید تئوری رنگ را جهت درک بیشتر و اهمیت آن بررسی کنید. ما امید داریم که رنگ مناسبی در پایان آموزش استفاده خواهیم کرد زیرا ما می خواهیم از عناصری متناسب با سبک خود بهره ببریم.
مرحله اول
ابتدا گروه رنگ ها را باز کرده و یکی از رنگ ها را به عنوان پیش زمینه کلید انتخاب می کنید. سپس با استفاده از ابزار Rounded Rectangle Tool مستطیلی ایجاد می کنیم. پس از آن به استفاده از ابزار Horizontal Type Tool پرداخته و عنوان رنگ را می نویسیم. عنوان برای مثال می تواند رنگ اولیه بوده که کد رنگ آن می تواند هر فرمت موردنیازی از جمله HEX و RGB باشد. یک گروه جدیدی ایجاد می کنیم و نام رنگی روی آن گذاشته و تمامی لایه ها را درونش قرار می‌دهیم.
مرحله دوم
به سادگی کپی کردن رنگ گروه با CMD+J برای نمونه رنگی که شما نیازمندید. معمولا بهتر است 4 الی 5 رنگ را به عنوان رنگ های خود اضافه کنید. بررسی Kuler و COLOURlovers برای پالت رنگ های شگفت انگیز بسیار موثر است. در این آموزش ما یک رنگ اصلی، یک رنگ ثانویه، یک رنگ برای متن، یک رنگ برای تیتر و رنگ سفید برای پس زمینه ورودی انتخاب کردیم. شما می توانید تمامی آنها را در ادامه مشاهده کنید.
تبریک شما موفق به پشت سر گذاشتن آموزش شدید!
در مجموع شما یک برنامه وب رابط کاربری ساده و راهنمایی خواهید داشت. امیدواریم که شما با این آموزش بتوانید یک راهنمای سبک ایجاد نمایید، به همین دلیل بدست آوردن نتیجه ای مطلوب به شما بستگی دارد.
مترجم : مهتاب جهاندار
منبع : tutsplus.com
http://www.osx.ir/نحوه-طراحی-وب-سایت-با-نرم-افزار-تحت-وب-ui-kit/
