مراحل طراحی سایت در شیراز

شما فقط می توانید تسکین من تصور کنید زمانی که من اتفاق افتاده است در سراسر یک فیلم با استفان یونجه جایی که او در فراتر از کنفرانس رومیزی در سال 2012 صحبت شد و در آنجا، در بحث RWD او آمده، او مفهوم ورفرم محتوا ارائه شده است. این یک تسکین بزرگ برای من بود.

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

اگر شما می خواهم برای کسب اطلاعات بیشتر، احساس رایگان برای چک کردن راهنمای رایگان برای سلامت Wireframing. من توضیح تکنیک های قدرتمند برای ایجاد استاتیک، wireframe و تعاملی، و حتی متحرک.
قالب محتوای

مفهوم ورفرم محتوای نسبتا ساده است به درک: سقوط در عشق با کاربر، نه فن آوری است.
ارائه BDConf استفان هی

wireframe و محتوای جلوگیری از دسته بندی های مطالب عمومی و شما را مجبور، به گفته استفن به زیبایی آن را قرار داده، برای طراحی از محتوای بیرون.

واقعا پیچیده نیست. در واقع، آن را شامل دو مرحله است:

ایجاد یک موجودی محتوا.
ایجاد یک سلسله مراتب بصری از بازماندگان این لیست.

انجام این کار و شما یک پتانسیل برای تحویل مشتری خود را. چه این امر منجر به انجام است به جلو و توجه مشتری به دور از آنچه «چیزی» می رود که در آن و با تمرکز توجه خود را بر روی آنچه مهم است: جریان اطلاعات.
این علم موشک نیست

مسئله اصلی در حدود wireframe و، برای دانش آموزان من و طراحان دیگر، wireframe و تمایل به اهمیت بی جا است.

این تقریبا مثل پایان روز شده در تلویزیون نشان می دهد که در آن همه “از oohs” و “ahhs” را به عنوان مشتری می شود را از طریق پروژه راه رفتن است.

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

نجار است تخمگذار از “قصد” خود را در اطراف رویکرد خود را به این پروژه و مشتری است که با تمرکز بر بخش مهمی از پروژه به جای تمرکز بر روی کاشی، تجهیزات، رنگ و روشنایی.

او در کتاب خود، پاسخگو طراحی گردش کار، یونجه این چیزها خواستار wireframe و محتوای مرجع زیرا آنها “توصیف چگونگی wireframe و با محتوای برخورد: آنها به سادگی به آن مراجعه کنید به تصویر می کشد با آن مخالف”

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

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

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

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

سربرگ / NAV
پنج فیلم (برای اهداف این مقاله آنها را با برچسب اصلی و فیلم ها 1-4)
پیاده رو

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

ویدئو اصلی
فیلم ها 1-4
بالا و پایین صفحه
سربرگ / NAV

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

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

هر چند استفان یونجه یکی از طرفداران بزرگ از ایجاد این wireframe و مرجع محتوا با استفاده از یک کد و یا ویرایشگر متن مانند کودا یا براکت Abobe، برای کسانی از ما که هستند، باید ما می گویند “کد به چالش کشیده”، یک ویرایشگر بصری مانند UXPin خوب است انتخاب.

در اینجا به دلایل شخصی من چرا عبارتند از:

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

اجازه دهید در چگونه هر یک از این ویژگی ها ایجاد یک مرجع ورفرم محتوا کمک می کند تا نگاه کنید.
wireframe و محتوای تلفن همراه-اول

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

01. وقتی که شما اول این پروژه شما را به یک سطح به طور پیش فرض گرفته شده ایجاد کنید.
رابط UXPin

02. UXPin دارای اضافه نسخه پاسخگو آیتم های منو. آن و پاپ پایین شامل تعدادی از ایستگاه از پیش تنظیم ظاهر خواهد شد کلیک کنید. من با این گزینه پیکسل آیفون 320 آغاز شده است.

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

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

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

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

