logo
  • گرافیک سایت

انواع قالب سایت

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

تاثیر انیمیشنهای GIF در وب سایت

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

انیمیشنهای GIF

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

طراح بنر   بنر حرکتی   بنر سایت

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

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

بنابراین نتیجه میگیریم:

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

انیمیشنهای GIF | تاثیر انیمیشنهای GIF در وب سایت

ویرایش عکسها برای سایت را چگونه انجام دهیم؟

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

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

1.نوع فرمت تصاویر RGB یا CMYK

عکس ها باید در فرمت  RGB قرار دارد و نه CMYK چرا که  فرمت CMYK بیشتر برای کارهای چاپی کاربرد دارد و حجم زیادی هم در بر خواهد داشت اما فرمت RGB برای کارهای وب کاربرد دارد و حجم کمتر و تعداد رنگ بیشتری نسبت به فرمتهای چاپی دارد. ضمنا این نکته را در نظر داشته باشید که بهتر است که از ابتدا فایل جدید را در مود RGB کار نمایید تا اینکه در مود CMYK کار کنید و بعدا آنرا تبدیل نمایید. مود یک عکس را از مسیر Image > Mode میتوانید چک/عوض کنید.

ویرایش عکسها برای سایت

RGB مناسب وب سایت

2.ابعاد و سایز تصاویر

اگر ابعاد عکس بیشتر از حد معمول باشد و بخواهید آن را با استفاده از این گزینه Save for a Web/Device ذخیره نمایید.برنامه به شما هشدار می دهد که حجم عکس شما بیش از حد معمول است و فتوشاپ این کار را نمی تواند به درستی انجام دهد. پس به اندازه و حجم عکس اصلی توجه داشته باشید و انتظار نداشته باشید عکس با حجم ۵۰ مگا بایت و ابعاد بسیار بالا را بتوانید به عکس ۱۰۰ کیلو بایتی با همان ابعاد تبدیل نمایید. بهتراست برای طراحی تصاویر وب سایت حتما رزولیشن را روی 72 بگذارید و سعی کنید طول تصویرتان از 1000 پیکسل تجاوز نکند و برای قسمتهای بزرگ بیشتر از رنگها استفاده کنید که حجمی ندارند و سعی کنید تصاویر کوچکترو در فضاهای کمتری قرار بگیرند تا حجم سایت در کل کمتر شود.

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

سایز تصاویر

سایز تصاویر سایت

3.تعداد تصاویر

برای یک صفحه وب سایت بهتراست حداگثر تعداد تصاویر 10 عدد باشد البته بیشتر از این تعداد هم میتوان کار کرد اما تعداد نرمال جهانی 10 تصویر است.

تعداد تصاویر

تعداد تصاویر مناسب سایت

4.استفاده از ابزارهای و برنامه های وبی برای کوچکتر کردن سایز تصاویر

اغلب این برنامه به راحتی در وب سایتهای ایرانی و خارجی قابل دانلود هستند اما یکی از پر طرافدارترین برنامه ها برنامه optimizilla.com است که تصاویر را بدون از بین رفتن کیفیت کم حجم می کند.

ویرایش تصاویر

نرم افزار ویرایش تصاویر

ویرایش عکسها برای سایت | ویرایش عکس

گرافیک در تجارت الکترونیک

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

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

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

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

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

گرافیک در تجارت الکترونیک

تجارت الکترونیک

موارد که به بهتر شدن گرافیک در تجارت الکترونیک کمک می کند کدام است؟

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

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

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

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

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

گرافیک در تجارت الکترونیک

طراحی هویت سازمانی چگونه است؟

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

در زیر به معرفی بخشها مختلف برای طراحی هویت سازمانی می پردازیم:

طراحی هویت سازمانی

طراحی یک نشان برای سازمان:

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

منحصر به فرد بودن:

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

ثبت هویت سازمانی:

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

انجام تبلیغات برای شناساندن هویت سازمانی به مردم:

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

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

ارتباطات :

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

نقش گرافیست در طراحی هویت سازمانی:

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

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

طراحی هویت سازمانی | هویت سازمانی

هویت سازمانی در طراحی چیست؟

هویت سازمانی چیست و چرا در تجارت الکترونیک مطرح شده است؟

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

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

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

1. به تمامی سازمان توجه کنید.

