Midterm Project - Small Business Website (due 11/9 11/16)
For the midterm project, you will create a website for the fictional company, iPoint Advisors, using this textual content.
Your overall objective is to create a well designed, user-friendly, and professional website that ideally could become something that you include in your portfolio.
You will begin by creating a color palette, branding graphics, and a style tile to inform the visual design of your project (Part 1); you will then structure and layout your pages using HTML and CSS (Part 2); style and format the nav menu using CSS sprites as well as style your text and other elements using CSS (Part 3); explore responsie design and mobile optimization so that your site looks good and is usable on both desktop and mobile devices (Part 4); refine your deisgn and define a template for the site (Part 5), and finally you will populate the site with all content, refine your page designs, debug problems, and upload the site to the MAT servers via FTP (Part 6). Instruction and tutorials will be progressively provided to guide you through each of these parts.
The website should have the following sections/pages: profile, services, staff bios, client list, and contact (you are free to change the names/labels for these pages or expand and/or collapse the number of pages to suit your ideas). The about/profile page can double as the homepage (index.htm page) or you can create a unique homepage. You may add to and/or edit the provided content to suit your needs and branding goals (this is not required, but understand that there is some flexibility to how the content might be presented).
You will have the opportunity to ask the "client" (me) questions about the project to guide your creative development and understand the communication goals and objectives for the site. This client survey and project planning questionnaire may be useful to that end. During an in-class moch interview/client meeting, each student is expected to ask one question from the survey provided or make up your own question. Your questions should try to unveil the things you need to know about the communication objectives of the iPoint Advsiors website in order for you to make appropriate design decisions.
Before you begin the project, create a root folder/directory called "midterm" and define a new site in Dreamweaver that points to this folder. Then, be sure to save all of your web pages files, including the "index.htm" hompage file, within this folder. It is recommended that within your root folder you also create a "source" folder for your original native graphics and psd files and an "images" folder for your optimzied web graphics.
design a logo graphic and Create a style tile
(Part 1)
Many designers conduct formal or informal creative investigations, "mood boards," or "style tiles" to explore colors, typography, imagery, layout possibilities and more around a united theme/idea/concept. These creative investigations are the birthplace and playground for design ideas that will ultimately inform your final design.
You are required to conduct your own creative investigations to explore color and typography (and optionally textures, photos, and more). Start by creating an appropriate and limited color palette for your project. Then, explore potential typographic solutions (such as header, subhead, and body text relationships).
For your project, you are required to create the following imagery in Photoshop, Illustrator, or Fireworks: 1) a logo or banner for the company that will server as the site identifer and 2) image-based rollover buttons for the navigational menu items that link to each page. Your logo/banner can be a simple logotype or word mark. Or, it can be a combination mark (words and symbol/icon) or emblem. Ultimately, you will use CSS sprites your menu graphics (see part 3), but initially you can focus on the look and feel of these graphics.
You are encouraged to also create page titles/header graphics (page identifiers) for each site section, background imagery, and/or branding-related graphics or photographs as a appropriate to your concept.
With consideration to the graphics required in the project, design a "Style Tile" that showcases your logo design, color palette, and typography choices (and optionally textures, branding graphics, background imagery, and more).
Document your style tile by creating a JPEG, PNG, or PDF document and post it to your "midterm" folder in your Lastname_Firstname folder on the MAT server.
For ideas and inspiration about such style tiles and the related graphics you need to create, visit Style Tiles (a visual web design process) and the Elements of Design showcase on buttons, navigation menus, and typographic headers.
Refine your style tile or create a design comp
(Part 2)
There are different ways to approach a web design. Traditionally, designers would create a design comp that would demonstrate the total look and feel of a given web page (usually a template page). The comp, usually designed in Photoshop or Illustrator, is an image that can be shared with the client to represent a pixel-perfect rendition of what the website would look like once produced in HTML and CSS. After the client approved the comp, production and programming would begin. However, in the era of responsive design, fixed-sized comps have less relevance for some designers, who prefer to 'design in the browser' or use a 'rapid-prototyping' methodology. These designers create a refined style tile or style guide to define the look and feel of a site, including such elements as logo graphics, image choices, texture or background graphics, buton graphics ( such as 'call to action' buttons or navigation menu graphics), typography, color, and more. However, unlike a comp, these elements aren't necessarily arranged to represent a given page design, but rather to represent the overall style of the site on any page (or size). Thus, style tiles are often also accompanied by wireframes that plan the basic arrangement and hiearachy of visual elements.
For part two of the iPoint project, choose a workflow that you think will work best for you and either create a 'design comp' or a 'refined style tile + wireframe' to define the visual look and feel for your iPoint project.
Document your reflined style tile or design comp by creating a JPEG, PNG, or PDF document and post it to your "midterm" folder in your Lastname_Firstname folder on the MAT server.
Page layout, PAGE formatting, and NAV MENU DESIGN USING EXTERNAL CSS (PART 3)
Once you have a design comp or style tile to use to guide your page layout and formatting choices, in the third part of the iPoint project, you will structure your pages using HTML markup and layout and format your pages using CSS. You are required to style and format the layout, navigation menu, text, images, and other page elements using an external Cascading Style Sheet (CSS) and a CSS Reset.
It is required that you use CSS layout/positioning strategies and avoid using table-based HTML markup for layout. Decide whether you want your pages to expand and contract to fit varying screen sizes or whether you want to use a fixed size. It is likely that you will need to create separate blocks and/or divs for your logo/site identifier, navigational menu, page titles, and body copy, but you should strive to have the simplest and most semantic structure and layout possible that meets your needs. Depending on your layout ideas, you will likely need to use some combination of margins, padding, positioning (relative, absolute, or fixed), and floats to achieve your layout. Once you setup the layout, begin to insert your images and content as you work towards creating a functional page that will become your template.
Create CSS rollover navigation based on the graphic styles you defined in parts one and two. Use HTML list markup (<ul> and <li>) to structure the menu and optionally CSS image replacement techniques with a sprite sheet to style and format it. Create differing styles to format, design, and differentiate body text, headers, sub heads, links, call outs, etc. Strive to separate the presentation (visual style) from the structure, using semantic markup and CSS.
Responsive design and mobile optimizatIOn (PART 4)
In the fourth part of the iPoint project, you are required to optimize your site using responsive design principles so that it looks good and functions well on both desktop and mobile screens. Using media queries, you will reconsider your CSS and structure so that the presentation of your site adapts to varying screen sizes. At minimum, you are required to create break points to optimze the site for delivery at 320 - 480px in size (mobile) and 960 - 1280px in size (desktop) but are encouraged (optionally) to consider breakpoints and optimziations for tablet and widescreen sizes as well. Include the following meta data in the <head> of your document:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
define and use a template for the site (PART 5)
In the fifth part of the iPoint project, you are required to refine and finalize your page design and code (including adding all links, alt tags, etc.) and then save it as a template. Define the appropriate editable regions of your template. Create your content pages based on the template (using "New Page from Template"). Insert the content appropriate for each page and format the text using your external Cascading Style Sheet (CSS).
Refine, DEBUG, and UPLOAD VIA FTP (PART 6)
In the last part of the iPoint project, you need to populate each page with content, put on the finishing touches, test your site for consistency and proper functionality, correcting any errors that you spot, and ultimately upload the site to the MAT servers via FTP. Upload your files into the "midterm" folder within your "Lastname_Firstname" folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions and a video tutorial.
