۸ راه برای طراحی سریع‌تر وبسایت در فوتوشاپ

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

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

۱. فایل‌هایتان را مرتب نگه‌دارید.

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

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

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

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

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

۲. فریمورک خود را درک کنید

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

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

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

۳. مرتب سازی لایه ها با بخش های محتوایی

زمانی که در یک طرح PSD مربوط به یک وبسایت پیچیده از تعداد زیادی پوشه، لایه، Smart Object و … استفاده می کنید، امکان گیج شدن و شلختگی بسیار زیاد است. تصور کنید که باید لایه ۲۴۵۵ را دستکاری بکنید، مطمئنا انجام تنظیمات و تغییرات روی آن لایه کار بسیار سختی خواهد بود به خصوص اگر ندانید،‌ جایگاه اصلی لایه کجاست. به این دلیل است که من مرتب سازی لایه را با بخش بندی پیشنهاد می کنم.

بهترین کار برای انجام اینگونه مرتب سازی قرار دادن لایه ها در پوشه هایی با اسم های مرتب و درست است. برای مثال پوشه Nav , Footer , Intro , Blog و … . همچنین برای دسترسی بیشتر و سریع‌ پیدا کردن محتوا می توانید رنگ هر کدام از پوشه ها را تغییر دهید.

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

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

استفاده کردن از این شیوه مرتب سازی در پروژه های مشارکتی بسیار مهم است. زمانی که چندین نفر به صورت همزمان در حال کار روی یک پروژه هستند، استفاده کردن از شیوه مرتب سازی براساس بخش های مختلف می تواند در پیدا کردن سریع مشکلات و مسائل مختلف تاثیر بسیار زیادی داشته باشد. 

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

۴. به خاطر سپردن تمام میانبرهای کیبورد برای استفاده های روزمره

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

در روز امکان دارد بعضی از کارها را به تعداد دفعات زیادی انجام دهید. برای مثال افزایش اندازه فونت، مرتب سازی لایه ها، ذخیره برای وب، بالا و پایین بردن میزان شفافیت و … . برای تمام این موارد می توانید از میانبرها استفاده کنید. البته جدای از این موارد، فوتوشاپ برای شما قابلیتی را فراهم کرده که با آن می توانید میانبرهای سفارشی شده و جدید را بسازید. اگر کارهایی که شما انجام می دهید در لیست میانبرهای کیبورد نبود، می توانید میانبر مناسب با آن کار را ایجاد کنید. برای اینکار می توانید به قسمت Edit > Keyboard Shortcuts مراجعه کنید.

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

۵. استفاده از کتابخانه های CC

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

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

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

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

تصویری از کتابخانه‌ی المنت های کمکی که در حساب ادوبی من قرار دارد.

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

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

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

۶. قرار دادن تصاویر و وکتورها به عنوان Smart Object

با وجود اینکه انجام این کار باعث می شود حجم فایل شما بیشتر شود اما برای اینکه طراحان دیگر بتوانند فایلهای PSD شما را به سادگی ویرایش کنند، استفاده از چنین حالتی بسیار مفید است. نگه داری تصاویر و وکتورهای مختلف در یک Smart Object طرح‌تان را تمیز تر و ساده‌تر برای فهمیدن نگه می دارد. 

یکی دیگر از فایدهای قابل توجه این کار، زمانی است که طرح خود را به صورت PSD ذخیره کرده‌اید و حال می خواهید تصاویر طرح را به یک طرح دیگر منتقل کنید، استفاده کردن از Smart Object در این حالت بسیار مناسب است.  زمانی که می خواهید مجموعه ‌ای از تصاویر را تغییر دهید و روی آنها کار کنید، انتقال تصاویر به پروژه ای دیگر روی دقت و ظرافت کاری شما تاثیر می گذارد. استفاده از Smart Object برای جداسازی تصاویر و وکتورها از المان های دیگر یکی دیگر از کارهای مفیدی است که می توانید انجام دهید.

در این تصویر می توانید شاهد آن باشید که تصاویر اصلی صفحه در یک Smart Object قرار گرفته است. 

۷. ساختن یک شیوه طراحی و پیروی کردن از آن

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

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

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

اگر شیوه های طراحی که در ذهنتان دارید را با ویژگی کتابخانه در نسخه CC ادوبی تلفیق کنید، کار طراحی شما به شکل بسیار خلاقانه‌ای در خواهد آمد. 

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

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

۸. تقویت همکاری بین ادارات

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

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

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

درپایان

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

منبع