DESIGN: STYLE TILES

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.[i]

Style Tiles can facilitate the conversation between the web designer and client. This device helps the web designer to demonstrate that they understand how the client wants to communicate their branding.

A client may not even have a clear vision of what they want, so a web designer can use style tiles to help guide them formulate design elements that support the brand.

[i] Retrieved from http://styletil.es/

AWESOME SCREENSHOT Chrome Extension Review

Awesome Screenshot is a Chrome Extension that allows you to “Capture, Annotate and Share.” Apparently they are experiencing issues on Chrome and require you to download from a new account in the Chrome store. The extension is free and is easily installed. It appears in your toolbar and you can easily access it while viewing a screen. You have a number of options from printing the viewable section, the entire page or a specified area. I tried to use the delayed capture to get a drop down menu but that didn’t work.

PROS: Free, easy to install.

CONS: Couldn’t figure out how to undo an annotation. This is a major flaw for me. What if you are in the middle of a major annotation and you need to go back and change something? Well you can’t undo and you can’t erase. You would need a two step process to import into another editing tool.

VOCAB: SELA THEME

Child Themes allow the developer to make code changes that will be maintained and not be overwritten even if the parent theme is updated. All that is needed is a new folder with the child theme name, a new stylesheet that points to the original stylesheet and an updated functions.php that indicates a child theme is in use.

Page Templates are only used for pages – to change the look and feel for specific needs. A page template can be applied to a single page, a page section, or a class of pages. The default page template is page.php. A page template could be created for an about page called page-about.php, where “about” is the page slug. You could also use the page id. This file is then placed in the child theme to be read before the page.php file

Text Widgets can be used to provide text additional information in the WordPress theme that is not part of the basic theme layout, such as adding contact information in the footer.

Testimonials are from actual client feedback confirming that you are a reputable source. They can reinforce and elevate your reputation.

A Call to Action is something that directs the viewer to do what you want them to do on your website. A CTA can be signing up for a newsletter or requesting a consult.

Design – Usability

Usability in terms of UX and UI in the web development and design worlds is a concept worthy of attention as studies have shown that

Even the government has set internal standards for usability http://guidelines.usability.gov/ These guidelines are research based and are intended to provide best practices over a broad range of web design and digital communications issues.

The article “10 Principles Of Effective Web Design” emphasizes the importance of usability and utility in web design. A website can be visually beautiful but if the user has difficulty achieving what they want to do on the site, the website has failed. Understanding how customers view websites is imperative to web design. Most website users have limited patience and focus. They want immediate gratification without effort.

Resources

Vocab 13

User Feedback or Customer Feedback is a marketing term that describes the process of obtaining a customer’s opinion about a business, product or service. It helps improve your business, product, service and customer experience.

Personas are fictional characters that communicate the primary characteristics of a group of users, identified and selected as a key target through use of segmentation data, across the company in a usable and effective manner. They attempt to create reliable and realistic representations of your key audience segments for reference and decision making regarding design and usability.[i]

User Flow is the path a user follows through your website interface to complete a task (make a reservation, purchase a product, subscribe to something). http://conversionxl.com/how-to-design-user-flow/[ii]

User Interface(UI), in the industrial design field of humanā€“machine interaction, is the space where interactions between humans and machines occur. [iii]

User Experience (UX) is the overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use. It refers to a person’s total experience using a particular product, system or service. [iv]

[i] Retrieved from http://www.usability.gov/how-to-and-tools/methods/personas.html
[ii] Peep Laja (2012) Build It With The User in Mind: How to Design User Flow. Retrieved from hhttp://conversionxl.com/how-to-design-user-flow/
[iii] Retrieved from hhttps://en.wikipedia.org/wiki/User_interface
[iv] Retrieved from https://en.wikipedia.org/wiki/User_experiencehttps://en.wikipedia.org/wiki/User_experience

Five Second Usability Test

The Five Second Usability Test is one of the tests created by Usability Hub to help make web design decisions. It measures the clarity of your design by asking what people recall after viewing it for just five seconds. Is the website conveying the intended message? Can the viewer understand what the website is trying to convey in five seconds?

