از زمانی که تکنیک Style Tile توسط Samantha Warren به دنیا معرفی شد طراحان وب سایت با دیگر اعضای گروه طراحی مانند گرافیست ها و طراحی کاتالوگ و ... توانستند ارتباط بهتری را برقرار نمایند.

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

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

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

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

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

در زیر نام چند وب سایت که میتوانید در آنها حالتهای طراحی شبکه شبکه یا همان Style Tiles را پیدا نمایید را آورده ایم.

The Style Prototype

http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype

 

Webstiles

http://namanyayg.com/

http://webstiles.namanyayg.com/

 

Compass Style Tiles

https://github.com/alienresident/style-tiles

 

Responsive Boilerplate for Style Tiles

https://github.com/Pardot/Responsive-Boilerplate-for-Style-Tiles

 

خودتان طرح را بسازید و در پروژه خود به کار ببرید

با اینکه ما وب سایت هایی که در آنها طرح های از پیش طراحی شده را میتوانستید در آنها پیدا نمایید را معرفی نمودیم ولی چرا بسیاری از طراحان دوست دارند تا خودشان کدهای html و css را در وب سایت و پروژه خود بنویسند؟

آیا زمان برای آنها مهم میباشد؟ هم بله و هم نه

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

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

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

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

تمامی این ها میتواند شامل موارد زیر باشد که عبارتند از:

·       رنگها و الگوها و موارد گرافیکی

·       موارد مربوط به زیبایی و خوانا نمودن صفحه وب سایت مانند: Heading, paragraph, list element, blockquote

·       طراحی و فرمت نمودن بخش تصاویر اگر وب سایت شما دارای گالری تصویر باشد

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

طراحی سایت

:: بازدید از این مطلب : 206

|

امتیاز مطلب : 8

|

تعداد امتیازدهندگان : 2

|

مجموع امتیاز : 2