2. سعی کنید برای سازمان یا شرکت رنگی را انتخاب کنید تا از آن رنگ برای اوراق اداری استفاده کنید.

3. به طراحی اوراق اداری کاملی بپردازید.

4. اوراقی کلی شامل موارد زیر است:

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

هویت سازمانیاوراق اداری

5. طراحی لباس و یونیفرم برای کارکنان.

6. تبلیغات در سطح شهر و یا تبلیغات رسانه ای مثل (TV).

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

هویت سازمانی

چگونه گرافیست وب سایت خوبی باشیم؟

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

گرافیست وب سایت

به موضوع طراحی خود اهمیت دهید:

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

به جایگاه مطالب دقت داشته باشید و هر چیز را جای درست خودش قرار دهید:

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

طرح های قدیمی دیگر طرح نیست!

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

هارمونی رنگها را رعایت کنید:

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

به از تصاویر خوب و با کیفیت استفاده کنید:

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

سادگي را فراموش نکنید:

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

تداوم کار با گرافیست وب سایت:

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

گرافیست وب سایت

گرافیک وب با گرافیک چاپ چه تفاوتهایی دارد؟

گرافیک وب چیست و چه تفاوتی به گرافیک چاپ دارد؟

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

ویژگیهای گرافیک وب با گرافیک چاپی که همان نوع گرافیک قدیمی و روی کاغذ می باشد تفاوت هایی دارد که می توان از آن بعنوان یک مبحث کاملا متفاوت نام برد.

1.تعاملی بودن گرافیک وب نسبت به گرافیک چاپ:

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

2. وجود موشن در گرافیک وب:

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

3. ترکیب رنگ در گرافیک چاپ بیشتر از گرافیک وب:

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

4.تعداد رنگهای زیاد در گرافیک چاپ اما حداکثر سه رنگ در گرافیک وب:

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

5. حجم فایلها در گرافیک وب خیلی کمتر از گرافیک چاپ:

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

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

گرافیک وب

psd سایت شیرینی

psd سایت

نمونه کارها

گرافیک وب

بهینه سازی تصاویر برای وب سایت

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

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

هر فايل تصويري به سه حرف ختم مي شوند كه معمول ترين:  BMP،  GIF ، JPG و PNG می باشد و همچنین پسوند BMP که امروزه زیاد مورد استفاده نیست برای بهینه سازی تصاویر مهم نیست که پسوند فایل شما چه باشد چیزی که اهمیت دارد حجم تصاویر و کیفیت آنهاست.

انواع پسوندهای فایلهای تصویری چیست؟

فایلهای JPG:

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

نمونه ای از اسلایدر با پسوند jpg:

بهینه سازی تصاویر

فایلهای GIF:

اين فايل ها مي توانند با تعداد رنگهاي 128 يا 256 بيت يا رنج كاملي از رنگها فشرده شوند. (توجه داشته باشيد كه اين فايلها با هر تعداد رنگ مي توانند فشرده شوند.) طبيعي است كه هر چه تعداد رنگ بيشتري استفاده كنيد حجم فايل بيشتر مي شود.  فايل هاي GIF مي توانند داراي يك پشت زمينه نامرئي باشند.

نمونه ای از اسلایدر با پسوند gif:

فایل اسلایدر

فایلهاهی PNG:

این فایلها هم می توانند پس زمینه نامرئی داشته باشند اما از لحاظ حجمی از فایلهای GIF سنگین تر هستند.

نمونه ای از اسلایدر با پسوند png:

بهینه سازی تصاویر سایت

RGB یا CMYK:

این دو فرمت هم برای میزان رنگهای وب سایت استفاده میشوند که همیشه برای بهینه سازی تصاویر از فرمت رنگی RGB استفاده کنید زیرا فرمت CMYK حجم بالایی دارد و معمولا برای کارهای چاپی استفاده میشود.

بهینه سازی تصاویر را چگونه انجام دهیم؟

روشهای متنوعی برای بهینه سازی تصاویر وجود دارد که به نظر من بهترین روش استفاده از نرم افزارهایی است که در این زمینه تولید شده اند یک از بهترین این نرم افزارها JPEG.Imager.2 می باشد که حجم کمی دارد و به راحتی دانلود میشود با نصب این نرم افزار به راحتی میتوانید حجم هر تصویر با هر فرمتی را بدون از دست رفتن کیفیت آن کم کنید.

