AdrianDigital Blog

This weeks lecture was on the design structure behind webpages and the stages of development  in designing a webpage.  Organization and navigation is key within a web page, even more so as a website  increases in size. Thats why its important to establish a consitant layout throughout the website and to have an idea of the hierarchy of information on each page.

The first step in designing is to create a flowchart that demonstrates how the individual webpages of the website will connect and relate to one another. This helps show the navigational flow of the website and works to organize the information that needs to be presented on the web pages. Storyboards are the next step when designing which are where the grids are established and show basic content (design,type,photos,navigation,etc..)of what the finished page should look like.

This week the lecture was on Cascading Style Sheets(CSS) and what it does for websites. CSS is a language for establishing a set of rules that effect the type and design of a web page or an entire website. CSS  is known for being easily accessible, it establishes a website hierarchy, and once established allows easy site wide maintenance. When using CSS  the block level elements can be controlled with formatting and positioning.A rule in CSS consists of a selector and a declaration, the example of this would be the selector H1 and a declaration to make its color red.
or

H1 {color :red }

During the week I registered for gettyimages.com which is a stock images website. This is one example of a website that contains a database of existing photos and video of content that can be licensed for use for personal or commercial use.

Links to Stock Photo Sites:

• http://www.gettyimages.com
• http://www.comstock.com
• http://www.fotosearch.com
• http://pro.corbis.com

Imagemaps were discussed this week as a means to create clickable links that are put into images using a set of coordinates. Imagemaps are not scalable and only display in browsers that support graphic images however, are an easy way to break up a complicated image rather then slicing and linking individual elements of that image.

This week in the textbook “The Principles of Beautiful Web Design” Chapter 3 was on Texture within a website. Texture is anything that has a look a feel that represents a real world surface. Texture becomes a 2D representation of a 3D object feel. This is created using the concepts of point, line, shape, depth, volume, and pattern and relating them all together within a design.

Links from the Textbook:

“Creating Custom Corners & Borders” by Søren Madsen

“Thrashbox” by Ryan Thrash

“Nifty Corners” by Alessandro Fulciniti

“Spiffy Corners” by Greg Johnson

My first idea is to build a digital portfolio to showcase my work in 3D modeling and level design. In this case I would be using my own work and use all original content from projects I’ve done at AACC. Currently I have a domain of adriandigital.com however the website is done with  free hosting while I practiced using html for the first time . I would like to remake the website with what I learned from class this semester. I have current digital content both pictures and video that I would need to display. This portfolio is not exactly for a job since I am transferring to a 4 year however, I would like the practice none the less with the current skills I have developed.

My second idea is going to be business website for riot apparel a clothing company located in Baltimore. I work with one of the co-owners and my girlfriend was able to get an internship with their company. Photo content and basic outlines for what the client wants would be provided by the owners of the business. They have models that try on clothing as examples of merchandise. The only issue I’m worried about is whether its in the scope of the class to be able to set up secure business transactions via the web store that they need.

This week I started off with information about color theory in relation to how color is displayed digitally. The main color systems are RGB which is an additive color how it is different then the traditionally taught RYB. The psychology of color was also taught and I learned a few of the different meanings behind color in western society.

Links:

http://www.colormatters.com/symbolism.html

http://www.colorstrology.com/

http://www.mariaclaudiacortes.com/

Also the website Kuler was introduced as a good way to get color schemes integrated into adobe products.

We began this week to get an introduction to adobe Fireworks which is a hybrid raster / vector graphics program that can integrate the two types of graphics files together which it saves as a fireworks png. The videos this week mainly discussed the interface, how fireworks deals with layers, and also the ways which to save or import/export files.

In order to have some prep for our AACC banner design project, we also got information about web banners. The website IAB was presented as the association that works towards bettering the online interactive advertising.

