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

تبدیل طرح گرافیکی به کد HTML۵

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

طراحی قالب سایت به صورت فایل PSD

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

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

کد نویسی طرح با HTML۵

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

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

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

گرافیکی کردن سایت خود با css

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

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

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

تبدیل طرح گرافیکی به کد HTML۵