بهینه سازی تصاویر

نکاتی برای طراحی آرم

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

طراحی آرم

در زیر به ده نکته در مورد طراحی آرم اشاره میکنیم:

1. لازم نیست طراحی ارم دقیقا شبیه نوع کار مشتری باشد.

مثلا اگر برای یک پزشک لوگو طراحی می کنید لازم نیست که لوگوی شما دقیقا شبیه یکی از ابزارهای پزشکی باشد یا اگر آرم برا یک رستوران است لازم نیست که لوگو حتما یک غذا باشد.

2. همیشه از سلیقه مشتری استفاده کنید.

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

3. از کاغذهای مناسب برای چاپ استفاده کنید.

امروزه طراحي لوگو بدون كامپيوتر غير ممكن به نظر مي رسد ولي استفاده از كامپيوتر به اين معني نيست كه طرح هايي را كه در ذهن داريد روي كاغذ امتحان نكنيد و براي كشيدن طرح هاي اوليه روي كاغذ احتياجي نيست كه يك نقاش يا هنرمند ماهر باشيد فراموش نكنيد كه طرح هايي را كه روي كاغذ مي كشيد هيچگاه نمي توانيد روي كامپيوتر ابداع كنيد.

4. به مد اهمیت ندهید.

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

5. از رنگ سیاه در ابتدا استفاده کنید.

هميشه رنگ ها را بعد از اتمام طراحي به لوگو اضافه كنيد و سعی کنید لوگوی اولیه روی کاغذ سفید و با رنگ مشکی طراحی شود زیرا در این صورت ایرادات کار را به خوبی خواهید دید.

6. طرح مناسب و طراحی درست را انتخاب کنید.

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

7. سادگی را فراموش نکنید.

هر چه لوگوي شما ساده تر باشد به خاطر سپردن آن ساده تر است. و به خاطر داشته باشيد هدف از طراحي لوگو اين است كه با يك نگاه در ذهن بيننده حك شود اگر به لوگوي سازمانهاي بزرگي مانند ميتسوبيشي، سامسونگ، BBC، … دقت كنيد متوجه مي شويد كه لوگوي آنها چقدر ساده است ساده بودن لوگو يك برتري ديگر هم دارد و آن اين است كه انعطاف پذيري شما در ابعاد لوگو بيشتر مي شود و مي توانيدلوگوي آن سازمان را در متن ها، تبليغات و…مختلف استفاده كنيد بدون اينكه جزئيات آن (در اثر كوچك شدن ) از بين برود.

8. رنگهای درست استفاده کنید.

وقتی لوگویی طراحی می کنید باید از رنگهای درست هم استفاده کنید مثلا اگر لوگوی شما طرح یک سیب است بهتر است از رنگ قرمز یا سبز یا زرد استفاده کنید سیب بنفش که نداریم!!!

9. استفاده از فونت های مناسب برای تایپوگرافی.

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

10. زیبایی را فراموش نکنید.

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

طراحی آرم | طراحی ارم | طراحی لوگو و آرم

معنی خطوط در طراحی چیست؟

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

خطوط نازک :(معنی خطوط در طراحی)

نشانه شکنندگی و ظرافت و حساس بودن یه موضوع و یا یک بخش هستند.

معنی خطوط در طراحی

خطوط ضخیم :

نشانه قدرت و پایداری و استقامت و شکننده نبودن می باشند.

خط ضخیم

خطوط افقی :

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

خط افقی

خطوط عمودی :

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

خط عمودی

خطوط مورب : (معنی خطوط در طراحی)

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

خط مورب

خطوط منحنی :

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

خط منحنی

خطوط زیگزال :

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

خط زیگراگ

معنی خطوط در طراحی

طراحی جلد سی دی

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

برای طراحی جلد سی دی باید در ابتدا ابعاد درست را بدانیم:

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

طراحی جلد سی دی

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

طراحی جلد سی دی خلاقانه

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

طراحی جلد سی دی

اسلایدرهای تبلیغاتی به چند دسته تقسیم می شوند؟

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

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

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

انواع اسلایدرهای تبلیغاتی:

اسلایدرهای تبلیغاتی (بنرهای ثابت):

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

اسلایدرهای تبلیغاتی

اسلایدرهای متحرک (انیمیشنی):

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

طراحی بنر فروشگاهی

