Share

Design Days: Essential Web Design

Posted: February 13, 2013 - 17:24 , by Noman Siddiqui
Categories: 
Web | Comments (0) | Comment
Design Days by Noman Siddiqui

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.  

What do Web Deisgners work with? Web designers works with image editing software (Photoshop, Fireworks, Illustrator), animation software (Flash), development tools (e.g Webmaster Tools and Firebug) markup languages, like HTML for structure and CSS for presentation/styling,  to develop pages that can be read and viewed by web browsers. Other front/back-end programming and scripting languages such as JavaScript/JQuery, tpl files, and PHP are also used to develop websites that are both interactive and engaging.

Website/Microsite Design and Dev Process

  1. Discovery (Information gathering, Purpose, Goals, Target Audience, Strategy)
  2. Planning (usability planning, nformation architecture, choosing technologies, wire-frames)
  3. Design (prototypes, user interface design, content creation, mock-ups, visual concepts)
  4. Development (coding: HTML, CSS, PHP, javascript/jquery, etc)
  5. Testing and Delivery (quality assurance and uploading all the content to make it LIVE)
  6. Maintenance (can be manual or with CMS)

 * Watch video about Web Design process

Web Design and development tools used by designers :

  • Adobe Photoshop, Fireworks and Illustrator – for image editing/enhancing and manipulating
  • Dreamweaver, Notepad, Firebug – for editing/programming languages like HTML, JavaScript, PHP, etc.
  • 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)

* View Web and Mobile Design Trends 2013 (PDF)

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 />

quote on design
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

DO’s

DO NOT’s

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)
Colours will look different on print and screen.

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

  1. Think about how the HTML email will look without its images. Often the emails will arrive with the images disabled (depending on your browser).
  2. Keep all images small in size. Do not use images that go beyond the page fold of your browser.
  3. 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.
  4. It is NOT possible (at least for now) to embed any Flash/swf files, scripts, videos/audio files in emails.

Basic HTML Tags examples :

  1. Anchor links <a href=”http://link.com”>name</a>
  2. Lists <li> </li>
  3. Paragraph <p> </p>
  4. Line Break <br>
  5. Inserting Image  <img src="graphics/name.jpg" alt="Description" width="180" height="160" />

 

That's all folks. Stay tuned for the next episode of Design Days.

Author: Noman Siddiqui, ROM Web Designer

Comments