There is a free version of this tool which allows you to upload a screenshot of your website or have a screenshot generated by the application. The generated screenshot was not an accurate representation of the website. In some cases content was dropped out and in other cases the web fonts and styles were not picked up and were converted to default fonts. I recommend uploading your own generated screenshot. Once you upload the website image, you have your choice of questions to ask or you can create your own. I chose to ask a yes or no question, “Did the brand appear trustworthy?” In a matter of seconds, requests were sent out and I immediately received feedback. With the free version you are limited to 5 requests generated by Usability Hub or up to 20 responses from your own recruits.

The usability testers are paid $0.10 USD per credit earned. Most tests pay 1 credit per response, and some may pay more. Responses take about 1 minute each on average, but experienced testers are often quicker, so you could earn $6-10 per hour taking tests. The testers that responded to my test were from Venezuela, Colombia, Romania, Bosnia and Herzegovina, Armenia, were all male, ages from 25-44, some college to college graduate. Targeted responses cost 3 credits each. I would recommend using your own recruits for testing. You just send them a link to the test. Testers that you recruit will be asked to sign up for a UsabilityHub account if you are on the Basic plan. PRO accounts’ recruited testers won’t be asked to sign up for a UsabilityHub account at the end of your test.

PROS:
Easy interface.
Quick to get started
Quick to get responses

CONS:
The image size is limited to 1MB. I had to use PhotoShop to resize the image. I used Fireshot Capture for the screenshot which allows you to generate a pdf or graphic image. The generated screenshot image size was large at 2.4MB.
Demographics were not representative of client’s audience.

Overall, I find that the free service is helpful as basic feedback but I would be apprehensive to use it as a dedicated tool because of the tester limitations. You have to go to the Pro version at $99 a month to get the full service package.

Discovery Document for Fiona’s Photography

fiona
Fional Galloway is a professional photographer, artist in residence atĀ Verge Center for the ArtsĀ  and professor of photography at Sacramento State University.

Artist’s Statement:
My choice of subject comes from a place of intuition and is fueled by an impetuous desire to partake in the stories that unfold around me. I seek the unknown and I look for the light within the shadows, the stories that are not at first obvious and the uncommon in the common. I photograph people in their environments because I am curious of what lays behind their eyes, where they have been and where they hope to go. My photography evokes the passage of time. I use slow shutter speeds and double exposures to explore the nuances of movement and the modulation of time as it passes from past to present to future. Recently I have begun to work with landscapes, attempting to illustrate abstract, evocative scenery as a motif to epitomize the idea of imagined space, a reminder that what I create through the viewfinder is only real to me.ā€
She has provided a logo, font is Alfa Slab One

Site map
Her website pages include services, about, gallery/portfolio, contact form, log, events calendar, ecommerce, payment gateway