Information identifying why websites can be bad was also a good part of this weeks reading. The term mystery meat navigation was brought up to describe websites that hide links to other sections until a user scrolls over and has to find, identify, and remember where that link was located. An amazing about of reading material and videos on the subject can be found on Vincent Flanders web site webpagesthatsuck.com

Information this week covered image file types for web such as jpeg, gif, and png, and also how to link them into a web page. A new feature in this weeks Kona web page allowed for us to use the page properties window to change properties of headers, links or even background color. In order to get full control over images a number of software applications have been created to create and edit images:

• Photoshop, Industry Standard for Image Editing in General
• Fireworks, Industry Standard for Image Editing specifically for web graphics
• Photoshop Elements, consumer / amateur editing tool for photos
• LightRoom, Industry Standard for Photographers for cataloguing and editing digital photos
• The GIMP, FREE Editing tool
• Graphic Converter, Shareware for MAC
• PaintShop Pro, Shareware for PC

The website UX Booth as an excellent article on optimization of images for the web Click Here.

This week we also started reading The Principles of Beautiful Web Design by Jason Beaird

Chapter 1 covered the concepts of layout and composition within a website.  It went over common column layouts, designing a website, creating balance, emphasizing certain aspects of a webpage. It also went over some technical problems like dealing with inconsistant screen resolution. The book also included some good websites to look at to get inspired.

• CSS Zen Garden
• CSS Beauty
• Stylegala Gallery
• CSS Vault
• Design Interact Site of the Week

This week I learned about setting up blog roll links here on word press. Also I learned about setting up dreamweaver to link to a FTP server and creating a local root folder to store all website related material.

I also learned about using headers, styles such as bold, italics, and lists in both regular html and in dreamweaver. Header tags such as <H1> or <H4> create a hierarchy of important information on a page. By determining a structure that a web page abides by it creates a uniform way for a user to obtain information. Using bold or italics also can be used in this manner to emphasize a certain word or phrase. Lists are used as another way to link related material together. The three types of lists discussed are organized lists <ol>, unorganized lists <ul>, and Definition lists <dl>. These are all used in different ways. <ol> is used to create a numbered list. <ul> creates a list using the shapes. <dl> is a bit different because it presents a term or sentence that is placed above a defintion in order to create a defintion hierarchy.

Links were discussed in notes and also on lynda.com. The two kinds of links are absolute and relative. Absolute links are often used to link to outside content or web pages. They contain the full http://www. address and take longer for a browser to process. Relative links are links that access another page relative from the current webpages location to the other webpages location within the same root folder. These are often faster to do however must be updated id the structure within the website is changed. Another type of relative link is to create a local root link. These are directed starting from the local root folder and navigate to the webpage that is selected.

Links:

• Getting Started: 01 What is Dreamweaver
  
• Using Views and Workspaces
  
• Defining a Site
  
• Adding Text and Images
  
• Managing and Uploading Sites
  
• Styling Text using CSS
  

This week I learned a great deal more about the internet and the world wide web.

Lynda.com had great info on creating an organized folder system for use in any WYSIWYG editors. Other information such as the three character file extension such as .htm .jpg .mov .mp4 etc… was also very informative. The reasoning behind html vs. xhtml ,css, and javascript was also important since the last time I took a web class all that was covered was html 4.0.

Good Links:

http://www.smashingmagazine.com/2008/05/06/25-wysiwyg-editors-reviewed/ – List of popular WYSIWYG editors.

http://www.ftpclient.com/ftp_client_faq.html – Information on what a FTP ( file transfer protocol) is.

www.w3.org – World Wide Web Consortium an organization reponsible for establishing standards for all web sites to follow.

www.mybestratedwebhosting.com/#chart or www.e-wisdom.com/web_hosting – websites that show rankings/comparisons for different webhosts and what they offer.

http://designm.ag/inspiration/101-awesome-portfolio-sites – 101 really good porfolios done by web designers.

Welcome to  my blog.

Thanks for Visiting

-Adrian