طراحی وب‌سایت فن به صورت مرحله به مرحله

این پست مدت‌هاست که در حال پرورش و آماده‌سازی بوده است. در ابتدا قرار بود به عنوان ادامه‌ی سلسله مقالات "ایجاد وب‌سایت طرفداری" منتشر شود (یک و دو). پس این مقاله چه ارتباطی با وبلاگ Fable 3 دارد؟ جواب ساده است: در مورد طراحی بدون یک مثال کاملاً مشخص، هیچ چیز را نمی‌توان توضیح داد. طراحی در خلاء وجود ندارد. بنابراین، زمانی که مدتی پیش تصمیم به بازطراحی یکی از وب‌سایت‌های طرفداری‌مان در مورد سری بازی‌های Fable گرفتیم، من تصمیم گرفتم که این مثال همان چیزی است که با آن "رازها را به اشتراک می‌گذارم".

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

آماده‌سازی بوم و بوم

در مورد ما، بوم معمولاً Photoshop CS4 خواهد بود و بوم فایل جدید ماست که هنوز خالی است. علاوه بر "فوتوشاپ"، برنامه‌های دیگری نیز وجود دارند، مثل Gimp. برخی توانسته‌اند با Corel Draw کار کنند. اما به هر حال، بشر هیچ برنامه‌ای برای طراحی وب بهتر از فوتوشاپ اختراع نکرده است. این ابزار اصلی برای طراح وب است. Corel Draw یا Adobe Illustrator ممکن است برای ایجاد عناصر جداگانه طراحی شما استفاده شوند، اما "جمع‌آوری" ماکت به‌راحتی در فوتوشاپ انجام می‌شود.

ما در مورد "بوم" توضیح دادیم، حالا زمان بوم است. در اینجا باید به رزولوشن‌های صفحه اشاره کنیم. پنج سال پیش، رزولوشن 1024x768 در همه جا غالب بود و 1280x960 تازه در حال آغاز بود. دو سال پیش، 1680x1050 و 1600x1200 به عنوان رزولوشن بزرگ شناخته می‌شدند. امروز، مانیتورهایی با Full HD به‌سرعت به یک امر عادی تبدیل می‌شوند، بنابراین ما باید حداکثر رزولوشن خود را بر روی 1920x1080 متمرکز کنیم. با این حال، 1024x768 به‌سرعت برای بازنشستگی نرفته است و این خط پایینی ماست. در واقع، عرض بسیار مهم‌تر است، زیرا طولی که سایت ما خواهد داشت بسیار زیاد است، در واقع مانند 90٪ از تمام سایت‌ها در شبکه.

در گذشته، طراحی "کشیدنی" مد بود. یعنی عناصر جداگانه طراحی از عناصر تکراری تشکیل شده بودند و به این ترتیب، سایت بر اساس رزولوشن کاربر کشیده می‌شد. اما با ورود Full HD، این روش سازگار کردن سایت با رزولوشن کاربر به‌طرز غیرزیبایی به نظر می‌رسد. چشم انسان به‌گونه‌ای طراحی شده است که اطلاعاتی که در فاصله‌ی دسترس قرار دارند را می‌توان به خوبی در عرضی حدوداً برابر با A4 درک کرد. هر چیزی که عریض‌تر باشد، دیگر در کانون توجه نیست. بنابراین اخیراً، معمول است که بخش محتوایی باریک باشد و فضای باقی‌مانده در سمت چپ و راست با دکور زمینه‌ای پر شود. به این ترتیب، هم گوسفند سیر است و هم گرگ‌ها در امان :) و بنابراین، بخش محتوایی ما 1000 پیکسل خواهد بود (فراموش نکنید که در مرورگر، بخش راست دارای نوار پیمایش است که این 24 پیکسل از 1024 را "می‌بلعد"). بنابراین، منطقه "میدان" ما با زیبایی‌های زمینه‌ای (1920-1000)/2=460 پیکسل در سمت چپ و راست خواهد بود. برای اینکه به‌طور تصادفی از این حوزه فرار نکنم، من از راهنماها استفاده می‌کنم. در حالت فعال‌بودن خط‌کش‌ها، من فقط با ماوس حرکت می‌کنم و "راهنماها" را به مکان‌های مورد نیاز می‌کشم. همچنین می‌توانم مرکز بوم خود را نیز مشخص کنم. من همچنین به‌طور تقریبی مکانی را که برای هدر سایت در نظر می‌گیرم مشخص کردم. همه چیز، کار مقدماتی به پایان رسید. بیایید به مرحله‌ی آماده‌سازی برویم :)

آماده‌سازی مقدماتی به پایان رسید

الهام‌گیری

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

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

این قاب در نهایت به تعداد زیادی عنصر جداگانه‌ی رابط کاربری تقسیم شد


اولین هنر نرمال که در قسمت سوم پیدا شد

و این نیز دومین هنر است. دیگر چیزی با این سبک مورد نیاز پیدا نشد

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

هنر قسمت دوم در نهایت در آخرین مراحل کار مورد استفاده قرار گرفت

کجا بدون لوگو؟

شروع کار

