SlideShare a Scribd company logo

Website design-calgary

•Download as PPT, PDF•
•
Red Cherry Calgary Web Design
Red Cherry Calgary Web Design

We are a digital marketing and software agency that stands out from all other agencies. Our team of talented and creative individuals work closely with you to deliver rich and engaging solutions that drive qualified traffic to your website and convert that traffic into sales. Red Cherry has offices in both Kelowna, BC and Calgary, AB. We work closely with you to develop a comprehensive digital marketing campaign for Facebook, Google, Twitter, Remarketing (largest ad network), Pay Per Click, SEO, and more. Providing website design in Calgary for over 10 years. We are also a full scale software development firm specializing in web development and apps development. With over 500+ websites launched and 150+ enterprise software builds Red Cherry Web Design and Development team is seasonsed and talented. Let's chat +1 888 401 6668

1 of 31
Announcement  Ben Ellis – office hours canceled tonight
Kurt Cobain 1967-1994
Webpage Layout and Website Design  Technical definitions:  A webpage is a single HTML document  A website is a collection of related webpages  Designing a good website requires more than just putting together a few pages
Examples  www.projectpuffin.org  www.pmlodge.com  www.uintafishing.com  www.uncommonadv.com
Web Page Layout  Layout of web pages is very important  Poor layout makes for -  Difficult navigation  Hard to locate information on page  Visually unappealing
Tables, tables, tables!  Use tables to lay out your pages!  Make the table borders invisible  A 2x2 table works well
Areas of a Web Page Menu Header Content Logo
A 2 x 2 Layout
Other Designs  www.adobe.com (menu on right)  www.uintafishing.com (many columns)
Table within a table
The outer table
The inner table
The inner table
Centered with three columns
Really complicated design!
Monitors and Dimensions  Monitor resolution affects how you should lay pages out  800x600 = 50% - 760 x 420 pixels in browser window  1024x768 = 35%  640x480 = 3%* - 595 x 360 pixels  *Was 20% three years ago
Dimensions in a 2x2 table Up to 760 wide* Logo And Menu Header Content 100-140 wide Up to 650 wide
Different Resolutions  http://www.dreamink.com/design6.shtml
Page Width  Because monitors differ (640x480, 800x600, 1024x768), pages look different.  You can use a % width for a table, for example make it 80% of the page width
Splash Page  The index.html file is called the “Splash Page”  It is the key page—the first page visitors usually see  Must be visually attractive, informative, and easy to navigate  Examples:  www.projectpuffin.org  www.pmlodge.com  www.uncommonadv.com  www.rainforestandreef.org
Organizing Information  Decide what info goes on each page  Friends page  Family page  Personal page  Hobbies page
Good Web Communication  Be Concise  Limit choices – use a hierarchical structure  A hierarchy is a structured organization where some pages are at a higher level than others  Hierarchy results in a site map with multiple levels
Site Map  A site map is designed to show the connections between pages  A graphical site map uses lines to connect linked pages
Site Map Interior or Internal Pages Willoughby's Website Splash Page index.html Pictures Gallery gallery.html Name Page name.html Progress Page progress.html Canada Trip canada.html Christmas Tree tree.html
Design Theme  Choose a common layout for your website. The Splash Page will probably differ but interior pages should be the same  Use tables to control placement throughout
Consistency in Design  Use the same font throughout!  Use consistent graphics in website – do not use ultra modern on one page and calligraphy on another  Use color scheme that is consistent
The Font Barrier  Only fonts you can reliably use are Times New Roman (Times) and Arial (Helvetica)  Text in site should be one of these choices  How to overcome this?  Any font used in graphics is loaded as a graphic, and does not rely upon the font being on the user’s computer  Make cool font images in Photoshop
Testing  Test your website as you go along.  If you’re in the computer lab and there’s an empty computer next to you, log into it and check out your web page from there  Make sure it works in Netscape Navigator and Internet Explorer  Make sure all pictures come up on a different machine
Assignment 8 – Website Design  From your existing web pages, build a website.  Add more pages to site – whatever you want  Some suggestions: Resume, friends page, hobbies page  Minimum 6 pages (splash page + 5)  Use common design theme  Make custom graphics in PhotoShop  Prepare graphical site map in PowerPoint to turn in when finished
Where to get help on design Web Pages for more info  http://info.med.yale.edu/caim/manual/contents.html  Good places for Graphics  www.clipart.com  http://free-clip-art.com/  Fonts  http://www.1001freefonts.com/fontfiles/main.htm
Assignment 7 – Advanced Webstuff  Add Hyperlinks  Add Graphics (MSU, Scans, etc)  Web Design Calgary by Red Cherry  Calgary Web Design by Red Cherry

