Design Days is an online program where I will be sharing web design tips, techniques and resources related to design that does not only look good but also how it works and functions. Essential Web Design is the first blog of its series. It is intended to explore and understand the basics of web design standards and tools.
So, what let's start with the question: What is Web Design?
Basically, it is the process of planning, designing and creating a website. Text, images, digital media (web banners, animated files, audio/video files) and programming elements are shaped by a web designer to produce the page seen on the web browser (or other digital mediums like mobile, tablets, etc.). As technology and information devices continue to evolve, most web designers continue to integrate into roles of interactive and mobile designers. For example, a website on a desktop computer would look different than how it looks on a smaller mobile and tablet layout, thus it is best practice to make it responsive for most devices accordingly to your user's needs.
Website/Microsite Design and Dev Process
- Discovery (Information gathering, Purpose, Goals, Target Audience, Strategy)
- Planning (usability planning, nformation architecture, choosing technologies, wire-frames)
- Design (prototypes, user interface design, content creation, mock-ups, visual concepts)
- Testing and Delivery (quality assurance and uploading all the content to make it LIVE)
- Maintenance (can be manual or with CMS)
Web Design and development tools used by designers :
- Adobe Photoshop, Fireworks and Illustrator – for image editing/enhancing and manipulating
- Flash – 2D animation for web banners, publishing Audio/Video podcasts, interactive projects, etc.
- FSFTP – to transfer files from local to ROM servers (accessible with accounts only)
Free and Useful Web tools
- HTML Validator (validator.w3.org/) - validates html code helps debug and optimize for web
- Coffee Cup and Filezilla – (publishes files to servers)
- GIMP (free image editing tool)
- Yousendit – Free service to send large files (up to 100MB)
- Smush.it – to optimize graphic files for web
- Firefox ScreenGrab extension – to create screen shots of your screen
- HTML Decoder (to de-code special characters and symbols)
- Google Docs - Allows multiple users to work on a single file (need Gmail account)
- TextFixer.com - Converts text to HTML using tags like <p> and <br />
Screen sizes & browser compatibilities
Remember: PRINT and WEB are two DIFFERENT mediums. In print world, you design for a specified paper size. However, you cannot design for one size on the web. Recommended screen size to design for is 1024 x 768 minimum (or depending on user stats). Different web browsers use diverse rendering engines and will interpret web pages differently.
Web Design Tips
Naming Conventions: use lowercase to name files, using (dash) to replace any spaces
Do not create any file names with spaces or special characters (eg. #, ?, $, etc)
Always use 72 dpi resolution to save images for web (unless specified)
Do not use full large size images. Tip: you can crop images in Photoshop (image > select area > crop) and “save for web” in Photoshop.
Always use alt tags for HTML images, for accessibility and SEO.
Do not save a file at multiple locations on a server
In case you want to see the html code of a web page: Right click and select “View Source”
Do not add too many extra classes when using Adobe Contribute for enews
Always check your code with HTML validator
Do not put line breaks in middle of sentences. Fonts are rendered differently on each browser.
Tips on creating E-newsletters
- Think about how the HTML email will look without its images. Often the emails will arrive with the images disabled (depending on your browser).
- Keep all images small in size. Do not use images that go beyond the page fold of your browser.
HTML emails use HTML tags, inline CSS and images to provide styling capabilities that is not possible with plain text emails.
Tip: It’s a good idea to provide plain text alternative.
- It is NOT possible (at least for now) to embed any Flash/swf files, scripts, videos/audio files in emails.
Basic HTML Tags examples :
- Anchor links <a href=”http://link.com”>name</a>
- Lists <li> </li>
- Paragraph <p> </p>
- Line Break <br>
- Inserting Image <img src="graphics/name.jpg" alt="Description" width="180" height="160" />