در حالی که بسیاری از ارتباطات آنلاین به سمت شبکه های اجتماعی رفته اند و از آنها استفاده مینمایند, هنوز ایمیل در معرفی کالاها و درست کردن کمپین های تبلیغاتی جایگاه بسیار مهمی را دارد. زمانی که ما از بازاریابی ایمیلی صحبت میکنیم هنوز ذهن ما به ارسال ایمیل های HTML به جای ایمیل های معمولی در قالب متن های بسیار عادی منحرف داده میشود. طراحی یک قالب ایمیل دقیقا مانند طراحی یک صفحه وب سایت میباشد, اما در پیاده سازی آن باید به چند نکته کوچک و کلیدی توجه داشت. باید به یاد داشته باشید که ایمیل و ارسال آن از نوع تکنولوژی های PUSH به حساب می آید و نباید آن را با تکنولوژی PULL اشتباه گرفت. بسیاری از مردم امروزه انواع و اقسام ایمیل ها را دریافت مینمایند و خیلی از آنها از دیدن این ایمیل ها راحت به نظر نمیرسند. اما به محض دیده شدن ایمیل در inbox کاربر میتواند بر روی آن کلیک نموده و وارد وب سایت شود و جزئیات بیشتری را از ایمیل و یا محصول مورد نظر دریافت نماید. اما به خاطر داشته باشید که در مدت زمان کوتاهی میتوانید توجه کاربر را با ایمیل مربوطه کسب نمایید که در نهایت همه اینها میتواند با طراحی یک قالب ایمیل خوب اتفاق بیافتد. موبایل یا مجسمه نیم تنه امروزه بسیاری از مردم توسط گوشی های موبایل خود به ایمیل های خودشان دسترسی پیدا مینمایند و نزدیک به نیمی از ایمیل ها توسط نرم افزارهای موبایل باز میشوند. این به آن معنا میباشد که زمان خود را بیهوده صرف قالب های ایمیلی مینمایید که به صورت درست هم در داخل این نرم افزار ها نمایش داده نمیشود. روی هم رفته حتی اگر ایمیلی بر روی گوشی موبایل هم به درستی نشان داده نشود, چند در صد احتمال خواهد داشت که کاربران بعد از دیدن موبایل و ایمیل مربوطه آن را خواهد خواند. من با شما شرط میبندم که احتمال آن بسیار کم خواهد بود. بسیاری از آنها ایمیل مربوطه را پاک خواهند نمود و یا حتی لغو عضویت را انجام خواهند داد. دو راه وجود دارد تا بتوانیم طراحی خوبی برای ایمیل های موبایل داشته باشیم. طراحی ایمیلی که با صفحه نمایش موبایل کاربران هماهنگ بوده و به درستی در آن نشان داده شود. راه دوم طراحی ایمیل به صورت ریسپانسیو دقیقا مانند طراحی یک صفحه وب سایت. اما همه اینها دارای معایب و مزایای مربوط به خوددشان هستند. ایمیلی که به صورت اتوماتیک در هر نوع دستگاهی درست نمایش داده شود بسیار آسان میباشد. اما نوشتن کدها به صورت ریسپانسیو کمی مشکل به نظر می آید و توسط هر مرورگر موبایلی قابل پشتیبانی نمیباشد و یا به یک صورت نشان داده نمیشود. البته با گذر زمان این پشتیبانی کامل تر شده و تکامل پیدا مینماید. طراحی واکنش گرا یا Responsive طراحی واکنش گرای یک ایمیل توسط زبان HTML بسیار عملی تر میباشد. البته به یاد داشته باشید که در صفحه نمایش کوچکتر, خواندن ایمیل ها کمی مشکل تر به نظر می آید. قبلا بیان شد که چرا طراحی ایمیل هایی که در موبایل ها به خوبی نمایش داده شود بسیار اهمیت دارد, اما ذکر چند نکته در طراحی قالب این چنین ایمیل هایی بسیار با اهمیت میباشد. این ها نکاتی هستند که برای طراحی قالب ایمیل های موبایل میتواند کاربرد داشته باشند و حتی میتوان از آنها برای کامپیوترهای رومیزی یا همان Desktop هم استفاده نمود. 1 – قالب شما باید تا جایی که میتواند باریک و ظریف باشد. نهایتا با پهنای 500 تا 600 پیکسل. این استاندارد میتواند ایمل ها را هم در کامپیوترهای رومیزی و هم در موبایل قابل خواندن نماید. 2 – به خاطر بسپارید که فونتها تا جایی که امکان دارد بزرگ باشند. به خاطر داشته باشید که فونت پیشفرض در تمامی سیستم عامل ها یکسان نمیباشد و این میتواند کار شما را سخت نماید. به عنوان مثال فونت پیشفرض در سیستم عامل IOS 13 پیکسل میباشد. 3 – ناحیه هایی مورد نظر باید به اسانی برای کاربران قابل لمس شدن باشند. به این معنا که به مقدار مناسب بزرگ باشد و حتی نسبت به آیتم های اطرافشان کاملا جداسازی شده تا لمس نمودن آنها به سادگی امکان پذیر باشد. 4 – در استفاده از دستور CSS تحت نام display:none نگرانی نداشه باشید چرا که توسط آن میتوانید آیتم های اضافی و غیر لازم در داخل صفحه را مخفی نمایید. این کار از به هم ریختگی صفحه وب سایت حتی در نسخه Desktop هم جلوگیری مینماید چه برسد به صفحه نمایشهای کوچکتر. البته بهترین کار این میباشد که قبل از نوشتن کدها یک نسخه اسکچ دستی هم برای ورژن دسکتاپ و هم برای نسخه موبایل کشیده و طراحی شود. به کلمات و دکمه هایی که به کاربر عملیاتی را گوش زد میکند دقت بسیار زیادی داشته باشید. ملاحظات چاپی ( Typography ) زمانی که بسیاری از طراحان و موارد و تکنیک های گرافیکی و HTML طراحی قالب های ایمیل دقت مینمایند, بنابراین موارد مربوط به فن چاپ یا همان Typography میتواند در هر وب سایتی مورد توجه قرار گیرد. بر روی همه رفته فکر کنید که چند درصد تصاویر در داخل ایمیل ها برای کاربران لود خواهد شد. از سوی دیگر بسیاری از کاربرانی که ایمیل را دریافت مینمایند اصلا به Typography توجهی ندارند. از فونت های بزرگ صرفنظر از اندازه صفحه نمایش حتما استفاده نمایید. به فاصله بین خطوط یا همان line height توجهی بسیار زیادی نمایید بطوریکه نه خیلی زیاد و نه خیلی کم باشد. از Headingها و موارد دیگر که باعث میشود متون به راحتی برای کاربران قابل رویت و خوانده شدن باشد حتما استفاده نمایید مخصوصا زمانی که داخل ایمیل شما چندین پاراگراف وجود داشته باشد. رویه هم رفته موارد مربوط به Typography داخل ایمیل با طراحی صفحه ب سایت تفاوتی دارد. طراحی قالب های ایمیل مختلف برای اهداف گوناگون چندین نوع ایمیل میتواند وجود داشته باشد تا شما برای ثبت نام کنندگان در خبرنامه خود میتوانید آن را ارسال نمایید. هر کدام از این طرح ها میتواند اهداف مختلفی را دنبال نماید. بنابراین باید بهترین و موثرترین طراحی را برای آن انجام داد. در زیر چند شاخه از این دسته بندی را برای شما ذکر میکنیم که عبارتند از: 1. ایمیل های خبرنامه 2. ایمیل های اخطاری 3. ایمیل های صورت حساب و موارد مالی 4. ایمیل های معرفی کسب و کار و بروشور و کاتالوگ http://www.gowebsite.ir

:: برچسب‌ها: طراحی سایت - سایت - طراحی ,
:: بازدید از این مطلب : 194

|

امتیاز مطلب : 5

|

تعداد امتیازدهندگان : 1

|

مجموع امتیاز : 1