Step 1
Concept / Sketches / Plan / Notes
1. TARGET AUDIENCE
The more research that can be done into determining your market the better. When you do not have the time or resources to gather survey information, a guesstimation will have to work.
Who potentially, is using the organization’s product/service?
(Describe the market demographics. Possible differentiators include:
Gender, Age, Education, Race, Relationship Status, Income Levels, Hobbies, etc).
The market is comprised of __???___ main segments
(Three are shown below, you can add or subtract as needed).
Primary Target: ( _____ %)
Secondary Target: ( _____ %)
Tertiary (mass-market) Target: ( _____ %)
2. TONE AND MANNER
Personality
Describe the book’s ideal personality/attributes (Ex. Imaginative, Eccentric, Clever, Untamed)
Visual
What design tools will you use to convey the text images provided? (Consider audience and purpose)
3. PURPOSE OF MOCK-UP
From Plan the Perfect Site:
“Many web designers give scant regard to planning. Instead, they stream on in, basing a project’s cursory preparation on previous work, and hoping no problems will rudely smash them in the face along the way. But as Andy Budd, creative director of Clearleft notes: “Planning is integral to almost every project — its like asking how a blueprint benefited a building. You can’t build a building without doing a blueprint, otherwise the result will be ineffective and fall down!”
Now show images of your construction paper mock-up and explain how this helps you understand CSS Media Screen structures.
4. CONCEPT
A dictionary might define concept as an abstract idea or a general notion. For a designer this means more as it is also a plan or intention that guides the design.
A wise designer will base their plan on the needs of the market and the product or service the company they are marketing for provides. In this sense the concept becomes the plan to help sell or publicize a commodity.
5. EMPATHY FOR THE MARKET
An excellent designer will be able to look at their design through the eyes of the market. In other words, the designer will have the ability to set aside their own feelings and emotions and imagine how someone from one of the defined markets would respond to the design. Your goal should be to truly understand the customer needs better than anyone else.
6. VISUALLY REPRESENTING THE COMPANY
Every choice your make, be it color, typeface, and layout, all effect the message your design sends. Make sure those choices reflect the company and its purpose.
7. SKETCHING FOR THE WEB
There is no better way to efficiently test multiple ideas than effective sketching. A good sketch can test a layout or design in a matter of seconds.
Sketches for the web need to include computer screen, tablet screen, and smartphone screen. The designer needs to envision how the elements will move around the page and react to the changes in size.
HTML (HyperText Markup Language)
1. Structure (boxes on the page)
2. Content (text into HTML)
CSS (Cascading Style Sheets)
Style (color, size, formatting)
Main Site Root Folder (MSRF)
Very important to the course, make sure to not move the folder or edit any of the folder names.
Make sure to tell Dreamweaver where the MSRF is every single time.
There is no folder needed for HTML files, they will be saved separately within the MSRF (index.html = homepage)
Sync the MSRF to the SVSU server before working on the site.
Secondary Site Root Folder (SSRF)
Also, make sure to make a separate folder for the secondary site within the MSRF called SSRF.
There is the Work Site (functionality) and the Secondary Site (design + functionality)
“HTML Sandwich”
Describes the format that Dreamweaver shows when opening a new HTML file.
doctype, <head> metadata </head>, <html>, <body> </body>, </html>
(< >, < / > = beginning/end tags)
Generally, everything you see on a webpage is in the body.
CSS Structure
< body >, < header > < /header >, < main >, < article > < /article >, < article > < /article >, < article > < /article >, < /main >, < footer >, < footer >, < /body >
Create a new CSS file and add it to HTML by going to Window > CSS designer > Attach existing CSS file (from css folder in MSRF)
“Margin marches out” and “Padding pushes in” to differentiate the tags.
Example: margin-left: 1%;
Public Server Connection
Site > manage sites > site setup > servers > server name > SFTP > vdrive.svsu.edu > public root directory > test