7 نکته کلیدی در طراحی سایت - طراحی سایت

7 نکته کلیدی در طراحی سایت

7 نکته کلیدی در طراحی سایت

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

 

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

 

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

 

7 نکته کلیدی در طراحی سایت

 

1-طراحی سایت خود را متعادل نگه دارید

 

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

 

مثال

 

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

 


 

 

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

 

.2- طراحی سایت خود را با استفاده از شبکه ها تقسیم کنید.
 


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

 

مثال

 

در سایت 5thirtyone مشاهده میکنید که شبکه یک طراحی سایت مینیمالیستی را شکل داده اند.

 

 

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

 

3. حداکثر برای طراحی  سایت خود دو یا سه رنگ اصلی انتخاب کنید

 

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

 


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

 

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

 

مثال

 

طراحی  سایت زیر را نگاه کنید. دارای سبک طراحی خاص خود است. به طور عمده تک رنگ است (رنگ ها و سایه های یک رنگ) و رنگی (سیاه و سفید) با رنگ (قرمز) برای برجسته کردن:

 

 

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

 

4 - سعی کنید که در طراحی وب سایت گرافیک ها به خوبی کنار هم قرار بگیرند.


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

 

 

مثال

 

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

 

 

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

 

5. تایپوگرافی وب سایت خود را بهبود بخشید.
 


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

 

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

 

Font Stacks

 

چندین روش نسبتاً آسان برای بهبود چشمگیر تایپوگرافی طراحی سایت شما وجود دارد ، که 3  مورد از آنها در اینجا خواهیم گفت. یکی از آنها Font Stacks است.

 


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

 

body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

 

کد بالا به این معنی است که بدنه که سایت با فونت Helvetica Neue  نمایش داده شود ، البته با این پیش فرض که این فونت در کامپیوتر کسی که وارد سایت میشود نصب شده باشد. مک بوک های جدید این فونت را از قبل در سیستم خود نصب شده دارند اما برای اکثر ویندوز ها اینگونه نیست.

 

Measure and Leading

 

Measure  به معنی طول جملات است و Leading به من فاصله ی بین خطوط از هم است. این دو به خوانا بودن متن کمک بسیار زیادی میکند. اگر یکی از انها رعایت نشود کاربران به سختی میتواند آن را بخوانند. شما میتوانید در CSS  اندازه گیری را تعیین اندازه طول مشخص کنید.

 

شما میتواند در CSS  فاصله بین خطوط را کم و زیاد کنید. به طور کلی ، فاصله 1.5 برای پاراگراف ها به خوبی کار میکنند.

 

 

Alignments

 

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

 

 

 

با خطی قرمز نشان داده ایم منظورمان از هم ترازی چیست. شما با اضافه کردن padding-left  در CSS  میتوانید هم ترازی را تعریف کنید.

 

قوانین چاپ که کاربردی ندارند

 

چاپ و وب یکسان نیستند. به نظر می رسد کاملاً واضح است ، اما بسیاری از مردم فکر میکنند که آنها یکی هستند. چاپ ثابت است و سایت داینامیک است. داشتن کنترل کامل بر نحوه طراحی سایت شما برای همه غیرممکن است.

 

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

 

6- در طراحی سایت با اضافه کردن فضای سفید عناصر را از هم جدا کنید

 

فضای سفید یا فضای منفی  به مانند Measure و Leading به متن یک فضای تنفس میدهند. شما با اضافه کردن فضای سفید متوانید عناصر سایت را از هم جدا کنید.

 

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

 

مثال

 

طراحی سایت زیر را مشاهده کنید:

 

 

 

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

 

7-همه عناصر را به هم متصل کنید

 

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

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

وحدت شاید مهمترین بین این دو باشد. بدون وحدت ، داشتن یک طرح خوب کار سختی است. با این وجود ، ناسازگاری ممکن است کمی "دست و پا گیر" به نظر برسد اما ممکن است طرح را "بد" نکند.


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

 


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

 

 

 

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

دیدگاه خود را بیان کنید

پشتیبانی آنلاین

تمامی حقوق برای شرکت فناوری اطلاعات گیلاس خندان محفوظ است