گام به گام تا طراحی سایت

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

1-برای خودتان تعریف کنید که موفقیت چیست

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

2-سایت فعلی را درک کنید

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

3-طرح های اولیه را با مشتری به اشتراک بگذارید

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

4-ابتدا طرح را حل کنید

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

5- شروع به ترسیم یک چارچوب سطح بالا کنید

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

6-یک سیستم grid اضافه کنید

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

7-تایپوگرافی خود را انتخاب کنید

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

8-تم رنگ خودتان را انتخاب کنید

در طی فرایند انتخاب مجموعه ای از حروف متن ، باید شروع به کاوش در استفاده از رنگ هایی که در رابط ، پس زمینه و متن خواهید کرد ، کنید. من یک مجموعه محدود از رنگ و تن را برای UI عمومی توصیه می کنم.
این مهم است که بسته به عملکرد هر عنصر ، از آنهایی که به طور مداوم در طرح وب سایت استفاده می شوند ، استفاده کنید. به طرح سایت هایی مانند فیس بوک ، توییتر ، Quora و Vimeo فکر کنید. علاوه بر رابط کاربر ، هیچ محدودیتی برای تصویر و جزئیات گرافیکی وجود ندارد ، مگر اینکه در عملکرد اجزاء تداخل ایجاد کند.

9-طرح را ساده کنید

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

10-اصلاح هر مولفه

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

11-طرح ها را قدم به قدم با مشتری درمیان بگذارید

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

12-به حرکات فکر کنید

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

13-نمونه اولیه ، نمونه اولیه ، نمونه اولیه

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

 

14-در مورد مولفه های ایجاد شده تجدیدنظر کنید

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

15-خودتان را به چالش بکشید

من هر طراح آنجا را ترغیب می کنم که خود را در هر پروژه به چالش بکشد. نوآوری همیشه یک الزام برای پروژه نیست ، بنابراین وظیفه ما این است که چیز تازه ای به دست آوریم. نمونه هایی از چالش های مختلف می تواند شامل استفاده از سیستم grid جدید ، ایجاد یک مؤلفه جدید یا حتی چالشهای جزئی مانند جلوگیری از حالتهای ترکیبی یا استفاده از یک رنگ خاص باشد.

16-به جزئیات توجه کنید

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

17- طراحی بهترین مورد؛ آماده شدن برای بدترین

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

18- خیلی به ایده های خود وابسته نشوید

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

19-روی طرحتان آنقدر وسواس داشته باشید تا از آن متنفر شوید

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

20-بهترین دوست توسعه دهنده خود باشید

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

21-با مشتری زیاد ارتباط بگیرید

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

22-موارد را به واضح ترین شکل ممکن ارائه کنید

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

23-کار خود را دقیق کنید

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

24-فایل های طرح خود را مرتب کنید

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

25-طرح خود را تا توسعه دنبال کنید

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

26-پیشرفت کار خود را به اشتراک بگذارید

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

27-تا میتوانید پروژه خود را تبلیغ و promote کنید

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