Week 15: Adding Copy
Week 13: Adding Links & Pages
Week 12: Rapid Evaluation & HTML/CSS 4
Rapid Evaluation
User 1
Wow! I totally like the homepage image. It has a “wow” factor! I like the calligraphy text too! I wonder if you want to try the bright orange as the hover text color in the navigation? Just a thought? I like the watercolor paper texture in the back too! Great job.
User 2
This is the most beautiful site I’ve seen so far in this class. I like the logo treatment in the upper left corner. It looks elegant yet readable. I like the complementary colors. The site name in the upper left corner and in the main header image might be redundant. The script might be hard to read at first glance. Overall, I think everything works with minor tweaks.
User 3
I love your website! So beautiful! It might be a bit redundant to have “2ndfirstdraft” in the header and on the image–depends on what you do with the image on the other pages. Also, maybe try making your logo a slightly lighter color (grey) so that it doesn’t steal attention from the main “2ndfirstdraft”. Sidenote: Your body/white section gets bigger than the nav/image when I make the webpage wider.
Items to change
- eliminate redundancy of “2ndfirstdraft”
- maybe add accent color to page from main image
- try logo in a different color (lighter)
- use a more legible handwritten typeface
Code Lesson 4
Week 11: HTML/CSS 3 & Style Guide v2
Week 10: HTML/CSS 2 & Style Guide
Week 9: HTML/CSS 1 & Wireframes
Week 5: Flowchart and Content Audit
Site Map (Flowchart)
Content Audit
| Page | Image | Text |
|---|---|---|
| Home | Handlettered piece of art, “Welcome” | Introduction to the site |
| Resources -Tools | Pens pencils brushes | Choosing your tools |
| Resources – Letter Library | Gallery of lettering styles | How to choose a lettering style |
| Work | Gallery of my work | Description of art and medium |
| Inspiration | Gallery of artists that inspire me; Jessica Hische, Stefan Kunz, Vic Lee, Chris Wright (Hand Lettering Co) |
Description of the artist’s work and why I like it |
| Contact | Paper and pen (Dear Val) | How to contact me |
Week 4: Personas
Photograph credit to Sara Hattie
Week 3: Target Audience & User Online Habits
Target Audience
My primary target audience are those that are interested in looking at and creating hand-lettered works of art.
Age: 14-84, with emphasis on millenials (25-35 y/o)
Culture: American, European, Australian, or any culture that uses the Latin alphabet
Language: English, or languages that uses the Latin alphabet
The main defining feature of my target audience are artists and designers who have an interest and appreciation for hand-lettered artwork.
My audience is shown below as a wide range group:
Hand-lettering appeals to a diverse crowd. Parker Knight
User Online Habits
How many hours a day are you on the computer?
User 1: a lot, probably 11-12
User 2: about 4-6 hours
User 3: 12 hours
Summary: Many of the people in my target audience are on the computer or using a mobile device for a large portion of their day. Two of the three users questioned have occupations that require them to work in front of a computer and longer commute times where a mobile device is used for leisure.
Where are you physically when you are using your device(s)?
User 1: at work, at home, and at lunch in the office. and Spotify while walking around and driving.
User 2: at a desk or at home, on a couch or in bed
User 3: Work/desk, shuttle, bed/sofa
Summary: Most users are on devices wherever they are; whether at work or during leisure activities.
What kind of device are you using (mobile, desktop, tablet)?
User 1: iMac and PC at work, iPhone5s, macbook (personal)
User 2: Desktop, mobile, rarely tablet
User 3: Laptop and iPhone
Summary: Most work related activities are performed on a desktop or laptop computer while mobile devices are used the rest of the time when away from the desk.
What sort of activities do you do online?
User 1: research travel destinations (google, instagram), google mapping, Facebook, snapchat, email, work
User 2: answering email, google drive planning, clothing shopping, blog reading
User 3: Work related, online shopping like Amazon, Facebook, articles, etc.
Summary: Having online access is a helpful tool for many activities of day to day life and is often necessary for work. Even when online access is not necessary, it plays a huge part in modern entertainment.
What is important to you in your online experience?
User 1: simplicity, legitimate looking, easily navigated, easy to find the information I’m looking for
User 2: internet connection speed and loading times.
User 3: That the webpage browsing is mobile friendly (if on mobile device) and no ads
Summary: Convenience is a huge factor in making an online experience more enjoyable for an audience. The user wants to find what they are looking for quickly, without many steps, and without much hassle.
Week 2: User Research & Competitive Analysis
Rapid User Research
Q1 – What would you like to see in a hand-lettering website?
User 1: lots of examples and pictures of completed and in progress art, how to start, first steps, how to think of ideas, different styles of lettering
User 2: an archive of different styles that can be used as references, personal touch in how the process and styles are described, step-by-step process work
User 3: step-by-step lettering tutorials, how make a practical item such as invitations or cards using different lettering styles, downloadable tools like templates or grids, current artists lettering work, web resources (different types of styles by different artist), how-to-videos
Analysis: It seems like most people are going to the website to learn how to letter. Many people would also be driven to the site looking for inspiration for their own projects so it would be really beneficial to show tons of examples of lettering styles as a resource or reference. A keyword used by all three users was “how-to”. Everyone would like to see how a project begins and progress into a final piece so “in-progress” pictures should be included whenever possible.
Q2 – How would you like the site to be organized?
User 1: by style of lettering, illustrative text, script style, etc.
User 2: type of lettering/lettering styles, flavor of letters (bold, thick lines, juicy letters), organize by where you might use the style (on a card?) or by the message (is it inspirational? is it angry? is it sad? what is the emotion of the words?)
User 3: how-to’s, history, gallery, featured artists, uploaded art (community page), links to instagram/personal portfolios, contact page, by lettering styles (elegant vs playful, serif vs san serif)
Analysis: In terms of organization, most of the users I interviewed would like to see an area of the website where there are many different examples of handlettered styles which can be viewed by their different categories. User 2 would use this web tool to find inspiration for a specific project. For example, if she is lettering a love song lyrics she could go to a different page than if she was lettering a kids birthday invitation.
Q3 – What kind of color scheme would you think would work for this idea?
User 1: clean, light, accent color for a pop, red? turquoise?
User 2: soft, neutral, transparent (like tracing paper), overlapping colors, gold/metallic colors, ombre
User 3: hand lettered touches (logo, page headers etc) clean palette with a pop of color, primary colors, interesting color combinations
Analysis: Most people would like the site design to be very simple so that the lettering pictures would really stand out. At least one or two accent colors would add a pop of interest between pictures.
Q4 – What would you hope to learn (if anything)?
User 1: how to letter like a champ, where to get inspiration
User 2: what does the research process look like (ideation and brainstorming), coming up with ideas and finding inspiration, how to digitize hand-lettered art, what kind of tools to use for specific styles, brainstorming process, dealing with creative block, where to get inspiration, ideation, vocabulary/nomenclature for lettering
User 3: how to get started, history of modern hand-lettering, tools, paper, ruler, how does this ink respond to this paper, setting up a grid, timeline of progression, how I’ve improved over time, learn about the author and honesty about process, how to do flourishes
Analysis: All three users were eager to learn about the beginning stages of lettering. Since starting a new project can be a bit intimidating I would like to make sure I cover, in-depth, where I get my inspiration and what a new letterer should do to prepare before putting pencil to paper.
Competitive Analysis
- Jessica Hische
jessicahische.is/working
Layout: Left hand navigation with elegant script headers, sans serif menu and a simple serif body font punctuated by pops of orange for links associate with the current pag. The majority of the rest of the page is filled with four columns of thumbnails of Jessica’s hand lettering work that extends much, much further down the page. The background is blank white except for a stationary border of beige patterned with Jessica’s silhouette logo.
Color: White and beige background, orange and black text.
Fonts: Script, sans serif, serif body copy
Technical: active links are orange, active images are desaturated, stationary left navigation when scrolling down but top menu is hidden.
- Hand Lettering Co
handlettering.co
Layout: Top centered navigation bar of all small all caps with a hand lettered logo in the upper left corner. Probably 90% of the page is covered in lifestyle photographs of a hand lettering workspace with various tools of the trade laid out in 90 degree angles around a sketchbook with some beautiful lettering on it. Below that is a row of three photographs that also serves as navigation to different lines of product you can purchase on the site.
Color: White black and gray
Fonts: simple sans serif and bold, geometric script font
Technical: seems pretty simple, not much technical complexity
- Lisa Congdon
lisacongdon.com
Layout: Navigation bar centered at the top below Lisa’s hand lettered logo. Below the navigation is a hero image of a watercolor pattern in a sketchbook. Each section of the page is divided by category and the separation is marked by a ruled line and section heading. Everything on the page is centered and has very clean alignment of the right and left hand sides. The margins give a nice feeling of white space so that the page is not too overwhelmed by the amount of text and images.
Color: Mostly white with pops of orangey-red, blog background has beautiful bold colorful plant pattern
Fonts: condensed all caps, logo is hand lettered
Technical: the front page has a carousel image with three rotating lifestyle images
UX Comparison Chart of Competitors
| Site | Responsive HTML | Responsive Images | Gallery | Search Field | Modern Style | Personal Artistic Touch |
|---|---|---|---|---|---|---|
| Jessica Hische | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Hand Lettering Co. | ✓ | ✓ | ✓ | ✗ | ✓ | ✓ |
| Lisa Congdon | ✗ | ✗ | ✗ | ✓ | ✓ | ✓ |
Week 1: Site Planning
@2ndfirstdraft, Hand-Lettering
Client Name: Valerie Yee
Main Purpose for Website: This is a personal site that will be used to share my hand-lettering projects and progress as well other artists that inspire me and anecdotes from my journey as a lettering artist and graphic designer.
Ideas for Pages:
- Home
- Tools & Process
- Sketches & Thumbnails
- Digital
- Exploration
- Inspirations
Site Planning
Phase A- Define your client and their needs.
Example
Client Name: Personal Site about Photography of Texture
Clients Main Purpose for Website: This is a website used to study textures, mostly in nature. This site can be a reference used by artists who want to study textures such as a sculptor, a digital 2D or 3D artist.
Phase B– Rapid User Research
Use the hand-out to survey potential users who may be in your target audience. Find out what they would like in a site like yours. The answers will be used in Week 2, you may post the answers there in advance for safe keeping.
Homework- Submit your URL to the teacher and post your client and their needs for week one.
Resources
Placeholders
Lorem Pixel http://lorempixel.com/
Standard Lorem Ipsum Generator http://generator.lorem-ipsum.info/
Hipster Lorem Ipsum http://hipsum.co/
Color Inspiration
Colour Lovers Inspiration http://www.colourlovers.com/
Color Wizard Tool http://www.colorsontheweb.com/colorwizard.asp
Adobe Color https://color.adobe.com/create/color-wheel/
Web Fonts
Google Fonts https://www.google.com/fonts
Adobe Edge Web Fonts https://edgewebfonts.adobe.com/
Code Help
HTML/CSS http://www.w3schools.com/html/html_intro.asp
Code Academy https://www.codecademy.com/learn/web
Code Academy New Lesson on making a website
Backgrounds
Subtle Patterns http://subtlepatterns.com/
Transparent Textures http://www.transparenttextures.com/
Images
Morgue File Royalty Free Images https://www.morguefile.com
Google > Images > Search Tools > Labeled for reuse http://google.com
Flickr Any License: https://www.flickr.com/
Pixabay https://pixabay.com/
WikiCommons Images https://commons.wikimedia.org/wiki/Category:Images
Valerie Yee 