What she sells
She licenses her work through third-party vendors and sells commission work privately.
1. printed goods (https://society6.com/kevinruss)
2. stock house (http://www.shutterstock.com/gallery-2331494p1.html).
3. Commissions: PleaseĀ tell me more about your project: Name, Email, phone, project description, budget range, timeline

Call to action
She wants to add people to her contact list through a newsletter sign-up

Ideal client
Consumers of stock photos andĀ art prints, art consultants and interior designers. I also do Ā commissions for groups, companies, and magazines.Ā Commission photos are delivered via Dropbox.

Elevator pitch/ rockstar statement
I love visual art and capturing history as it happens.

Budget and Timeline
Her budget is $2500or less and she would like the website completed in 2-3 weeks.

What she likes in a website and examples
I just want large images and an easy way for peopleĀ to hire me or ask questions. Minimal, let the photos shine, modern and classic.
I want all the photos in galleries but donā€™t know how to organize them, please give suggestions.
Colors? Natural colors, greens, loves trees and forests.
I likeĀ http://www.carlcostas.com

How does she make money?
Stock photos get paid per use (15%), art prints $25 to $150 depending on size and medium (35%), commissions and editorial assignments are small but want to increase them.
Do some gallery and craft shows.
I need Pay Pal for clients to pay me for commissions, but not an ecommerce store, thatā€™s handled by 3rd partyĀ providers.

Client Goals
I want to build my email list, incorporate social media: I use Facebook and pinterest and instagram. Id like those integrated. (Hint: Use Mail Chimp or Jetpack blog subscription and ifttt.com)
1. to be online.
2. build my list of subscribers and followers (broaden my reach)
3. increase commissions and assignments and referrals.
Iā€™m online all over, need a central place to direct interested parties, want to look professional and experienced to get bigger and more high paying jobs.

Upkeep
She will add photos to galleries and write blog posts (status updates, quotes, and tutorials). Relatively computer savvy.

How will clients view the site?
Widely varies, some on desktop, some tablet, some phones.

GME Website Discovery

discovery

1. Why do you want to have a new website, or have your current site redesigned?
Current website is not professional. Embarrassed to refer clients to website.

2. What will happen if you donā€™t have a new website, or have your current site redesigned?
Does not use current website but finds that his clients ask if he has a website. Would like to use it for branding.

3. Please describe your organization in a few sentences.
Consulting in audio/visual & communication systems, specializing in design ~ engineering ~ project management

4. What is there about you and your background that sets you apart for a special (niche) group of potential customers?
Provides services in Audio/Visual and Communication Systems Design and Engineering since 1999

5. What problems do your prospects have that your business solves?
They need help in developing specifications for purchasing equipment and hiring contractors for installation and implementation.

6. How can your particular work background help prospects, compared to others in your industry?
Knowledge of local requirements and industry needs

7. Why do you believe site visitors should do business with you rather than with a competitor?
Local expert inĀ Audio/Visual and Communication Systems

8. Do you have a slogan or tagline that clearly describes what you offer in terms of benefits or features?
Providing services in Audio/Visual and Communication Systems Design and Engineering since 1999

9. Please describe your potential customers.
Business-to-Business website for target clients: large worship facilities, government agencies, educational institutions

10. What is your budget for this project?
$2000-$3000

11. Who are the decision makers on this project? What staff will be involved? What are their roles?
Owner is sole decision maker. No Staff, Sole Proprietor. Will manage website management himself.

12. What is your deadline for completing the site?
Would like website completed by June 1.

13. Please list the names of five other sites that you like.
Likes Architectural websites for clean, modern look, that includes movement:
http://www.lionakis.com/L-Lionakis-7.aspx
http://dreyfussblackford.com/index.php
http://www.skwarchitects.com/
http://www.hmrarchitects.com/

14. Have you researched your online competition so you have an idea of what you do and donā€™t want on your site?
AV Consultant websites:
http://www.cmsalter.com/
http://www.smwllc.com/
http://thesextantgroup.com/

15. What do you NOT want on your site in terms of text, content, etc.?
blog, events calendar, ecommerce, payment gateway

16. Where is the website content coming from?
Owner

17. Do you have a logo?
Yes, will provide vector graphic

18. Are you planning to do online sales? If youā€™re planning to sell online, are you set up to accept credit cards?
No online sales

19. How much time will you be able to spend online, responding to inquiries that come in via your website? Once a day? Several hours a day?
No online contact form. Site mainly for existing customers or for prospective customers that have already made contact with the business. Provide phone, email address.

20. If you were using a search engine, what words or phrases would you use to find your site? Which of these words or phrases is most important? Second? Third?
Not important to rank on search engines. Use: Audio/Visual, Communication Systems, Design and Engineering

21. Other than what search engines will produce, what methods do you have in mind to spread the word about your website?
Not intending to use website as a marketing tool or implementing social media.

22. Once your website is completed, how long do you think it will be before you begin bringing in significant business from the website?
Not intended to bring in business but to reinforce branding

23. How do you plan to encourage repeat visitors and referrals?
Will consider a blog and making the site a valuable resource in the future.

What I learned from Creating a Website Project on WordPress

The most challenging aspects

The main challenge in creating a website is finding a theme and plugins that can be configured to accommodate the client requirements. I spent a considerable amount of time exploring several themes and setting themes up to find that they were cumbersome or not suited for the requirements.

The secondary challenge is figuring out how to customize the theme. Some themes give you limited ability through the Customizr tool or the Theme Options tool to modify the theme. For more extensive customization they have a “premimum” or “pro” version for a cost.

I like to set up websites that do not incur ongoing costs. If it is a one-time cost I might consider it but I have had experience where the “premium” version was a one-time cost originally and then they started charging. I don’t feel that this is fair to the client and try to steer them away from themes or plugins that they have to purchase. That means that I have additional challenges where I need to use workarounds like chid themes that I have coded or find free plugins that will do what I want.

Things that were easier than I expected

Setting up a website on WordPress is fairly easy. Purchasing a domain name and shared hosting and installing WordPress can be done in 30 minutes or less. Although theme and plugin selection can be a challenge and time consuming, trying out themes and plugins is easy and switching a theme out and back again can be really easy as most themes keep their settings.