web design success word press meetup oct 2014
DESCRIPTION
Web design may seem glamorous and creative, which it is, but there is another side to successful web projects that tends to get overlooked. Whether you are developing yourself or hiring a consultant or agency for your business, whether you are building your first website or you 101st, this proven process will ensure you have a successful project every time. Presentation includes discussions of sitemaps, wireframes, comps, and tools to make planning your project a breeze.TRANSCRIPT
@salig#wpmia
Web Design Success!It’s not just about images
Steven Aligwww.soflaweb.com
@salig#wpmia
Communication
@salig#wpmia
BaseCamp
Project Management & Communication
@salig#wpmia
Development Process
@salig#wcmia
Websites, WordPress & Blogs
@salig#wcmia
Pages & Posts
@salig#wpmia
Information Architect
@salig#wpmia
@salig#wpmia
Reasons to Create a Website
1. To Make Money
2. To Disseminate Information or Opinions
3. To Stroke Your Ego
@salig#wpmia
Who is your Target Audience?
@salig#wpmia
Development Process
@salig#wpmia
Define
• Create Requirement
• Create Specifications to Address all Requirements
@salig#wpmia
Design
• Create Sitemap!
• Create Wireframes
• Create Comps
@salig#wpmia
�����������������������������������6RXWK�)ORULGD�:HE�6WXGLR�����+ROO\ZRRG�%OYG��6WH������+ROO\ZRRG��)O������������������ZZZ�VRIODZHE�FRP
ZZZ�ZHEVLWHQDPH�FRPVLWHPDS
ZHEVLWHQDPH�FRP�:HEVLWH�'HVLJQ��[[[[�[[[�([KLELW�%�±�6LWH�0DS9�����$XJXVW��������
+RPH /LQN
OLQN
&RQWDFWOLQN %ORJ
OLQN
OLQN
OLQN
OLQN
OLQN
OLQN
OLQN
6HDUFK�ER[
,QGLYLGXDO�3RVWV
,QGLYLGXDO�3RVWV
+RPH OLQN &RS\ULJKWOLQNOLQN 'LVFODLPHU
)RRWHU
OLQN
/LQN
OLQN
OLQN
OLQN
1HZV�%ORJ�)XWXUH�
,QGLYLGXDO�3RVWV
@salig#wpmia
Sitemap Tools• http://creately.com
• http://slickplan.com/
• https://gathercontent.com/
• https://www.lucidchart.com/
• Microsoft Visio
• Illustrator
• Google Docs
@salig#wpmia
Sitemap
�����������������������������������6RXWK�)ORULGD�:HE�6WXGLR�����+ROO\ZRRG�%OYG��6WH������+ROO\ZRRG��)O������������������ZZZ�VRIODZHE�FRP
ZZZ�GHGULFNPHGLDWLRQ�FRPVLWHPDS
GHGULFNPHGLDWLRQ�FRP�:HE�'HVLJQ�����������([KLELW�$�±�6LWH�0DS9�����)HE����������
+RPH 0HGLDWLRQ
)RRWHU�ZLOO�UHFUHDWH�3ULPDU\�QDYLJDWLRQ�LQ�WH[W)RRWHU�ZLOO�DOVR�FRQWDLQ�D�OLQN�WR�KWPO�VLWHPDS
&RQWDFW$WWRUQH\�3URILOH
)LUP�2YHUYLHZ &DOHQGDU 1HZV�%ORJ
�)XWXUH�
,QGLYLGXDO�3RVWV
@salig#wpmia
Design
• Create Sitemap
• Create Wireframes!
• Create Comps
@salig#wpmia
6RXWK�)ORULGD�:HE�6WXGLR�����+ROO\ZRRG�%OYG��6WH������+ROO\ZRRG��)O������������������ZZZ�VRIODZHE�FRP
ZHEVLWHQDPH�FRP��:HEVLWH�'HVLJQ��[[[[�[[[�([KLELW�%�±�+RPHSDJH�:LUHIUDPH
9�����$XJ��������������������������������������������������
ZZZ�ZHEVLWHQDPH�FRP�+RPHSDJH�:LUHIUDPH�GLDJUDP�QRW�WR�VFDOH�
6OLGHU�,PDJHV�ZLWK�WH[W�DQG�OLQN
/RJR
3ULPDU\�1DYLJDWLRQ
)RRWHUZLWK�QDYLJDWLRQ�OLQNV
&RS\ULJKW 6RFLDO�/LQNV
,QWUR�&RS\
$GGUHVV��0DS
&RQWDFW�)RUP
FRQWDFW�LQIR
5HFHQW�3RVWV:LGJHW
:LGJHW :LGJHW
@salig#wpmia
Wireframe Tools• http://balsamiq.com
• https://gomockingbird.com/
• http://creately.com
• MS Visio
• Google Docs
• http://www.wirify.com/
@salig#wpmia
Wireframe
6RXWK�)ORULGD�:HE�6WXGLR�����+ROO\ZRRG�%OYG��6WH������+ROO\ZRRG��)O������������������ZZZ�VRIODZHE�FRP
GHGULFNPHGLDWLRQ�FRP��:HEVLWH�'HVLJQ�����������([KLELW�%�±�+RPHSDJH�:LUHIUDPH
9�����)HE���������������������������������������������������
ZZZ�GHGULFNPHGLDWLRQ�FRP�+RPHSDJH�:LUHIUDPH�GLDJUDP�QRW�WR�VFDOH�
6LQJOH�,PDJH�ZLWK�WH[W��QR�VOLGHU�QHHGHG�
/RJR
3ULPDU\�1DYLJDWLRQ
)RRWHUZLWK�QDYLJDWLRQ�OLQNV
&RS\ULJKW &RQWDFW�,QIR
,QWUR�&RS\$GGUHVV��0DS
&RQWDFW�)RUP
*HQERRN�/LQN��FRQWDFW�LQIR
@salig#wpmia
Design
• Create Sitemap
• Create Wireframes
• Create Comps
@salig#wpmia
Comps
@salig#wpmia
Development Process
@salig#wpmia
SUCCESS
@salig#wpmia
Google Docs Templates
www.soflaweb.com
http://ow.ly/Cbrna