طراحي سايت در هفت مرحله ساده
طراحان وب اغلب در مورد روند طراحي وب با تمركز بر مسائل فني مانند wireframe، كد و مديريت محتوا فكر مي كنند. اما طراحي فوق العاده در مورد چگونگي ادغام دكمه هاي رسانه هاي اجتماعي يا حتي تصاوير گرافيكي نرم افزاري نيست. طراحي بزرگ در واقع در مورد ايجاد يك وب سايت است كه با يك استراتژي جامع هماهنگ است.
طراحي سايت در تبريز
وب سايتهاي طراحي شده بسيار بيشتر از زيبايي شناسي است. آنها بازديد كنندگان را جذب مي كنند و به افراد كمك مي كنند تا محصول، شركت و نام تجاري را از طريق شاخص هاي مختلف، شامل تصاوير، متن و تعاملات، درك كنند. اين بدان معني است كه هر عنصر از سايت شما نياز به تلاش براي يك هدف مشخص دارد.
اما چگونه مي توان اين تركيبات هماهنگ عناصر را به دست آورد؟ از طريق فرآيند طراحي جامع وب كه هر دو فرم و عملكرد را به حساب مي گيرد.
براي من، اين روند طراحي وب به 7 مرحله نياز دارد:
سئو سايت در تبريز
شناسايي هدف : از كجا با مشتري كار مي كنم تا تعيين كند كه اهداف مورد نياز سايت بايد انجام شود. يعني منظورش چيهتعريف دامنه : هنگامي كه اهداف سايت را مي شناسيم، مي توانيم دامنه پروژه را تعريف كنيم. به عنوان مثال، چه صفحاتي و ويژگي هاي سايت نياز به انجام اين هدف و زمان بندي براي ساخت آن است.ايجاد نقشه سايت و ساختار جعبه: با محدوده تعريف شده، ما مي توانيم شروع به حفاري در نقشه سايت، تعريف كنيم چگونه محتواي و ويژگي هاي ما در تعريف دامنه تعريف شده تعريف مي شود.ايجاد محتوا : اكنون كه ما تصويري بزرگتر از سايت داشته باشيم، مي توانيم محتوا را براي صفحات شخصي ايجاد كنيم، هميشه بهينه سازي موتورهاي جستجو را در نظر داشته باشيد تا صفحات متمركز بر يك موضوع واحد را حفظ كنيد. حياتي است كه محتواي واقعي خود را براي مرحله بعدي به كار ببريد:عناصر بصري : با معماري سايت و برخي از محتويات در محل، ما مي توانيم شروع به كار بر روي نام تجاري بصري. بسته به مشتري، اين ممكن است قبلا به خوبي تعريف شده باشد، اما شما همچنين ممكن است سبك بصري را از سطح زمين تعريف كنيد. ابزارهايي مانند كاشي هاي سبك، moodboards و كلاژ هاي عنصر مي توانند در اين روند كمك كنند.تست : در حال حاضر، شما تمام شش مرحله طراحي وب سايت
صفحات خود را تعريف كرده ايد و چگونگي نمايش آنها را به بازديد كننده سايت نشان مي دهيد، پس زمان لازم است تا همه كارها را انجام دهد. مرور دستي اين سايت را در دستگاههاي مختلف با خزنده هاي سايت اتوماتيك تركيب كنيد تا همه چيز را از مسائل مربوط به تجربه كاربر به لينك هاي ساده خراب كنيد.راه اندازي! هنگامي كه همه چيز به زيبايي كار مي كند، زمان آن است كه برنامه ريزي و اجراي سايت خود را راه اندازي كنيد! اين بايد شامل برنامه ريزي هر زمان زمان راه اندازي و استراتژي هاي ارتباطي باشد - يعني زماني كه شما راه اندازي مي كنيد و چگونه مي توانيد جهان را بشناسيد؟ بعد از آن، وقت آن رسيده است كه حباب را بشكنيم.حالا كه ما فرآيند را مشخص كرديم، اجازه دهيم كمي در هر مرحله قدم بگذاريم.
1. شناسايي هدف
مرحله اوليه همه چيز در مورد درك چگونگي كمك به مشتري شما است.در اين مرحله اوليه، طراح نياز به شناسايي هدف پايان وب سايت، معمولا در همكاري نزديك با مشتري يا ساير سهامداران. سوالاتي كه براي بررسي و پاسخ در اين مرحله از اين فرآيند عبارتند از:
براي چه كسي سايت است؟آنها انتظار دارند كه در آنجا پيدا يا كار كنند؟آيا هدف اصلي اين وب سايت براي اطلاع رساني، فروش يا سرگرمي است؟آيا وب سايت نياز به وضوح پيام هسته اي يك برند را انتقال مي دهد يا بخشي از استراتژي گسترده تر ماركدار با تمركز منحصر به فرد خود است؟چه سايت هاي رقيب، اگر وجود داشته باشند، چگونه وجود دارد و چگونه اين سايت الهام گرفته از / متفاوت از آن رقبا است؟اين مهم ترين بخش هر فرايند طراحي وب است. اگر اين سؤاالت به وضوح در خلاصه پاسخ ندهند، كل پروژه مي تواند در جهت اشتباه تنظيم شود.
ممكن است مفيد باشد كه يك يا چند اهداف به وضوح مشخص شده يا يك خلاصه يك پاراگراف از اهداف مورد انتظار را بنويسيد. اين كمك خواهد كرد كه طراحي را در مسير درست قرار دهيم. اطمينان حاصل كنيد كه مخاطبان هدف وب سايت را درك مي كنيد و دانش كاري در مورد رقابت را توسعه مي دهيد.
طراحي سايت
براي اطلاعات بيشتر در اين مرحله، " فرآيند طراحي وب مدرن: تنظيم اهداف " را بررسي كنيد.
ابزار براي مرحله شناسايي هدف وب سايتافراد مخاطبخلاق خلاصهمسابقه تحليل مي كندويژگي هاي نام تجاري2. تعريف دامنهيكي از شايع ترين و دشوارترين مشكلات در پروژه هاي طراحي وب، دامنه خزيدن است. مشتري با يك هدف در ذهن است، اما اين به تدريج گسترش مي يابد، تكامل مي يابد و يا در طول فرآيند طراحي تغيير مي كند - و چيزي كه بعدا مي دانيد، شما نه تنها طراحي و ساخت يك وب سايت، بلكه يك برنامه وب، ايميل و فشار دادن اطلاعيه ها.
اين الزاما براي طراحان مشكل نيست، زيرا اغلب مي تواند به كار بيشتر منجر شود. اما اگر افزايش انتظارات با افزايش بودجه يا جدول زماني همخواني نداشته باشد، پروژه به سرعت مي تواند كاملا غير واقعي شود.
آناتومي يك نمودار گانت.يك نمودار گانت، كه يك جدول زماني واقع بينانه براي اين پروژه را مشخص مي كند، از جمله مهمترين نشانه ها، مي تواند به تعيين مرزها و مهلت هاي قابل دستيابي كمك كند. اين مرجع ارزشمند براي طراحان و مشتريان فراهم مي كند و به همه افراد متمركز مي شود تا به اهداف و اهداف دست يابند.
ابزار تعريف محدودهيك قراردادنمودار گانت (يا ساير تجسم جدول زماني)3. نقشه سايت و ايجاد قاب
يك نقشه سايت براي يك وب سايت ساده توجه كنيد كه چگونه سلسله مراتب صفحه را مي گيرد.نقشه سايت پايه و اساس هر وب سايت طراحي شده را فراهم مي كند. اين كمك مي كند تا طراحان ايده اي روشن از معماري اطلاعات وب سايت و ارتباط بين صفحات مختلف و عناصر محتوا را توضيح دهد.
ساخت يك سايت بدون نقشه سايت مانند ساخت يك خانه بدون يك طرح است. و اين به ندرت خوب است.
گام بعدي ساخت قاب چوبي است. Wireframes چارچوبي براي ذخيره سازي طراحي بصري سايت و عناصر محتوا فراهم مي كند و مي تواند به شناسايي چالش ها و شكاف بالقوه با نقشه سايت كمك كند.
Timothy Noah بسيار شگفت انگيز ساخته شده است كيت wireframing Webflow شما مي توانيد به صورت رايگان كلون .اگر چه يك frameframe حاوي هيچ عنصر طراحي نهايي نيست، اما به عنوان يك راهنماي براي اينكه چگونه سايت در نهايت نگاه خواهد كرد، عمل مي كند. بعضي از طراحان از ابزارهاي نرم و لطيف مانند Balsamiq يا Webflow براي ساخت قاب هاي خود استفاده مي كنند. من شخصا دوست دارم به اصول اوليه بازگردم و از كاغذ و مداد قابل اعتماد استفاده كنم.
ابزار براي نقشه برداري سايت و wireframingقلم / مداد و كاغذBalsamiqmoqupsطرحAxureWebflowSlickplanWritemapsMindnodeكتاب رايگان: روند طراحي وب مدرنفرآيندهاي و ابزارهاي وب سايت هاي با كارآيي بالا را كشف كنيد.
شروع به خواندن كنيد
4. ايجاد محتوا
هنگامي كه به محتوا مي آيد، SEO تنها نيمي از نبرد است.هنگامي كه چارچوب وب سايت شما در جاي خود قرار دارد، مي توانيد از مهمترين جنبه هاي سايت شروع كنيد: محتواي نوشته شده .
محتوا دو هدف اساسي دارد:
هدف 1. محتوا درايو تعامل و عمل استاولا محتوا، خوانندگان را درگير مي كند و آنها را به انجام اقدامات لازم براي تحقق اهداف سايت هدايت مي كند. اين موضوع توسط خود محتوا (نوشتن) و نحوه ارائه (تايپوگرافي و عناصر ساختاري) تأثير مي پذيرد.
خنده دار، بي نظير و بي نظير، غالبا توجه بازديد كنندگان را براي مدت طولاني نگه مي دارد. مطالب كوتاه، مضر و جذاب آنها را برداشت و آنها را از طريق صفحات ديگر بر روي صفحه كليك كرد. حتي اگر صفحات شما به محتواي زيادي نياز دارند - و اغلب، آنها - به طور صحيح "تكه تكه كردن" كه محتوا را با شكستن آن در پاراگراف هاي كوتاه اضافه شده توسط تصاوير مي تواند به آن كمك كند كه نور را حفظ كند، جذاب احساس كند.
هدف 2: جستجوگرهامحتواي همچنين ديدگاه سايت را براي موتورهاي جستجو افزايش مي دهد. عمل ايجاد و بهبود محتواي به خوبي در جستجو به عنوان بهينه سازي موتور جستجو يا SEO شناخته مي شود .
گرفتن كلمات كليدي و عبارات كليدي درست براي موفقيت هر وب سايت ضروري است. من هميشه از برنامه گوگل كليد واژه استفاده مي كنم. اين ابزار حجم جستجو را براي كلمات كليدي و عبارات بالقوه نشان مي دهد، بنابراين شما مي توانيد در آنچه كه افراد واقعي در وب جستجو مي كنند، دقت كنيد. در حالي كه موتورهاي جستجو در حال تبديل شدن به بيشتر و هوشمندانه هستند، بنابراين بايد استراتژي محتوا خود را. Google Trends نيز براي شناسايي شرايط افرادي كه در حقيقت از آنها استفاده مي كنند مفيد است.
فرآيند طراحي من تمركز خود را بر طراحي وب سايت ها در زمينه جستجوگرها متمركز مي كند. كلمات كليدي كه مي خواهيد براي رتبه بندي براي نياز به قرار دادن در برچسب عنوان - نزديك تر به آغاز، بهتر است. كليد واژه ها نيز بايد در تگ H1، متا توضيحات و محتواي بدن ظاهر شوند.
محتوا كه به خوبي نوشته شده، آموزنده و غني از كلمات كليدي است به راحتي توسط موتورهاي جستجو برداشته مي شود، كه همه اين كار باعث مي شود كه سايت آسان تر شود.
به طور معمول، مشتري شما بخش عمده اي از محتوا را توليد مي كند، اما بسيار مهم است كه شما آنها را راهنمايي كنيد كه چه كلمات كليدي و عباراتي كه بايد در متن باشند.
بيش از حد براي يك پست وبلاگ، ليزا، اما كار درخشان!ابزار ايجاد بسيار معروفپرونده هاي گوگلمقاله Dropboxكوپ كردنجمع آوري مطالبابزار دستي جستجوگرGoogle Keyword Plannerروند Googleجستجوگر عنكبوتي جادوي قورباغه5. عناصر بصري
سبك كاشي: يك قالب سفارشي كاشي / moodboard ساخته شده توسط مات Vogels.در نهايت، زمان ايجاد سبك بصري براي سايت است. اين بخشي از فرآيند طراحي اغلب با عناصر برند موجود، انتخاب رنگ و لوگو، همانطور كه توسط مشتري تعيين مي شود، شكل مي گيرد. اما اين نيز مرحله فرايند طراحي وب است كه طراح وب خوب مي تواند واقعا درخشش داشته باشد.
تصاوير در حال حاضر نقش مهمي در طراحي وب دارند. نه تنها تصاوير با كيفيت بالا وب سايت را يك نگاه حرفه اي و احساس مي كنند، بلكه پيامي را نيز به آنها پيوند مي دهد، براي موبايل مفيد هستند و به ايجاد اعتماد كمك مي كنند.
محتوا بصري براي افزايش كليك، تعامل و درآمد شناخته شده است . اما بيشتر از آن، مردم مي خواهند تصاوير را در يك وب سايت ببينند. تصاوير نه تنها باعث مي شود كه صفحهاي احساس راحتي و هدر رفتن را احساس كنند، بلكه پيام را در متن نيز افزايش مي دهند و حتي مي توانند پيام هاي حياتي را بدون نياز به خواندن حتي پيام هاي حياتي ارسال كنند.
من توصيه مي كنم با استفاده از يك عكاس حرفه اي براي گرفتن تصاوير درست. فقط به خاطر داشته باشيد كه تصاوير عظيم و زيبا مي تواند يك سايت را به طور جدي كند كند. من از Optimizilla براي فشرده سازي تصاوير بدون از دست دادن كيفيت استفاده مي كنم، صرفه جويي در زمان بارگذاري صفحه. همچنين مي خواهيد مطمئن شويد كه تصاوير شما به عنوان سايت شما پاسخگو هستند .
طراحي بصري راهي براي برقراري ارتباط و تجديد نظر به كاربران سايت است. آن را درست كنيد و مي توانيد موفقيت سايت را تعيين كنيد. اشتباه نكنيد و فقط يك آدرس وب ديگر هستيد.
ابزار براي عناصر بصريمظنونين معمول (Sketch، Illustrator، Photoshop و غيره)Moodboards، كاشي هاي سبك، كلاژ عناصرراهنماهاي سبك بصري6. تست
نگران نباش اين هميشه مثل اين نيست.هنگامي كه سايت داراي تمام تصاوير و محتواي آن است، شما آماده هستيم تا آزمايش شود.
به طور كامل هر صفحه را تست كنيد تا اطمينان حاصل كنيد كه تمام پيوندها كار مي كنند و وب سايت به طور مناسب بر روي تمام دستگاه ها و مرورگرها بارگذاري مي شود. اشتباهات ممكن است در نتيجه اشتباهات كوچك برنامه نويسي باشد، و در حالي كه اغلب درد آنها براي پيدا كردن و رفع آنها است، بهتر است كه اين كار را در حال حاضر انجام دهيم تا يك سايت شكسته به عموم را ارائه كند.
يادداشت سردبير: من به شدت توصيه Spider Escape Spider را براي اين مرحله امتحان كردم. اين به شما اجازه مي دهد تا بسياري از وظايف حسابرسي استاندارد را در يك ابزار انجام دهيد و براي حداكثر 500 URL رايگان است.
آخرين نگاهي به متا صفحات و توضيحات نيز داشته باشيد. حتي منظور از كلمات در عنوان متا مي تواند بر عملكرد صفحه در يك موتور جستجو تاثير مي گذارد.
Webflow يك مقاله عالي در فرآيند قبل از راه اندازي است .
ابزار تست وب سايتW3C لينك Checkerجستجوگر عنكبوتي7. راه اندازياكنون وقت آن است كه بخشي از بخش هاي مورد علاقه ي هر يك از فرآيندهاي وب طراحي شده است: هنگامي كه همه چيز كاملا مورد آزمايش قرار گرفته است، و شما با سايت خوشحال هستيد، زمان براي راه اندازي است.
بيش از حد هيجان زده نشويد، اما ... ما تقريبا آنجا هستيم!انتظار نداشته باشيد كه اين كار كاملا انجام شود. هنوز ممكن است برخي از عناصر كه نياز به اصلاح وجود دارد وجود دارد. طراحي وب يك فرآيند مايع و مداوم است كه نياز به تعمير و نگهداري دائمي دارد.
طراحي وب - و واقعا، طراحي به طور كلي - همه چيز در مورد پيدا كردن تعادل مناسب بين شكل و عملكرد است. شما بايد از فونت هاي مناسب، رنگ ها و طرح هاي طراحي استفاده كنيد. اما نحوه حركت و تجربه سايت شما به همان اندازه مهم است.
طراحان ماهر بايد در اين مفهوم به خوبي آشنا شوند و قادر به ايجاد يك سايت باشند كه بين دو موضوع ظريف ظاهر شود.
يك چيز كليدي كه در مورد مرحله راه اندازي به خاطر ميآيد اين است كه نزديك به پايان كار نيست. زيبايي وب اين است كه هرگز به پايان نرسيده است. هنگامي كه سايت به طور زنده اجرا مي شود، شما مي توانيد به طور مداوم تست كاربر را در محتوا و ويژگي هاي جديد، نظارت بر تجزيه و تحليل، و پيام خود را بهبود بخشد.
فرايند شما چه شبيه است؟آيا شما يك فرآيند طراحي مشابه را دنبال مي كنيد يا به نظر شما كاملا متفاوت است؟ ما دوست داريم همه چيز در مورد آن را بشنويم، بنابراين زير را بيان كنيد.
متي مزيكار من ريشه در سادگي و وضوح دارد با تاكيد بر اينكه شركت، محصول يا خدمات شما از رقباي شما متمايز مي شود.
شما همچنين مي توانيد ...بيشتر
فرايند طراحيچگونه مي توان يك وب سايت را به مشتريان خود منتقل كردآنچه شما نياز داريد به آساني وب سايت ها را به مشتريان خود هدايت كنيد.
فرايند طراحييك رويكرد تيمي به پروژه هاي طراحي بزرگ در مقياس بزرگياد بگيريد چگونه طراحان در Niika رويكرد طرح هاي بزرگ در مقياس طراحي.
به گفتگو بپيونديدجريان وب چيست؟سعي كنيد آن را به صورت رايگانطراحطراحقدرت CSS، HTML و جاوا اسكريپت را در يك بوم بصري.
فعل و انفعالاتفعل و انفعالاتساختن تعاملات و انيميشن هاي وب به صورت بصري.
سيستم مديريت محتواسيستم مديريت محتواساختار محتواي خود را تعريف كنيد و با داده هاي واقعي طراحي كنيد.
تجارت الكترونيكتجارت الكترونيكقالب هاي خداحافظ و كد - طراحي فروشگاه خود را بصري.
ويرايشگرويرايشگرويرايش و به روز رساني محتواي سايت در صفحه.
ميزبانيميزبانيميزباني رعد و برق سريع را تنها با چند كليك تنظيم كنيد.
رايگان تا زماني كه شما آماده براي راه اندازيساخت سايت خود را به صورت رايگان و تا زماني كه شما نياز داريد. (درست است كه هيچ محاكمه اي وجود ندارد.) فقط زماني كه آماده جهان هستيد، يك طرح سايت و دامنه سفارشي اضافه كنيد.
Enter your emailتبديل فرآيند طراحي درآرم Adobeآرم IDEOآرم ناسالوگو Intuitآرم Autodeskآرم CBSآرم Dellآرم MTVWebflow Logo - تاريكدر وبلاگمحبوبجديدليست هاي پخشمباحثبراي ما بنويسيدبايگانيدرباره Webflowتعاملطراحانمشتريانميزبانويرايشگرتجارت الكترونيكCMSفرا گرفتندانشگاه Webflowدوره هايكتاب هاي الكترونيكيانجمنليست علاقه مندي ويژگياجتماعي© 2019 Webflow، Inc. كليه حقوق محفوظ است.
برچسب: طراحي سايت، طراحي وب سايت،توسعه سايت، برنامه ريزي براي طراحي سايت،