Final Critique Day: Dec. 6

Requirements for Final Critique Day: Wednesday, Dec. 6

BEGINNING OF CLASS CRITIQUE  on your Responsive Web Design Project AND hand in of your final portfolio files.

No exeptions. No time to save files. Walk in, on time… be ready or points will be deducted from your final portfolio grade for lack of professionalism. (10 points will be deducted for failure to meet this beginning of class deadline)

Critique will begin promptly at 8:15 a.m.

Final Portfolio Requirements: (This counts as your Final Exam)

 Turn a folder of digital files labeled “Dreamweaver” FALL 2017

Web Design Projects:

The folder of files should have the following projects saved with all accompanying files:

Save the folder with your name:

Have two internal folders labeled as follows:

  1. Website Redesign Project
  2. Responsive Web Design Project

Design Statement:

1-2 page designer statement answering the following questions in paragraph format: (save as designstatement.docx )

What did you learn this semester? (Technical + conceptual)

How is your view of web design  and Dreamweaver different after taking this class?

What aspect of the web design did you enjoy the most/the least?

Is there anything specific that you would have liked to have gone over?

How can you improve your design skills for the future?

What do you see as the future of web design?

How can I improve http://www.professorhopkins.com? Do you use it?

Anything else you would like to tell me?

 

Advertisements

Wed, Nov. 8: Media Queries

Today we are going to start our wire framing process as well as a lot of brainstorming for what you would like your responsive portfolio webpage to be.

HELP: https://helpx.adobe.com/dreamweaver/using/bootstrap.html

GREAT LINK: CHECK ME OUT

Additionally, I’d like you to familiarize yourself with the new features in Dreamweaver CC 2015.

BEST video on Media Queries: Chapter 5 : 

Video  – Media Queries

Lynda.com: Chapter 4: Media Queries

Media Queries for Dummies (not that you are!)

Custom Media Queries

http://blogs.adobe.com/dreamweaver/2015/02/new-dreamweaver-cc-starter-templates-make-responsive-design-a-snap.html

Wed, Nov. 8 : What is Bootstrap?

Screen Shot 2015-10-06 at 2.48.40 PMWhat is Bootstrap? 

Its a “responsive framework” that allows a website to be “mobile-first” and viewed easily on multiple devices. Developed by Twitter, it is not only super popular right now, but very easy to use. It combines HTML, CSS and Javascript and it has just been integrated with Dreamweaver -so experiment with Bootstrap templates and Bootstrap Components in your Portfolio site.

Some resources:

Bootstrap official site

Glyphicons

Bootstrap code help – W3 Schools

Nov. 1: Semester long project: Portfolio Responsive Web Design

Hello students,

Hopefully you feel a little more comfortable now that you have built a starter page in Dreamweaver. . . Remember, we are still learning !

Responsive Web Design Lynda Videos:

  1. Responsive Web Design by Joseph Lowery (2 hours) (BEST ONE) 
  1. Responsive Web Design Fundamentals (more theory than specifically Dreamweaver)\
  2. REALLY GOOD. HIGHLY RECOMMENDED: Dreamweaver 2015: Creative Cloud Updates (1 hour) latest update!

 

Adobe (free) tutorials:

  1. Adobe tutorials (8 min)
  2. Adobe tutorials 4 (3 min): GET PRACTICE FILES HERE

Excellent link on setting up your Responsive Layout

Here is what we are going to work towards with our Portfolio Responsive Web Page:

1. Extensive planning of mission, design and structure of your portfolio page

2. Wireframes built in Photoshop then using the Extract panel, imported into Dreamweaver

3. A fully responsive personal portfolio site – with fluid grid layouts

( to be viewed on mobile, tablet and desktop screens)

4. Personal logo and site with a unified color scheme and style

5. Experiment with Bootstrap and using Bootstrap Components (located in the Insert Panel)

6. Drop down menus to include at least 4 categories :

Portfolio (with a  submenu of at least 3 mediums), About, Links to social media (could be Facebook, LinkedIn, etc.), Contact form, downloadable PDF resume

7. Rotating Bootstrap Carousel with quality images

8. Other possibilities: incorporating animation, video, etc. (open to your ideas!)

9. Do you want social media widgets, glyphicons, etc?

Since we JUST got updated to Dreamweaver CC 2015 – view “new features” here

and via Lynda.com here

What are media queries?

Media Queries: Bootstrap: HELP

RESOURCE LINKS: SIMPLICITY is KEY

Responsive resources:

What is Responsive Design?

Beginners Guide to Responsive Design

Boston Globe (EXCELLENT example of fluid grid layout)

Next week: What are media queries?

DUE DATE: Last class: Wednesday, Dec 6.