اسلایدرهای چند بخشی (یا زمان دار):

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

اسلایدر ورزشی

اسلایدرهای تبلیغاتی

طراحی کارت ویزیت | چطور کارت ویزیت طراحی کنیم؟

چرا به طراحی کارت ویزیت  نیاز داریم؟

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

چگونه طراحی کارت ویزیت انجام دهیم؟

در مرحله اول باید با سایز کارت ویزیت اشنا شویم تا بتوانیم یک کارت ویزیت را به خوبی طراحی کنیم.

اندازه کارت ویزیت 5 سانتی متر در 9 سانتی متر است:

سایز اصلی کارت ویزیت افست 4/8 در 8/4 می باشد که به دلیل رعایت مارجین برش می بایست اندازه ها 5 در 9 در نظر بگیرد تا هنگام برش چیزی از طراحی شما که مورد نظرتان است حذف نشود.

طراحی کارت ویزیت

تفاوت چاپ افست یا چاپ دیجیتال:

  1. در چاپ افست به طور کلی می‌توان از هر نوع کاغذی استفاده نمود هم از نظر نوع ، هم از نظر جنس و هم از نظر گرم ، اما در چاپ دیجیتال از هر نوع کاغذی نمی توان استفاده نمود.
  2. در تیراژهای کم چاپ دیجتال خیلی کم هزینه تر از چاپ افست است.
  3. به طور کلی کیفیت چاپ تکرنگ مشکی در دیجیتال بهتر از افست می باشد.

برش در چاپ:

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

کارت ویزیت جدید

کارت ویزیت برجسته:

یکی دیگر از بهترین امکانات کارتهای ویزیت جدید برجسته بودن بخشهایی از کارت یا نوشته است که باعث هر چه زیباتر دیدن کارت ویزت شما میگردد.

کارت ویزیت برجسته

انواع کارت ویزیت (انواع پوشش های حفاظتی):

پوشش یو وی:

uv موضعی یک لایه براق و برجسته بوده که در مکان های تعیین شده در کارت شما قرار می گیرد.

پوشش لمینیت:

لمینیت هم یک نوع روکش است که روی کارت قرار میگیرد که دارای دو نوع لمینیت مات و لمینیت براق است.

پوشش سلفون:

این نوع کارت بر روی کاغذ گلاسه ۳۰۰ گرم چاپ می شود. سپس بر روی آن روکشی از سلفون مات قرار می گیرد.

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

طراحی کارت ویزیت

اصول طراحی اسلایدر

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

اصول طراحی اسلایدر چیست؟

جذاب و زیبا نمودن اسلایدر:

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

اصول طراحی اسلایدر

جذاب نمودن اسلایدر با المانهای تصویری

برقراری ارتباط بین اسلایدر و کسب و کار سایت:

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

سلایدر کار

برقرار ارتباط بین اسلایدر و کسب و کار

گرافیک زیبا در طراحی اسلایدر:

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

طراحی بنر تبلیغاتی

استفاده از مدل زیبا در اسلایدر

درج پیام سایت در هر کدام از اسلایدرها:

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

سال نو مبارک

پیام سایت در اسلایدر

اصول طراحی اسلایدر

اصول گرافیک سایت جدید | چطور گرافیک سایتمان را جدید کنیم؟

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

اصول گرافیک سایت جدید

اصول گرافیک سایت جدید:

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

سایت های خبری:

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

سایت های فلت:

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

سایت های تک صفحه ای:

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

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

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

اصول گرافیک سایت جدید | گرافیک سایت | گرافیست سایت

تاثیر اسلایدر بر سایت

اسلایدر تاثیر زیادی در دید اولیه کاربران به وب سایت دارد هر چه اسلاید سایت زیباتر و متناسب با موضوع باشد می تواند کاربران بیشتری را به سوی وب سایت جذب کند.

اسلایدر

استفاده از اسلایدر برای تبلیغات و تاثیرات آن بر روی مشتریان:

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

استفاده از افکت حرکتی:

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

بررسی درآمد و میزان فروش فروش توسط اسلایدر:

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

تبدیل اسلایدهای سایت به بنر حرکتی:

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

اسلایدر

ویژگی های یک طرح سایت استاندارد چیست؟

طرح سایت استاندارد باید در مرحله اول بر اساس دو اصل مهم طراحی شود.

اول: جذب کاربران

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

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

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

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

