About This Site

Rains' Office Complete redesign from a three (3) page site to this seven (7) page layout and design.
Including the resume designed in InDesign and downloadable as a PDF.
Site layout and design, interface, graphic components, portfolio assembly and build, e-mail web form design.
All coding and redesign for site

Content: Written, designed, coded and illustrated by Rain Longson
Edited and QA: Marney Smithies

  Tools Used: Software: Google Docs, MS Word, Acrobat, InDesign, Photoshop, Illustrator, Coffeecup HTML Editor, Coffeecup Web Form
Coding: HTML5, CSS3, JavaScript, JQuery, PHP
Browsers: Safari, Firefox 10 and 11, Chrome 17 and 19, and IE 8 and 9, on Windows Vista, and 7, and on Linux (openSUSE 12.1)
Hardware: Digital camera, scanner, PC, Wacom pen tablet

Project Details


Tabrio Interface design for desktop and smart phone VoIP service
  Tools Used: Photoshop, Visio
Wendy Foundation   Web interface design and build, usability testing. Pet non-profit organization
  Tools Used: Visio, Photoshop, Dreamweaver, digital camera
Melayden Web interface design and build, database. Self-publishing company
  Tools Used: Visio, Photoshop, Illustrator, Dreamweaver
Zombie by Design Weblog interface design and logo. T-shirt Design Company
  Tools Used: Google Blogger, Photoshop, Illustrator, pen and paper
Ralph’s Auto Web interface design. Used auto parts reseller
  Tools Used: Visio, Photoshop, Illustrator, digital camera
Community Living BC   Interface design and usability. Internal dashboard for multi software/project access. CLBC helps adults with developmental disabilities
  Tools Used: Telerick Visual Designer, Photoshop and Coffeecup HTML Editor
Ethical Funds Interface design and build database build for a finance company
  Tools Used: MS Word, Photoshop, PowerPoint, SharePoint, Dreamweaver, Flash


VohCom Software Two logo’s, color selection, Corp ID package, marketing material, Trade show booth design,
Design Brief for the web site design requirements
  Tools Used: Pen and paper, MS Word, PowerPoint, Visio, Illustrator, Photoshop, digital recorder, scanner
Urban Shiatsu Works Logo, stationary, promotional and marketing tools and web site
  Tools Used: Visio, pen and paper, Illustrator, Photoshop an Coffeecup HTML Editor
Artifax Communications, Inc.   Logo, corporate ID package and web site
  Tools Used: Pen and paper, Visio, Illustrator, MS Word, Photoshop, Dreamweaver
Furkids Info Site Weblog interface design, logo and business card
  Tools Used: Google Blogger, pen and paper, digital camera, Photoshop, Illustrator, Coffeecup HTML Editor
SalesCentrix Web site design, internal web enable portal, marketing material
  Tools Used: Photoshop, Notepad
Wildfire Design Studios   Corporate ID, logo, marketing material, MS Word templates, packaging
  Tools Used: MS Word, CorelDraw, hand building folders, research for specialty materials
Ethical Funds   Financial corporate public web site (over 300 pages) internal privetly access site of 250 pages and French site
  Tools Used: Microsoft Sharepoint, Flash, MS Word, Excel, research, testing and QA


Honeywell Security Sales sheets, packaging design, technical illustrations, product photograph
  Tools Used: Quark Xpress, Illustrator, CorelDraw, Photoshop, Pantone, Digital SLR camera
CFOX Bumper sticker
  Tools Used: Illustrator, Quark Xpress
Artist Brochure Designing promotional brochure
  Tools Used: Scanner, digital camera, Photoshop, Illustrator, InDesign
Whistler Secondary Designing informational/promotional brochure
  Tools Used: Illustrator, Photoshop, indexign
On Now Digital Media Flash media advertisements of various lengths
  Tools Used: Photoshop, Illustrator, Flash


BC Wildlife Faderation Newsletter, illustrations of wildlife found in BC
  Tools Used: (Newsletter) InDesign, Photoshop (Illustrations) Acrylic on canvas
Sketches and Watercolour Styles Used: from detailed to loose, rough, washes, dry brush and Sumi-e
  Tools Used: Graphite pencil, Prismacolor pencils, watercolor (Derwent tube, pencil and solid)
Ouiseau Children’s book illustration and cover design
  Tools Used:
  Materials used
Photoshop, scanner, digital camera
Feather boa, cotton balls, leaf, hard wood floor plank


AMEC Interactive technical illustrations for online education and help files
  Tools Used: Flash
Nortel Translation (French to English) and updating of engineering plans and production floor manuals
  Tools Used: MS Word, Photoshop, CorelDraw, AutoCAD, scanner, printer
Honeywell Security Sales sheets, packaging design, technical illustrations, product photograph
  Tools Used: Quark Xpress, Illustrator, CorelDraw, Photoshop, Pantone, Digital SLR camera