More Related Content

Website design-calgary

  • 1. Announcement  Ben Ellis – office hours canceled tonight
  • 3. Webpage Layout and Website Design  Technical definitions:  A webpage is a single HTML document  A website is a collection of related webpages  Designing a good website requires more than just putting together a few pages
  • 4. Examples  www.projectpuffin.org  www.pmlodge.com  www.uintafishing.com  www.uncommonadv.com
  • 5. Web Page Layout  Layout of web pages is very important  Poor layout makes for -  Difficult navigation  Hard to locate information on page  Visually unappealing
  • 6. Tables, tables, tables!  Use tables to lay out your pages!  Make the table borders invisible  A 2x2 table works well
  • 7. Areas of a Web Page Menu Header Content Logo
  • 8. A 2 x 2 Layout
  • 9. Other Designs  www.adobe.com (menu on right)  www.uintafishing.com (many columns)
  • 10. Table within a table
  • 16. Monitors and Dimensions  Monitor resolution affects how you should lay pages out  800x600 = 50% - 760 x 420 pixels in browser window  1024x768 = 35%  640x480 = 3%* - 595 x 360 pixels  *Was 20% three years ago
  • 17. Dimensions in a 2x2 table Up to 760 wide* Logo And Menu Header Content 100-140 wide Up to 650 wide
  • 18. Different Resolutions  http://www.dreamink.com/design6.shtml
  • 19. Page Width  Because monitors differ (640x480, 800x600, 1024x768), pages look different.  You can use a % width for a table, for example make it 80% of the page width
  • 20. Splash Page  The index.html file is called the “Splash Page”  It is the key page—the first page visitors usually see  Must be visually attractive, informative, and easy to navigate  Examples:  www.projectpuffin.org  www.pmlodge.com  www.uncommonadv.com  www.rainforestandreef.org
  • 21. Organizing Information  Decide what info goes on each page  Friends page  Family page  Personal page  Hobbies page
  • 22. Good Web Communication  Be Concise  Limit choices – use a hierarchical structure  A hierarchy is a structured organization where some pages are at a higher level than others  Hierarchy results in a site map with multiple levels
  • 23. Site Map  A site map is designed to show the connections between pages  A graphical site map uses lines to connect linked pages
  • 24. Site Map Interior or Internal Pages Willoughby's Website Splash Page index.html Pictures Gallery gallery.html Name Page name.html Progress Page progress.html Canada Trip canada.html Christmas Tree tree.html
  • 25. Design Theme  Choose a common layout for your website. The Splash Page will probably differ but interior pages should be the same  Use tables to control placement throughout
  • 26. Consistency in Design  Use the same font throughout!  Use consistent graphics in website – do not use ultra modern on one page and calligraphy on another  Use color scheme that is consistent
  • 27. The Font Barrier  Only fonts you can reliably use are Times New Roman (Times) and Arial (Helvetica)  Text in site should be one of these choices  How to overcome this?  Any font used in graphics is loaded as a graphic, and does not rely upon the font being on the user’s computer  Make cool font images in Photoshop
  • 28. Testing  Test your website as you go along.  If you’re in the computer lab and there’s an empty computer next to you, log into it and check out your web page from there  Make sure it works in Netscape Navigator and Internet Explorer  Make sure all pictures come up on a different machine
  • 29. Assignment 8 – Website Design  From your existing web pages, build a website.  Add more pages to site – whatever you want  Some suggestions: Resume, friends page, hobbies page  Minimum 6 pages (splash page + 5)  Use common design theme  Make custom graphics in PhotoShop  Prepare graphical site map in PowerPoint to turn in when finished
  • 30. Where to get help on design Web Pages for more info  http://info.med.yale.edu/caim/manual/contents.html  Good places for Graphics  www.clipart.com  http://free-clip-art.com/  Fonts  http://www.1001freefonts.com/fontfiles/main.htm
  • 31. Assignment 7 – Advanced Webstuff  Add Hyperlinks  Add Graphics (MSU, Scans, etc)  Web Design Calgary by Red Cherry  Calgary Web Design by Red Cherry