An Assignment on Web Design

I have been given the task to design a web based personal portfolio of myself aimed at potential employers. The website functions as an online resume for employers to view at their leisure. It will have number of pages containing data that would be sought after by employers. The weapon must be designed in a way that would appeal to employers in the field I wish to be hired in. I have chosen to advertise myself as a student studying to be a software engineer.Goals The planned website must be at least five pages in length, must be designed to accommodate my target audience being possible employers, must have a consistent and appropriate structure and should have an appropriate and pleasing visual design. Implementation is not necessary for this project. In order to best suit the planned website to the target audience I plan to make two persona of possible employers and from them four scenarios, the task only requires one persona and two scenarios but I believe that one is not enough to cover all potential employers.In order to make possible implementation successful the content of the website must be outlined, organized, categorizes and properly structured. Along with the organized content a series of wire frames will be made displaying the physical layout of the website as well as the location of the content within the pages. Accompanying the wire frames a series of screen mock ups will be supplied displaying a potential style to be used.These will come with a style guide detailing features in the mock ups. Audience: Analyzing my target audience is the most important element in creating a successful weapon. A proper analysis can result in features of the weapon that will successfully entice my target audience, being potential employers, to properly browse the weapon. A good way to analyses a target audience is through the creation of persona.A persona is the profile of an imaginary person that displays thee characteristics common to a target audience. Below are two persona with two scenarios each. Persona 1: Mark – Founder of a new software company â€Å"l am looking to build up my software company' Mark Hayward is a young entrepreneur looking to build his software company â€Å"Seasons†, a company started by Mark and a few of his friends from University. He is looking to hire some more people to expand his company.Name: Mark Hayward Type: Intelligent and Ambitious Role: Founder of his Software Company Male * Age 26 * Full Time * Upper – Middle class * Intelligent * Interested in software * Organized * Motivated * Ambitious * young Goals: * Expand his company * Create innovative products * Become a major player in IT Motivations: * A fierce interest in software * A need for accomplishment Scenario: 1 . Mark is looking for a few University students studying IT to hire as armature software engineers in order to expand his software company. Upon a quick web search he sees a link to my online portfolio.Upon browsing the w eapon he sends me an e-mail offering me an interview. 2. I hear Marks Software Company is hiring armature software engineers, I find his e-mail address and send him an e-mail with a link to my online portfolio. He sees my e-mail and follows the link. After browsing the weapon he sends me an email offering me an interview. Persona 2: Shame – Employment manager at Code Valley â€Å"l manage employment for the software company Code Valley' Shame Mason is the employment manager at Code Valley. He searches for potential employees for the company and puts them through the interview process.Name: Shame Mason Type: Office worker, middle aged Role: Employment manager Key Characteristics: * Age 45 * Upper-Middle class Steady life * Dedicated to his Job * Has a steady life * Work hard and climb the corporate ladder * Improve his standard of living * Do a good Job * Climbing the ladder * Making money * Doing a good Job 1 . Shame is looking for possible employees in the future by offerin g internships to university students. He searches for potential employees on the internet and finds a link to my personal portfolio. After browsing the weapon he sends me an e-mail offering me an interview 2.I meet Shame at a careers expo, I write down the URL of my online personal portfolio and give it to him. A few weeks later he visits my arsenal portfolio and after browsing it sends me an e-mail offering me an interview. Content Outline & Structure: Content outline: Home Page: The home page will be fairly basic containing a picture of myself and a few lines of text welcoming the potential employer to the site. It will be of the same design as all other pages with links along the top linking to the other pages. About page: The about page will be more complex than the home page.It will contain a picture of myself alongside three areas of text. The first area of text will be a quote relating to the profession I hope to enter, being software engineering. The two other areas of text will be of a smaller size and relate to my professional experiences and personal life. This page's purpose is to educate the potential employer on what kind of person I am as well as what work related experiences I have had that would make me a strong client for a position in their company. Contact page: The contact page's purpose is to give the potential employer an easy and quick way to send me messages or Job offers on the weapon.I believe it's very important to offer an almost effortless way of contacting me so as to remove the possibility of being removed as a potential employee due to being difficult to contact. The page itself is fairly bare, it consists of three text areas for user input and headings labeling them. The first text area is for the name of the person contacting me, the second is for their email so I can reply to their messages and the third is for the actual message. The button below the last text area when clicked will sent the inputted data to me as an email. Qualifications: The qualifications page is a purely informative page.It contains details of any certificates or other official credentials I possess in drop down menu's. When in compact form all that is displayed is the title of the certification, when expanded a worth description is supplied along with a PDF download link of the official document. References: The references page Contains a series of tiles containing details of references I have received. Each tile contains a title of where I gained the reference as well as a brief description of the reference and a PDF download of the letter of than my own. Site Map: Below is the site map for my planned website.It displays all the pages planned as well as what pages link to each other. Being such a small website all pages link to each other to allow potential employers to browse easily. Wire Frames: Wireless for every planned page are displayed below. All wireless are made using Adobe Fireworks CSS. Home Page: Below is the planned layout of the Home page. About Page: Below is the planned layout of the About page. Contact page: Below is the planned layout of the Contact page. Qualifications Page: Below is the planned layout of the Qualifications page. Employment Page: Below is the planned layout of the Employment page.Visual Design Style Guide: Below is the basic style guide of my planned website. Elements like font styles and sizes as well as some hexadecimal color codes for a few parts of the page. None of Hess designs are definite as the limitations of HTML and CSS have not been fully taken into account. Background: Image file repeated Background: Image file repeated Heading(h2o): size – opt, Font – Bauhaus 93 Heading (Hal): size – opt, Font – Bauhaus 93 Content background: #EDDIED repeated Borders: #OFF, solid Text(p): size – opt, Font – Bauhaus 93 Image Screen Mock-ups: Below are my screen mock ups for every page planned.They were all created using Adobe Firework s CSS. Home Page: Below is the screen mock-up of the Home page. Below is the screen mock-up of the About page. Contact Page: Below is the screen mock-up of the Contact page. Below is the screen mock-up of the Qualifications page. Below is the screen mock-up of the Employment page. Inspirational pages: Below are two pages I took inspiration from in creating my own page. Jason Julienne: http://Association. Com/about/ Jeff Finley: http://www. ]Finley. Rag/about/ Design Rationale The task I was given was to design a web based personal portfolio of myself aimed at potential employers, its purpose being to function as a resume. I believe that the weapon I have designed would fulfill the requirements of this assignment as well as the requirements of any potential employer that may view it if it is implemented. An important part in designing this weapon was to consider what kind of profession I would be interested in entering, this idea changed the entire way the website was arranged and wh at content was included .For example if I had chosen graphic design I would have had to include a number of works I had been involved in as well as samples of those works. The profession I chose to focus on was software engineering; this meant that previous works were not included as they were not as important as qualifications and previous Jobs to potential employers. This change can be seen in he layout of the website having a page for qualifications and a page for references instead of pushing qualifications and references into one page and including previous works.The layout of this weapon was made to be simple. I believe that in a weapon focusing on advertising only one person complexity is pretentious and unnecessary. This is why I have made every page accessible by any single page. The layout is made so that every page is split into two obvious areas, navigation and content. Throughout designed to be simple because a potential employer merely skims resume's, he or she never s pends hours getting in depth with Just one. Why would a potential employer treat an online resume any different?An element of this weapon that I didn't look into in depth was the visual design, the design used is made to be nothing but aesthetically pleasing. If the weapon was to be implemented I may revisit this element and choose a visual design more themed around technology. This may appeal to people hiring in IT professions more than the one that is currently displayed. The web page designed in the above pages is simple but I believe it achieves exactly what it was designed to do, function as an online resume aimed at potential employers.