@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
Recommended