حالا می‌توانیم به کار خود بپردازیم. اجازه بدهید فوراً یک ترفند کوچک را به شما بگویم: من به‌طور منظم نتایج کارم را با نام جدید ذخیره می‌کنم و تاریخچه نسخه‌ها را محترم می‌شمارم. به‌طور پیش‌فرض، نتیجه اول نسخه 01 است و از آنجا به 02، 03 و غیره می‌رود. نسخه 10 زمانی ایجاد می‌شود که شما فکر می‌کنید همه چیزهایی را که می‌خواستید انجام داده‌اید و وقت آن است که کار را به بازبینی‌کنندگان/دوستان/مشتریان نشان دهید. احتمالاً طراحی نیاز به اصلاحات خواهد داشت. در آن صورت، نسخه‌های 11، 12 و غیره به وجود خواهند آمد. این بازخوردی بسیار مفید برای پیگیری پیشرفت خودتان است و همچنین به شما امکان می‌دهد که در صورت لزوم به ایده‌های نسخه‌های قدیمی‌تر برگردید یا بخشی از آن‌ها را از نسخه‌ای که در حال حاضر آن را حذف یا به تغییرات غیرقابل تشخیصی سپرده‌اید، دوباره به دست آورید.

و یک توصیه دیگر، در فوتوشاپ همه عناصر شما بر روی لایه‌های جداگانه نگهداری می‌شوند. تنبلی نکنید و به‌سرعت نام‌های معنادار به آن‌ها بدهید و با استفاده از تابع ctrl+b لایه‌های یک عنصر خاص را گروه‌بندی کنید. هنگامی که در فایل شما بیش از 100 لایه جمع می‌شود، بدون برچسب‌ها و گروه‌بندی، تشخیص آن‌ها به شدت دشوار می‌شود.

اما بس است صحبت، زمان نگاهی به اولین نتیجه است. هرچند این حتی اولین هم نیست، این تقریباً صفر است:

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

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

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

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

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

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

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

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

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

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

و حالا لحظهٔ حقیقت فرارسیده است! با بازگشت به یک قدم عقب، و با جادوگری با عناصر‌مان، در نهایت یک ماکت ایجاد شد که بسیار نزدیک به نسخه نهایی است. همه عناصر اصلی جمع‌آوری شده و به‌جای خود قرار گرفته‌اند: منوی اصلی، بلوک‌های جانبی، محتوا، هدر و پاورقی. اگر دقیق شوید، می‌توانید متوجه شوید که برخی از عناصری که در نسخه‌ی قبلی ناموفق بودند، هنوز هم به کار آمده‌اند. متون مشخص از سایت Dragon Age گرفته شده بودند تا فقط توزیع متن را برآورد کنیم. Palatino Linotype به‌عنوان فونت اصلی انتخاب شده است. این یک فونت استاندارد زیبا است که بسیار مهم است. در این صورت سایت شما بدون مشکل در همه کاربران ویندوز به‌خوبی نمایش داده می‌شود. البته راهی برای استفاده از فونت‌های خاص خود وجود دارد که سایت بارگذاری خواهد شد به کش کاربر، اما این ترافیک اضافی و مشکلات در نمایش فونت در مرورگرهای مختلف است. توصیه نمی‌کنم که به این موضوع شیدا شوید. در اینترنت می‌توانید جدول عالی فونت‌های استاندارد ویندوز پیدا کنید. خودم از آن استفاده می‌کنم و به شما هم توصیه می‌کنم. اما در هدر، می‌توانید و حتی باید از فونت‌های تزئینی استفاده کنید. در این مرحله برای نام وب‌سایت، من یک فونت فوق‌العاده پیدا کردم که Algerius Caps نام دارد. تفاوت را حس کنید با آنچه که بود!

این یک مرحله جالب‌ است که به‌روشنی نشان می‌دهد که حتی در طراحی نزدیک به پایان هرگز نمی‌توان چیزی را اصلاح کرد. اولاً، من خط منوی پایینی را رد کردم و به‌طور نهایی آن را به پاورقی تبدیل کردم. به یاد دارید که گفتم که منوی افقی هنوز به کار می‌آید؟ - کاربردی بود. خود ماکت از عناصر غیرضروری که دیگر لازم نبودند پاکسازی شد تا طراحی را شلوغ نکند. اما نکته اصلی این است که برای تاج در طراحی مکان نهایی پیدا شده است. به‌خوبی جا به‌جای شمشیر از غلاف! ما یکی از آثارمان را می‌بریم و دست را با شمشیر و تاج مانند کارد می‌زنیم. کار بر روی رنگ‌آمیزی لوگوی که بالای دستکش وجود داشت، بسیار استادانه بود. این موردی است که مقیاس بیش از 1000٪ واقعاً اضافی است. همچنین شروع به کار بر روی تنظیم رنگ پس‌زمینه‌مان کردم. خیلی زرد و سبز به نظر می‌رسد. آن را کمی ضعیف کردم. معمولاً برای این کار از یک لایه اضافی با رنگ مورد نظر با نوع مخلوط شدن soft light (نور ملایم) استفاده می‌کنم، اما بسته به نیاز می‌توانید انواع دیگر مخلوط شدن را هم امتحان کنید. در این مورد، گاما با استفاده از لایه آبی اصلاح شد.

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

خط پایان

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

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

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

www.Fable-game.ru

پس‌نوشت

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

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

*طراح و نویسنده من، Ksandr\_Warfire

این ماده به‌ویژه برای GAMER.ru تهیه شده است