THIS ASSIGNMENT IS DUE MONDAY, JULY 2ND
=========================================================
1- Build a basic web page and learn some new techniques with photoshop such as:
the slice tool, the history area, layers, effects, etc…
2 – Learning how to display the complete page on the course server
3- Learning how to organize multiple pages in Photoshop, your computer or hardrive, and on the server.
4- Making sure you are creating thoughtful navigation and an amazing prototype.
=========================================================
The completed expectations for this site are:
1 – 3 Unique and distinct pages
2- Atleast a 3 Link Navigation Buttons on each of the 3 Pages
3- Atleast 2 images throughout the 3 pages
4- Recognized research and reading of the literature provided, with asummary addressing how you thought about and executed the following, please have the summary be atleast 2 paragraphs… More description is always better in trying to understand your motivation:
— Information Architecture
— Organization
— Navigation Design
=========================================================
Ok… LETS GET DOWN TO BUSINESS…
HERE IS THE FIRST STEP:
The link for this tutorial is available here:
First Tutorial on how to build a website with Photoshop from www.justinhoffman.net on Vimeo.
RECOMMENDED: COMPLETE THE TASKS IN THIS EXERCISE BEFORE MOVING ON TO THE NEXT EXERCISE
=======================================================
SECOND STEP:
BEGIN THINKING/RESEARCHING NAVIGATION
If people cannot navigate through your site, they will quickly leave. Thus, designing effective navigation on your Web site is crucial. But there are some basic things you need to do before you can start worrying about rollovers or links, images or flash.
Information Architecture
Before you can even start to plan your navigation, you need to define your site’s information architecture. Information architecture is the taxonomy or structure of your Web site.
Some common taxonomy elements on a corporate or business Web page are:
- Products – the products or services the company sells
- About – information about the company
- Investor Relations – information specific to investors
- Support – help for customers
Some common taxonomy elements on a personal Web page are:
- About Me – information about the page author
- Favorite Links – links that the author likes
- Friends and Family – information about the author’s friends and family
Organization
Once you’ve determined your site architecture, you need to decide how to organize it. You might have it all live in one directory, and just link to the major pages from your front page. Or you might have all the sub-pages separated into directories.
When thinking about your organization, you should think about how your customers might wander through it. Flow charts and storyboards can help you map out exactly how you would like to encourage your readers to use the site. You might want to map out several paths for your readers to use.
Navigation Design
Once you have an idea of the architecture and organization, you’re ready to think about the design of the navigation. There are several things you should consider in deciding on your navigation design:
- Accessible
The navigation of your site is possibly the most important part of any given page. So it should be as accessible as you can make it. This means avoiding special effects like Flash, Java, or JavaScript as your only navigation method. - Meaningful
Keep your navigation meaningful. Make the links clear – don’t try to get cute or use terms that are internal to your organization. Someone who has never been to your site before should know immediately where the link will take them. - Understandable
If you want to use images for your navigation, make sure that there is some text associated with them. “ Mystery Meat Navigation” is the use of non-descriptive images as navigation, and it’s much more common than you might think. - Prevalent
Your navigation should appear on every page of your site. While you don’t need to have identical navigation, the basic structure should be the same throughout the site, with changes used only to indicate location within the hierarchy.
Once you’ve designed your navigation, then you can begin to use it. Keep in mind that it is really tempting to change your navigation structure while you’re in the middle of implementing it. But if you decide to do this, be sure that you’re making the change globally and that it fits with the original goals of your taxonomy and information architecture. My recommendation is to implement the original design and wait a week or two. If at that point you still want to change it, and the change will work, then go for it. You might just find that your planning and preparation were ultimately correct and not change it at all.
YOUR TASK: READ THE ARTICLE ABOVE, RESEARCH SOME OF THE SITES YOU UTILIZE ON A REGULAR BASIS, AND DECIDE HOW YOU WANT TO APPROACH NAVIGATION. YOUR PROTOTYPE SITE SHOULD ADDRESS SOME OF THE MATERIAL IN THE ARTICLE ABOVE AND YOU SHOULD WRITE ATLEAST 2 PARAGRAPHS DESCRIBING THE PATH YOU CHOSE… IN YOUR ARTICLE ADDRESS:
— Information Architecture
— Organization
— Navigation Design
… More description is always better in trying to understand your motivation!!
=================================================================================
THIRD STEP: This second video tutorial covers utilization of the server and understanding file paths to find and view your new web pages.
2 – Tutorial on how to build a website with Photoshop from www.justinhoffman.net on Vimeo.
==============================================================================
MAKING A MULTI-PAGE WEBSITE IN PHOTOSHOP
FOURTH STEP: Organizing and uploading multiple pages onto the server and directing mutliple pages properly….
Password: thunderbird2011
Building a Website with Photoshop — Tutorial 3 from www.justinhoffman.net on Vimeo.
=================================================================
Here is the organizational check list described in the video, deviating from the checklist does not cause fatalities, but it could cause excessive repetition and a waste of your hard earned free time!!
=================================================================
1. Prepare 3 Folders on your desktop:
— Web Page 1
— Web Page 2
— Web Page 3
2. Prepare 3 Pages in Photoshop with 3 unique names:
— Webpage.psd
— Webpage2.psd
— Webpage3.psd
3. Identify the landing page on the server for the 3 pages and make the appropriate folders.
— Page 1 –> www.buyadoo.com/jphotoshop/Page1/page1.html
— Page 2 –> www.buyadoo.com/jphotoshop/Page2/page2.html
— Page 3 –> www.buyadoo.com/jphotoshop/Page3/page3.html
4. Use the Slice tool and make the links based on the soon to be uploaded landing pages… and re-save as a .psd
5. … save for web into the appropriate folder…
6. … compress the images folder in each of the folders
7. upload the compressed file onto the server in the appropriate folder … and upload the .html file into the appropriate folder…
8. test out your site to make sure all the links are accurate!!
9. Brag about your prototype page to your friends and family…