امروزه با ظهور اینترنت، ارتباطات در دنیا تغییرات زیادی کرده است. وجود اینترنت و گسترش آن در دنیا بسیاری از معادلات را به هم زده است. اینترنت در تجارت‌های مختلف و سازمان‌های مختلف نیز اثر داشته است. این اثر به اندازه ای بوده است که امروزه کمتر تجارت یا شرکتی را میتوان یافت که از اینترنت استفاده نکند! در حقیقت اگر امروزه یک شرکتی را پیدا کنید که به نحوی از اینترنت استفاده نمیکند (یا از شبکه های اجتماعی و یا وب سایت و غیره) به نظر امری بسیار غیرطبیعی می آید! بنابراین لزوم استفاده از اینترنت به شکلهای مختلف برای شرکت‌های مختلف چیزی نیست که بتوان آن را انکار کرد. استفاده از اینترنت برای تجارت ها میتواند ابعاد مختلفی داشته باشد که یکی از مهم ترین ابعاد آن داشتن یک وب سایت است. بنابراین تجارت ها و شرکتها باید برای خودشان یک وب سایت داشته باشند و تجارت‌هایی که چنین نیستند بدون تردید مشکلاتی اساسی دارند. در این میان ممکن است کار طراحی' target=_blank href='/last-search/?q=طراحی'>طراحی وب سایت برای بسیاری از شرکت ها  و تجارت ها آسان نباشد و بسیاری از آنها ممکن است به این موضوع به عنوان یک معضل بنگرند. آنها ممکن است از خودشان سوال کنند چگونه میتوانیم یک وب سایت برای خودمان طراحی کنیم؟ آیا این کار کاری سخت است؟ آیا میتوان کار طراحی وب سایت برای شرکتمان را بدون داشتن دانش فنی انجام دهیم؟ آیا برای طراحی وب سایت شرکتی نیاز به استعداد فوق العاده ای داریم؟ و سوالاتی از این قبیل.

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

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

برای طراحی وب سایت از کجا باید شروع کنم؟

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

اهمیت تحقیق در کجاست؟

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

اهمیت برنامه ریزی را دست کم نگیرید!

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

• بر اساس ساعت ها و زمان برنامه ریزی کنید.
• بر اساس مراحل برنامه ریزی کنید.

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

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

تحقیقات، تحقیقات و باز هم تحقیقات!

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

طراحی سایت شامل چه بخش هایی باید باشد؟

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

اسکچ زدن (Sketching) بر روی صفحه کاغذ

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

اسکچ زدن (Sketching) با کمک نرم افزار یا Wireframes

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

حتماً برای خودتان یک راهنمای طراحی ایجاد کنید

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

پیکره نما یا ماکاپ (Mockups)

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

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

تهیه نمونه اولیه (Prototype)

یکی از مراحل مهم در انجام کار طراحی وب سایت، این است که یک نمونه اولیه از کار خودتان تهیه نمایید. این نمونه اولیه را می‌توانید با استفاده از نرم افزارهای مختلفی مانند Marvel، Adobe XD و Figma تهیه کنید. البته هیچ کدام از این نرم افزارها از دیگری بهتر نیست و نمیتوان گفت که برای بهتر انجام شدن کار کدامیک را باید انتخاب نمایید. البته استفاده از نرم افزار Figma برای شما خرجی نخواهد داشت. حقیقت امر این است که هنگامی که نوبت به تهیه یک نمونه اولیه رسید، دیگر اصلاً ابزار اهمیت آنچنانی ندارد. مهم نیست که شما از کدام ابزار برای انجام این کار استفاده میکنید؛ مهم این است که کار را به درستی و با کیفیت مناسب انجام دهید. البته وقتی که می خواهید یک نمونه اولیه برای کارتان تهیه کنید، نیاز دارید نکاتی را درنظر داشته باشید. چون در صورتی که این نکات را مورد توجه قرار ندهید؛ کارتان در این مرحله کاملا بی فایده میشود و اصلاً بهتر است این مرحله از کار را انجام ندهید و به سراغ مراحل بعدی از کار بروید!

نکته هایی که به هنگام تهیه نمونه اولیه یا Prototype باید درنظر داشته باشید شامل موارد زیر میباشد:

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

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

و اما ساخت وب سایت بر اساس طراحی اولیه وب سایت

تمام نکته هایی که در بالا به آنها اشاره شد، مربوط به زمانی میشوند که هنوز وب سایت را طراحی نکرده اید. ممکن است چیزی حدود ۱۰۰۰ ساعت گذشته باشد و شما هنوز بخش عمده وب سایت را طراحی نکرده باشید! ممکن است به خودتان بگویید: “خدای من! ۱۰۰۰ ساعت کار کرده ام ولی هنوز حتی شروع به طراحی وب سایتم نکرده ام!” اگر چنین است باید گفت که نگران نباشید! شما بخش اعظم کار را انجام داده اید! شما بیشتر راه را طی کرده اید و تنها کاری که باید بکنید این است که طراحی هایی را که در بخش های قبلی طرح ریزی کرده اید را به شکل عملی در آورید. در این مرحله تنها کافی است تمام طرح ریزی هایتان را به شکل کدهای برنامه نویسی درآورید. در حقیقت در این مرحله باید ایده هایتان را تبدیل به کدهای کامپیوتری نمایید. انجام این کار خیلی آسان است و نیاز به زحمت چندانی ندارد. در این مرحله همه ایده ها تبدیل به عمل میشوند و شما تمام آن چه را که طرح ریزی کرده اید عملی میکنید. در این جا قرار است با افراد حقیقی روبرو شوید. بنابراین سعی کنید تا جایی که ممکن است در کار دقیق باشید و دقت عمل داشته باشید.

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

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

امتیاز بدهید :