دنیای فناوری چابک

صفر تا صد طراحی سایت با دنیای فناوری چابک

7 مورد بنیادین در طراحی وب که باید بدانیم

تفاوت طراحی وب و گسترش وب
اصول طراحی وب‌سایت
چیدمان وبسایت
اجزای مهم در طراحی وب
المان‌های بصری در طراحی وب
نگهداری از وب‌سایت
بهترین منابع الهام برای طراحی وب‌سایت

1. تفاوت طراحی وب و توسعه وب

اولین چیزی که باید در بحث طراحی وب مشخص کنیم تفاوت بین طراحی وب (Web Design) و توسعه وب (Web Development) است

 

چون این دو به طور معمول با یکدیگر اشتباه می‌شوند.

طراحی وب مربوط به ظاهر سایت می‌شود. یک طراح وب وظیفه دارد تا ظاهر وبسایت را طوری طراحی کند که بیننده به وبسایت جذب شود. ما در پیوسته به شکل مفصل به این بحث خواهیم پرداخت.

 

پیشنهاد می‌کنیم این مقاله را هم بخوانید: راهنمای طراحی تارنما برای کسب و کارهای حقیر (آموزش صفر لغایت صد)

 

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

حالا به طور ناچیز به زبان‌های برنامه نویسی اصلی در طراحی و گسترش وب می‌پردازیم:

 

Html یک زبان برنامه نویسی است که برای برپایی دسته ظاهری (فرانت اند) وب‌سایت ها استفاده می شود. از این زبان برای نوشتن ساختار و استخوان بندی سایت کاربرد می‌شود.

CSS یک زبان برنامه نویسی (یا بهتر بگوییم استایل دهی و نشان گذاری) است که تمام اطلاعات مهم ظاهری یک وب‌سایت را در خود دارد CSS و Html در کناره هم پیشه می‌کند تا مدل ظاهری سایت از جمله طرح اصلی فونت و دیگر عوامل ظاهری وبسایت را تعیین کنند.

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

2. اصول مهم در طراحی سایت

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

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

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

 

آشنایی با اصول طراحی

 

تعادل

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

در طراحی وب دو نوع ترازمندی هستی دارد که در پایین به آن‌ها می‌پردازیم:

 

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

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

اصل تعادل در طراحی


کنتراست

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

 

اصل کنتراست در طراحی

 

تاکید

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

 

اصل پافشاری در طراحی سایت

 

پیشنهاد می‌کنیم این نوشتار را هم بخوانید: هزینه طراحی یک تارنما چیره دست چقدر است؟

 

حرکت

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

 

اصل حرکت در طراحی

 

ریتم

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

اصل ریتم در طراحی


سلسله مراتب

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

 

اصل سلسله مراتب در طراحی سایت

 

فضای سفید

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

 

اصل فضای سفید در طراحی سایت

 

یک پارچگی

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

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

 

اصل یکپارچگی در طراحی سایت

 

3. چیدمان وبسایت

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

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

 

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

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

چیدمان های رایج وب سایت

 

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

 

 

دنیای فناوری


chabokit

10 Blog posts

Comments