طرح سایت استاندارد

بغیر از مشتری تمرکزتان باید روی موتورهای جستجوگر هم باشد زیرا موتورهای جستجوگر هستند که در مرحله اول کاربران را با وب سایت شما آشنا می کنند. برای مثال اگر خودتان بخواهید یک ریمل (یک محصول آرایشی) بخرید چکار میکنید؟ مسلما در اینترنت سرچ خواهید کرد و روی اولین وب سایتی که در نتیجه جستجو می آید کلیک می کنید پس موتورهای جستجو و مخصوصا گوگل نقش مهمی در این روند آشنایی مشتری با شما دارد.

طرح سایت استاندارد باید شامل موارد زیر در بخش طراحی گرافیکی سایت باشد:

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

طرح سایت استاندار برای بخش برنامه نویسی و سئو:

  1. استفاده از یک زبان برنامه نویسی شناخته شده و بدون باگ(مشکلات درونی برنامه).
  2. کدنویسی درست و تمیز یعنی بدون کدهای اضافه و کپی برداری از وب سایت های مشابه.
  3. کدنویسی مناسب برای موتورهای جستجوگر.

طرح سایت استاندارد

تفاوت پوستر و اسلایدر

تفاوت پوستر و اسلایدر در چیست؟ پوستر تاثیرگذارتر است یا یک اسلایدر؟

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

اسلایدر شباهت زیادی به یک پوستر دارد در واقع همان پوستر در سطح شهر میشود اسلایدر در سطح سایت.

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

چند نمونه از پوسترهای  تئاتر:

تفاوت پوستر و اسلایدر

معمولاً پوستر ها در ابعاد زیر طراحی میشوند :

  • A4 که در سایز ۲۱ در ۲۹٫۷ سانتی متر می باشد.
  • A3 که در سایز ۲۹٫۷ در ۴۲ سانتی متر می باشد.
  • A2 که در سایز ۴۲ در ۵۹٫۴ سانتی متر می باشد.

اما اسلایدر های بسته به مکانی که در وب سایت قرار میگیرند می توانند اندازه های متفاوتی داشته باشند اما باید به حجم اسلایدرها توجه لازم را داشته باشیم و همیشه سعی کنیم حجم اسلایدرها زیر 100 کیلو بایت باشد.در غیر این صورت اگر حدود سه اسلایدرهام در سایت قرار یگیرد 300کیلوبایت به حجم وب سایت اضافه میشود.

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

طراحی پوستر :

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

تفاوت پوستر و اسلایدر

فتوشاپ در طراحی سایت چه نقشی دارد؟

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

فتوشاپ در طراحی سایت

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

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

هر سایت دو بخش اساسی دارد:

  1. بخش ظاهری سایت (یعنی همان چیزی که کاربران در مانیتور خود می بینند)
  2. بخش پنل سایت (بخش کد نویسی و مدیریت وب سایت)

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

چگونه از فتوشاپ در طراحی سایت استفاده کنیم؟

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

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

  • عکسها را با کیفیت خوب و حجم کم طراحی کنید.
  • حجم مناسب برای تصاویر زیر 200 کیلو بایت است.
  • رزولیشن را همیشه در کارهای وبی روی 72 و یا نهایتا روی 90 بگذارید.
  • سعی کنید بیشتر از رنگها استفاده کنید زیرا رنگ حجمی ندارد.
  • از تکرار پترنها و تکسچرها به جای یک تصویر بزرگ استفاده کنید.
  • تمامی تصاویر دکمه ها و آیکنهای شبکه های اجتماعی را در یک عکس بگنجانید.
  • سعی کنید با وب سایتهای کاهش حجم همچون optimizilla.com حجم تصاویر را کم کنید.
  • فرمت‌هاي كم حجم رايج عكس براي استفاده در صفحات وب  JPEG، Gif و PNG هستند.
  • از فایل فلش استفاده نکنید.

فتوشاپ در طراحی سایت

گرافیک وب سایت تا چه حد در بازدید کاربران موثر است

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

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

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

گرافیک وب سایت

 

برای داشتن یک گرافیک سایت خوب چه کنیم؟

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

2 . برای گرافیک وب سایت تان هزینه کنید همیشه استفاده از قالبهای رایگان کاربردی نیست.

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

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

گرافیک وب سایت

نوشته‌های تازه