علم گرافیک در طراحی صفحات وب سایت

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

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

ابتدا فرآیند طراحی گرافیکی سایت را بیان می کنیم:

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

تحقیق و جمع آوری اطلاعات

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

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

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

• مخاطبان سایت چه کسانی می باشند؟
• رسالت و هدف سایت چیست؟
• سایت از چه صفحه هایی تشکیل می شود؟(سایت شما چه صفحه هایی نیاز دارد؟)
• ابعاد و معیارها چه چیزهایی می باشند؟
• آیا بودجه یا هزینه مشخصی برای این کار در نظر گرفته شده است؟
• آیا مهلتی برای اتمام پروژه وجود دارد؟
• آیا خود مشتریان مثالی از طراحی سایتی که مایلند دارا می باشند تا به شرکت های طراحی ارائه دهند؟
• آیا شرکت و برند دیگری وجود دارد که بخواهید با سایتتان در ارتباط باشد؟

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

یک طرح کلی ایجاد کنید

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

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

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

نکته: پس از اینکه طرح مورد نظر تصویب شد، حال زمان آن است که شرکت طراحی سایت طرح پیشنهادی هزینه ای و زمانی را به مشتری ارائه دهد؛ که این براساس تغییرات و خواسته های مشتری کاملا متغیر است.

بکار گیری خلاقیت

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

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

راه هایی که می توان خلاقیت را در طراحی گرافیکی به کار برد:

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

طرح ها و تشکیل Wireframe

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

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

طرح های مختلف

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

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

اصلاحات

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

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

عموما، بعد از این فاز، دیگر مرحله ضروری برای رسیدن به طراحی پایانی وجود ندارد.

تدوین و چسباندن مراحل به یکدیگر

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

روانشناسی رنگ ها

قرمز

صفات: قدرت، اهمیت، جوانی

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

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

البته این رنگ می تواند گاهی اوقات علیه ما هم باشد و موجب خشم کاربران شود!

نارنجی

صفات: دوستی، انرژی، منحصر به فرد

به عنوان یک رنگ خاموش گرم، نارنجی منحصر به فرد و همه کاره است.به عنوان یک رنگ اصلی می تواند جذاب و انرژی بخش باشد و اگر به عنوان رنگ ثانویه استفاده شود می تواند همین ویژگی ها را حفظ کند.نارنجی به ایجاد احساس حرکت و انرژی کمک کند.

زرد

صفات: شادی، شور و شوق، قدمت

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

سبز

صفات: رشد، پایداری و ثبات، تم مالی، موضوعات محیطی

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

آبی

صفات: آرامش، امنیت، آزادی (روشن)، اعتماد و اطمینان (تیره تر)

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

بنفش

صفات: لاکچری و تجملاتی، رمانتیک (روشن)، رمز آلود (تیره)

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

مشکی

صفات: قدرت، پیچیدگی

پر قدرت ترین رنگ طبیعی است، رنگ مشکی در تمامی وب سایت ها موجود می باشد.

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

سفید

صفات: پاکیزگی، فضیلت، سادگی

در فرهنگ غرب و حتی فرهنگ خودمان سفید با صفات فضیلت، خلوص و بی گناهی درآمیخته است.

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

طوسی

صفات: بی طرفی، متانت، تشریفات

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

بژ (قهوه ای مایل به زرد و خاکستری)

صفات: مفسر ویژگی های رنگ های اطراف آن

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

سایه های تیره تر بژ، یک بافت خاکی و بیشتر یک بافت کاغذی تشکیل می دهد، در حالی که بژ روشن حس تازگی را ارائه می دهد.در این مورد، اگر بژ روشن در نام تجاری استفاده شود، و اگر سایت در مورد یک رستوران باشد، حس یک رستوران مدرن را ارائه می دهد.

طرح و نقشه رنگ

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

با اینکه راه ها و رنگ های بسیار زیادی برای ترکیب شدن وجود دارد، اما اکیدا توصیه می شود که حداکثر در سایت از بیش از  3 یا در برخی موارد 4 رنگ استفاده نشود.

استفاده از شمای گرافیکی رنگ ها به نام Triadic:

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

روش بعدی برای انتخاب رنگ، روش کامپوند (Compound) می باشد:این روش اگر به درستی استفاده شود می تواند بازدهی بسیار خوبی برای ما داشته باشد.این روش استفاده از 4 رنگ را در برمی گیرد:یک جفت رنگ متضاد و یک جفت رنگ مکمل.

تصاویر

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

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

تایپوگرافی

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

نقش و اهمیت شکل بصری سایت

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

نتیجه گیری

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

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