06. به جای “اختراع دوباره چرخ”، با کلید Shift را پایین نگه داشته، من انتخاب هر دو جعبه و متن و سپس، با استفاده از روش کشیدن گزینه Shift- Click- (کاربران کامپیوتر می توانید کلید Alt را برای گزینه مک جایگزین کلید)، یک کپی از هدر را به محل کشیده شده است. من متن را به “ویدیو اصلی” تغییر داد و به تنش این عنصر در سر سلسله مراتب بود، به 320 پیکسل تغییر ارتفاع جعبه را. من این مرحله را برای چهار جعبه بعدی تکرار اما ارتفاع خود را به 255 پیکسل تغییر کرده است.
تنظیم اندازه برای محتوای ثانویه

07. پایین صفحه نیز مهم است. برای اینکه آن را قابل توجه و به جای پیوستن یکی از ویژگی های مشترک شدن در، من ارتفاع جعبه از 345 پیکسل تغییر کرده است.
بالا و پایین صفحه بزرگتر است زیرا این مهم است

08. اضافه کردن نسخه اپل نسیم بود.

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

حالا که من طرح خشن ایجاد کرده اید، من برخی از شبکه های به حفظ تراز اضافه کنید. من از طرفداران بزرگ از با استفاده از “علامت گذاری به عنوان یکی از کره چشم” به جای مسائل بر روی بوم.

هر چند UXPin به من می دهد تعدادی از گزینه های – هیچ، نقطه و شبکه – برای پس زمینه، من ترجیح میدهم یک شبکه با ستون برای کمک به با قرار دادن محتوا.

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

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

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

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

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

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

زمانی که صفحه در مرورگر و یا حالت پیش نمایش مشاهده، تیم و حتی مشتری همچنین می توانید نظرات و یا اضافه کردن یادداشت.

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

همانطور که در این قطعه دیده می شود، هیچ بزرگ آشکار یا دیگر هیجان در اطراف ایجاد wireframe و مرجع محتوا وجود دارد. آنها در یک مکان در گردش کار بین پرسشنامه محتوا و wireframes ها LoFi هستند. دلیل این است که هدف آنها این است که به سادگی به ایجاد یک سلسله مراتب اطلاعات و، اگر مشتری درگیر است، به او و یا او را به فکر می کنم بیشتر در مورد “مفهوم” از محتوا و جریان اطلاعات از محتوای واقعی خود.

این ها چیزهایی هستند که بخشی از یک فرایند تکراری است که می تواند و باید تغییر کند. همانطور که من راست اشاره کرد در بالای این فرآیند بیشتر از یک “چگونه در مورد …” گفتگو از یک مکالمه “در اینجا چگونه … است.” هنگامی که همه در شرایط است که نسل بعدی این پروژه شامل ریختن محتوای واقعی lofi می به جعبه که محتوای مرجع wireframe و را تشکیل می دهند.

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

کلمات: تام سبز

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

مثل این؟ دفعات بازدید: این!

بهترین ابزار wireframing
درست wireframe و که برای شما کار
چگونه برای ساخت یک برنامه: سعی کنید این آموزش بزرگ

برچسب ها:

طراحی وب سایت wireframe و نکات چگونه به

MAGS بزرگ ما
ذخیره 54٪ با یک بسته نرم افزاری!
خرید در چاپ و یا دیجیتال
ذخیره 54٪ با یک بسته نرم افزاری!
خرید در چاپ و یا دیجیتال
ذخیره 54٪ با یک بسته نرم افزاری!
خرید در چاپ و یا دیجیتال
ذخیره 54٪ با یک بسته نرم افزاری!
خرید در چاپ و یا دیجیتال
ذخیره 54٪ با یک بسته نرم افزاری!
خرید در چاپ و یا دیجیتال
ذخیره 54٪ با یک بسته نرم افزاری!
خرید در چاپ و یا دیجیتال
دریافت راهنمایی در هفته و الهام بخش

توسط Taboola
بیشتر از CREATIVE BLOQ
10 گرایش های کلیدی طراحی وب سایت برای 2015-2016
چگونه به کارشناسی کارشناسی ارشد ایمیل پاسخگو
موضوعات داغ رنگ در طراحی وب سایت برای 2015
5 وب سایت روند طرح از سال 2015 تا کنون
مشترک شدن در خوراک RSS ما

مشاهده همه خوردها ما
آیکون RSS

Leave a reply

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>