For the final project, you will create a website for the fictional company, iPoint Advisors, using this textual content.
Your overall objective is to create and hand-code a well designed, user-friendly, responsive, 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); refine this style tile and create a wireframe or design comp that envisions your intended layout (Part 2); structure, layout, and format your pages using HTML and CSS (Part 3); explore responsive design and mobile optimization so that your site looks good and is usable on both desktop and mobile devices (Part 4); 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 5). 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. Each student is expected to ask one question in the Canvas forum set up for this purpose (by 4/30). You can ask a 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 "project3" and be sure to save all of your web pages files, including the "index.html" hompage file, within this folder. It is recommended that within your root folder you also create a "source" folder for your original native graphic files (psd, ai, xd, or uncommpressed images) and an "images" folder for your optimzied web graphics.
design a logo graphic + Create a style tile
(IPOINT Creative Development - 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, typography, menu links or buttons (and optionally textures, photos, and more). Start by creating an appropriate and limited color palette for your project.
For your project, you should explore graphic development (creating imagery) in Photoshop, Illustrator, XD, or Figma for the following:
- A logo or banner for the company that will serve as the site identifer. Your logo/banner can be a simple logotype or word mark. Or, it can be a combination mark or emblem.
- Rollover buttons/links for the navigational menu and/or call to action buttons (ultimately, you will use pure CSS or CSS sprites for your menu graphics, 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, button/menu design, and typography choices (and optionally textures, branding graphics, background imagery, and more).
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 and create a layout wireframe or create a design comp (IPOINT Creative Development - Part 2)
There are different ways to approach 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, Illustrator, XD, Figma, or Sketch 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).
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 and wireframe' to define the visual look and feel and intended layout for your iPoint project. Use a column-grid to guide the design (such as 12-columns).
Document your reflined style tile or design comp by creating a JPEG, PNG, PDF, or Figma or XD-based document and post it to your "assignment5" folder in your Lastname_Firstname folder on the MAT server. Then, participate in the iPoint Creative Development Work in Process post in Canvas in order to get (and give) feedback on your style tile or comp (from me and the class).
Note that upon completion of part 2, you will have completed the requirements of Assignment #5 - iPoint Creative Development.
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. It is likely that you will need to create separate HMLT5 structural blocks (section, article, header, footer, aside div etc) 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), floats, or Flexbox, or CSS-grids 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 basic 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 CSS to style and format the menu states (such as :hover). 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"/>
Refine, DEBUG, and UPLOAD VIA FTP (PART 5)
In the last part of the iPoint project, you need to generate new pages as needed, populate each page with content, put on the finishing touches, test your site for consistency and proper functionality, correcting any errors that you spot. Finally, upload the site to the MAT servers via sFTP. Upload your "midterm" folder and files 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.