Visual Design and Images for the Web

Have just spent about 3-4 hours reviewing the material from yesterdays lecture based around Visual Design and Images for the Web. This was a good lecture to finally get as the idea for my site is based around showing off some of the photos from all of my trips.

We covered off gif vs jpg vs png etc and there really is a lot of material about this on the web. The general convention is that JPEG is the best file format used for photographs (explained here) and this is also supported by advise from webstyleguide.com. So I will need to ensure all my photographs are saved as appropriate sized jpg files. 
Webstyleguide.com also offers: 
@font-face { font-family: “MS 明朝”;}@font-face { font-family: “Cambria Math”;}@font-face { font-family: “Cambria”;}p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: Cambria; }.MsoChpDefault { font-family: Cambria; }div.WordSection1 { page: WordSection1; } When you are creating graphics for web pages you should always use the 1:1 display ratio (one pixel in the image equals one pixel on the screen), because this is how big the image will display on the web page   Images that are too large should be reduced in size with an image editor such as Adobe Photoshop to display at proper size at a resolution of 72 ppi
 @font-face { font-family: “MS 明朝”;}@font-face { font-family: “Cambria Math”;}@font-face { font-family: “Cambria”;}p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: Cambria; }a:link, span.MsoHyperlink { color: blue; text-decoration: underline; }a:visited, span.MsoHyperlinkFollowed { color: purple; text-decoration: underline; }.MsoChpDefault { font-family: Cambria; }div.WordSection1 { page: WordSection1; }
@font-face { font-family: “MS 明朝”;}@font-face { font-family: “Cambria Math”;}@font-face { font-family: “Cambria”;}p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: Cambria; }.MsoChpDefault { font-family: Cambria; }div.WordSection1 { page: WordSectioI will follow this advice when preparing the content for my website.
One thing I have to consider is the height and width of my photos. I really have to experiment with the layout to get that right. The lecture notes spoke about The Golden Ratio in Web Design and The Grid System – grids as an aid to practical application of the golden ratio. So I have downloaded a template from 960gs to play around with the layout in photoshop.

The lesson also went over editing images in dreamweaver and change image on rollover etc.

It broadly discussed galleries, but this is something (as you will get from last weeks blog posts!) that I really want to have included as a key feature of my site, so I am now going to go a spend some time looking at galleries and look for ideas (and maybe even a design!) that I can use at talesfromloz.com
About these ads

About Lauren Smith (@digital_stuf)

With over 10 years experience as a brands marketer, I have worked with a solid stable of global names and gained extensive experience in building an online presence for FMCG Brands. Throughout my career I have planned, lead and controlled all areas of the marketing mix with an emphasis on budgeting for and delivering results in digital direct marketing, CRM and database management. I am addicted to the internet and the wealth of expression it has to offer. I blog, tweet and update my facebook status obsessively. For years I have been telling marketing managers that the future is digital and now the future is here! (Well, the new future is mobile isn't it!). I am catching up on the technical skills to help boost my brand marketing experience. This blog, is the portfolio of my Masters in Digital Media.
This entry was posted in Design for the Internet. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s