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 code a well designed, user-friendly, responsive, and professional website that ideally could become something that you include in your portfolio.
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/29). 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.
You may use Artificial Intelligence (AI) to assist you in the production process. AI is increasingly used in web development and you are encouraged to explore how to incorporate AI tools (such as ChatGPT, Copilot, Claude, Gemini, Google Stitch, or others) into your processes. These tools should support your learning—not replace it. If you use AI, you must document how you used it (via a separate web page, shared Google doc, Word doc, or PDF). See the section on AI Integration below for more about using AI in this project.
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" homepage 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, fig, xd, or uncommpressed images) and an "images" folder for your optimized 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 identifier. 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, button 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 refined 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.
COMP TO CODE - 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 HTML 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, 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 optimize the site for delivery at 320 - 480px in size (mobile) and 1280 - 1920 px in size (desktop) but are encouraged (optionally) to consider breakpoints and optimizations 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 "project3" 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.
AI INTEGRATION (OPTIONAL)
Artificial Intelligence (AI) tools are now commonly used in web and app development. For this project, you are encouraged to explore the use of AI in your own production processes. AI is permitted as a tool to support learning, problem-solving, and iteration—not to replace the design and development process. You may use AI tools such as ChatGPT, Copilot, Claude, Gemini, Google Stitch, or others to help you explore ideas and code. These tools should support your learning and hand-coding efforts, but not replace them.
If you use AI, you must:
- Document and reflect upon how you used it (via a separate web page, shared Google doc, Word doc, or PDF). Describe how AI influenced your process and what tools, prompts, or outputs you used. This should be a summary; it need not be an exhaustive list of every prompt, output, or adaptation.
- NOT use AI to generate the complete website and bypass core learning objectives. Rather, you can use AI to assist you as you iterate upon and refine your design and code.
- Avoid using frameworks (React, Tailwind templates, etc.). All code should be clean and semantic HTML, CSS, and vanilla JavaScript or jQuery (if needed).
- Understand what you build. You should be able to explain any AI-generated code you use.
- Think critically about AI output. You provide the design thinking, art direction, user experience requirements, and development approach.
- Ensure that all AI-generated content is accurate, functional, and appropriate. AI tools can produce bloated or messy code as well as incorrect or suboptimal results.
- Ensure that the majority of the project is based on your own decisions and implementation. Your project should not be able to be reproduced in AI by re-running a single prompt.
Acceptable uses of AI include:
- Brainstorming ideas for layout, color palettes, typography pairings, UX improvements, etc.
- Writing or refining placeholder content and copy, such as ideas for tag lines or calls to action
- Generating code snippets for basic layouts or specific website components (e.g. navigation, hero sections, image slideshows, etc.)
- Improving accessibility and responsive design
- Debugging errors and providing quality assurance or code improvement recommendations
- Explaining code or concepts (such as Flexbox or Grid)