Wireframes and Annotations

Wireframes are very basic, simplified versions of a web page or application screen. They are simple so that all of the elements of the page can be manipulated easily. Things can be added and subtracted, moved around without affecting final art creation.

I created three wireframe drawings for the web site you are using right now.

  1. The Home Page
  2. Primary Pages
  3. Secondary Pages

The Home Page

Home Page Wireframe

Annotations
  1. Logo image. Logo shall serve as a link to the home page from any location on the site.
  2. Welcome Title. Title for the general overview text.
  3. Welcome Text. General overview of content of the site. Message from the owner.
  4. Web Link. Shall link to the Web landing page.
  5. Art Link. Shall link to the Art landing page.
  6. Animation Link. Shall link to the Animation landing page.
  7. Address. Address of current location of CGGraphics studio.
  8. Phone Number. Phone number for GCGraphics studio.
  9. Email Address. Email address of GCGraphics studio.

Primary Pages

Primary Page Wireframe

Annotations
  1. Logo image. Logo shall serve as a link to the home page from any location on the site.
  2. Web Link. Shall link to the Web landing page.
  3. Art Link. Shall link to the Art landing page.
  4. Animation Link. Shall link to the Animation landing page.
  5. User Experience Design Link. Shall link to the User Experience Design landing page.
  6. Information Architecture Link. Shall link to the Information Architecture landing page.
  7. Visual Design Link. Shall link to the Visual Design landing page.
  8. Content for the User Experience landing page.
  9. Address. Address of current location of CGGraphics studio.
  10. Phone Number. Phone number for GCGraphics studio.
  11. Email Address. Email address of GCGraphics studio.

Secondary Pages

Secondary Page Wireframe

Annotations
  1. Logo image. Logo shall serve as a link to the home page from any location on the site.
  2. Web Link. Shall link to the Web landing page.
  3. Art Link. Shall link to the Art landing page.
  4. Animation Link. Shall link to the Animation landing page.
  5. User Experience Design Link. Shall link to the User Experience Design landing page.
  6. Information Architecture Link. Shall link to the Information Architecture landing page.
  7. Visual Design Link. Shall Link to the Visual Design landing page.
  8. Initial Design and Ideation Link. Link to the Initial Design page.
  9. Creating Structure Link. Link to the Creating Structure page.
  10. Wireframes Link. Link to the Wireframes page.
  11. Prototyping Link. Link to the Prototyping page.
  12. Testing Link. Link to the Testing page.
  13. Content for the User Experience landing page.
  14. Address. Address of current location of CGGraphics studio.
  15. Phone Number. Phone number for GCGraphics studio.
  16. Email Address. Email address of GCGraphics studio.

You can see that as part of the design process on the Home Page I removed the Welcome Title because I didn't need it. That was done before I started building the site, saving me time and effort.

Prototypes