Final Bio and Studio Website Design Document. By Sara Payo.

Transcription

1 Final Bio and Studio Website Design Document By Sara Payo Last modified: April 26 th, 2013

2 Table of Contents I. Introduction 1. Background pg Design Goals/Statement of Purpose pg. 3 II. Architecture of Website Design 1. Web Content/Outline pg Web Experiential Flowchart for Users pg Web Interface Mockups pg Media Resources/Inventory pg. 6 III. Implementation Plan pg. 6 2

3 I. Introduction 1. Background The ART203 Lesson 6 Web Design Project is intended to teach the skills necessary to design a web interface for a bio or portfolio site using Adobe Photoshop, Dreamweaver and other programs and materials. It is a final collaboration of all exercises and assignments throughout the semester and to put everything in one place in order to display the steps, skills, and design styles of the artist/author. As an individual, I have a background with experience in photography, visual arts, technical theater, graphic design and communications. By enrolling in the ART203 web course, I had hoped to enhance my skills that would make me a well-rounded digital artist. 2. Design Goals/Statement of Purpose The purpose of my Web Design Project is for me to learn how to incorporate the various skills, programs, and digital artwork/text into a website to showcase my talents as a student and designer/digital communications agent. I have worked up to this point in order to learn the skills necessary to complete the final project and goal of completing this course. I hope to enhance my personal website/interface further during my time at Penn State, as well as improve upon the skills I have learned and employed throughout the process. This project matters to me because it shows how complex and intricate the process is in creating a website, even on a personal scale, and not a corporate or commissioned site. The goal of my personal website was to create something to showcase my personality in a fun yet professional manner. 3

4 II. Architecture of Website Design 1. Web Content/Outline In my website, I have included an Index/Homepage, a link to my Penn State blogs for the ART203 course, a Portfolio page, a Bio/Artist Statement, selected items on my Resume, and a Contact page with information and links. The pages of my site are separate but maintain the same layout, except for the external blog site. I designed the site with Adobe Photoshop and exported the sliced images as PNGs (portable network graphics), GIFs (graphics interchange format) and JPEGs (joint photographic experts group), and compiled them with HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) within Adobe Dreamweaver. 2. Web Experiential Flowchart for Users Home Contact 8 icons/links Blog PSU Blog Resume Portfolio 6 Images Bio 4

5 3. Web Interface Mockups Homepage Porfolio page Magnified image 5

6 4. Media Resources/Inventory The Interface buttons for Home, Blog, Portfolio, Bio, Resume, Contact, were images of splattered paint, with links to the other pages within the site. The center background, or splash title as I refer to it, gives viewers information about what page they are currently on. Click on Blog takes viewers to an external link to the Penn State blogs where I have posted blog topics for the course. The images in the Portfolio page are visual works of my own. The Bio and Resume pages include textboxes that scroll, so that the information did not overflow off the layout. On the Contact page are my s and icons of social networks and websites (Facebook, LinkedIn, Tumblr, Twitter, Google+, deviantart, Pinterest, Skype) with my profile linked to them when clicked IV. Implementation Plan The beginning of the project started with blog topics, two exercises in each unit lesson, followed by the unit assignments. The accumulation of skills, information, and knowledge throughout the course helped in creating the final draft of the web design project. I used various exercises I had already completed to draft the interface for my website, such as Lesson 4 and 5 exercises that taught me how to create navigation bars, optimize and export images for the web, as well as create a functional layout interface with Photoshop and Dreamweaver. I used a combination of all of these skills and programs, along with my personal style and eye for design, to create a fun, functional, and somewhat professional personal website that includes links to my contact information, blog posts, visual artwork, selected items from my resume, and a bio/artist statement. The process was complex and sometime frustrating, but it was a definitely a rewarding and fulfilling experience. 6