Category: web design

Site Map and High-level Sketches

Posted on by Janelle Dey Art in web design

Create a sitemap for your website. See example sitemap.

Sketch out wireframes for any unique pages on your website (i.e. for a portfolio website do the homepage, gallery page, project detail page, about page and contact us page). Once you have sketched out your idea and know where all your assets will be, create a high-level version of your wireframes using Illustrator (or another wireframing tool). Have these wireframes build on one of the grid layouts that you explored.

Site Map A:

Site Map B:

Sketch/ Wireframe 1-A

Sketch/ Wireframe 1-B

Sketch/ Wireframe 2-A

Sketch/ Wireframe 2-B

Advertisement

3 Grid Layouts

Posted on by Janelle Dey Art in web design

Create 3 different grid layouts for your site’s design. Use grayscale or color to distinguish the grid. Link to example sites that use a similar grid. In your blog post identify the grid type for each layout, based on the lecture.

MODULAR GRID

Example: https://www.nytimes.com/

COLUMN GRID

Example https://www.nationalgeographic.com/magazine

HIERARCHICAL GRID

Example: http://www.ricardopocci.com/project/guarana

Web Design -Project design

Posted on by Janelle Dey Art in web design

Project Design Document

For this course you will complete a website. Throughout the course you will go through the various design and development stages of Web Design. You will apply the skills that you learn to this website that you will create. Your final project will be an accumulation of all that your learn, as you create a professionally designed website.

For this assignment, decide on a website you would like to build for this course (many students choose a portfolio). Then create a project design document. Provide the following:

  • 2-3 sentence Description:

This is a website that is a portfolio showcasing my work. It has previous work, works in progress, and future ideas. It is modern yet classical.

  • Intended Audience

The audience are, clients, and employers.

  • Primary Purpose

The purpose of this website is to show my design skills in work I have done, show my process in designs I am working on, and express my ideas on designs I plan on working on.

  • Site Goals

Smart:

• What do I want to accomplish? I want to accomplish gaining employment.

• Why is this goal important? This is important because it affects my career as a designer.

• Who is involved? Employers are involved, professors are involved, and I am involved.

• Where is it located? I am located in New York.

• Which resources or limits are involved? There are resources such as recommendations and limits are the amount of work in the portfolio.

Measurable:

• How much? I want to gain 1 or 2 jobs per year.

• How many? I want to interest hundreds of employers.

• How will I know when it is accomplished? I will know its accomplished when I get a job offer.

Actionable:

• How can I accomplish this goal? I can show polished and highly detailed, well rendered work.

• How realistic is this goal (constraints such as financial, skill, time

available, etc.)?  This goal is realistic.

Relevant:

• Does this seem worthwhile? Yes this is worthwhile.

• Is this the right time? Yes this is the right time.

• Does this meet my larger goals? Yes it meets my larger goals.

• Am I the right person for this purpose? Yes I am the right person for this purpose.

• Is it applicable to the socio-economic environment? Yes this is applicable.

Time-bound:

• When will it be accomplished? It will be accomplished in a year and a half.

• What can I accomplish 6 months from now? I can accomplish half my showcase.

• What can I accomplish 6 weeks from now? I can create a sketch and create ideas for my website.

• What can I do today? I can complete my market analysis.

  • Market Analysis
    Similar to your market analysis assignment, conduct a market analysis for your website that you will create. Figure out what your market is, who your users are and who your competitors are (find three). Pick one competitor and do a visual audit of their website.

Answer the following:

  • What is your market?

My market is portfolios and blogs.

  • Who is your user? Create a user archetype.

My user is employers

  • Who are your competitors? Put together a list of (at least 3) competitors.

Behance.com, workingnotworking.com, and commarts.com

and provide a visual audit

  • Create screenshots of your competitor website homepage.
  • Overlay the websites grid on top of a screenshot of it.
  • Create a color palette.
  • Identify the typefaces used (names, sizes, hierarchy).
  • List all the media types used (images, videos, audio, interactive embedded assets).

Visual Audit of BEHANCE.com