Extra credit

Unit 9 Reading

http://webdesign.tutsplus.com/articles/design-theory/designing-for-a-responsive-web/

As the Internet grows from different web devices, the design and how the experience is developed changes with it. Responsive web design is coming out with full force. The Nike website for instance as that smooth transition that takes you from page to page in a new and interesting way. I was looking at the Grey Goose website as an example from  “What the Heck is Responsive Web Design” the text on each section of the website glides as the page is being scrolled allows this liquid transition that strengthens the experience of the website. Also after you filled a text box it automatically took you to the next line made for a quicker fill-out process.

             REW makes it less of a physical action of clicking form page to page making on essential page the only actual physical work that is being done. Responsive web design is like moving from room to room without even leaving the actual page, however makes it hard when you want to go to a specific section unless it has that feature. Some considerations are needed in order make sure that responsive web design is used wisely because it’s use can depend on browser supporter, performance, media, and content being used.

E commerce website

Open publication - Free publishing - More martini

A redesign of the Vintage Martini Website 

Sketches and wireframes

 Sketches 

 Wire Frames 

Unit 8 Reading

App development starts with an idea. The idea is derived from a problem, and the app is the solution. This application has a specific audience and should attend  to their needs. People get engaged in apps that are funny and get a heightened experience. Looking, though existing apps you can get an idea of what works well and what doesn't. A helpful tip is to look at the best applications from each category and get an idea of the conventions that are currently working. To develop a iphone app, the device needs to be understood and the apps need to be designer around device specifications. Your entire idea need to be sketched out, when you get all of your ideas out on paper its easier to see the project through. 

App icons have to be unique inorder to stand out in the crowd of many app icons. The concept of the icon should be expressed through the design, this can be done without any words. The title of the app is posted along the side so it makes the name of it on the icon unnecessary. When you open up your app to the app store, avoid using the standard gloss. Many of the apps have this but you want to differentiate your app from the rest. If this gleam is desired you can create your own and still have a clean image. The app should be simple and have little nose. The intest of the design should be added in to the detail of the icon rather then adding stuff that brings nothing to the table. Your icon and the overall theme of your app should mimic each other and stay in the same design. 

Helpful links:

More in depth tips

How creating an app works

Designing an Iphone interface

Mistakes to avoid

Entartainment Social App (Design Stratagy)

This entertainment and event app updates you on local happenings. From five categories sports, art, music, food, and social the goal is to bring together a community and get involved in current events taking place at local venues.

List of Features; 

• Survey
• Searched locally (auto)  
• List of events tracked by survey 
• Link to purchase tickets online
• Social network connecting to FB 
• Attend/ not interested/ not now (filters)
• Number of new events (daily, weekly, monthly) 
• By category 
• Reminders
• Search options

Defined Users;

• Have a busy work scheduled( Full-time employed) 
• Who go out regularly (2-4 per week)
• Looking for a new experience 
• Interested in specific events
• Want to get involved in the community 
• Don't want to miss out
• Tired of looking through events they don't care about

Unit 6 Reading

Making Content Easy to Find
Designing with accessibility
Making it Easier on People with Disabilities
Designing Accessible Websites

Chapters 10 & 11

                Your website should be clear, and your audience members should be able to access all information instinctively and understand it. Everyone has their limits when looking though a website. Limits might even topple if they are unsatisfied and leave the page to never return. Patience form person to person varies. From that patience can even come and go based on their current situation. If they are in a hurry they might be less patience then when they are browsing. A persons faith in the website can be enhanced or decreased; if they are reaching only content that is irrelevant to them their patience may shorten or if they are charmed by the websites their patience will increase. Some revoking layout or understanding could lead their patience to zero and they may leave because they are already unsatisfied. I know when I was looking for a gym membership and the monthly cost was hidden until you already started a buying process, this is how they try to get you invested in with your time, but I could tell what they were trying to do and left the sites unsatisfied.

                The over use of unimportant info may overwhelm a user and cause them to get bored and quite before they waste any more of their time. The information that is important shouldn't be hidden like price, rates, and numbers, all information should be up front. Know what your users want to know and update frequently. For an easier read, make articles or huge pages of text printable. Users will take advantage of this feature, for it is easier to read off screen. There are many different types of users, and there can be a group of your users who rely on certain usability features in order to even use your website. Not every audience member is like you some may need screen readers if they have trouble seeing. These kind of situations should be planned when designing. You shouldn't make assumptions that every user is able bodied, and making your site more accessible doesn't only help  users with disabilities, it helps all of your users get the same kind of clarity. 

Website Proposal

Open publication - Free publishing - More me

Sketches and Wire frames

Sketches

Wire Frames

VIntage Martini screen grabs

Unit 5 Reading

Helpful links for you! 

10 Usability Tips for Web Designers
The Benefits of Collaborative Web Design
Let Usability Testing Guide Your Strategy

Now On to the Reading . . .

Arguments can get in the way of designing websites, since the designers are web users also it’s easy to have biases and preferences. Don’t let this get in the way of your design process, design for the audience in mind. There is no average user, some may like Flash and others may not like it. However, feelings can change, people often times just don’t like Flash done badly. To avoid Tom and Jerry like struggles in your team, and ask productive questions. Ask if the topic in this wording, in this context, on this page is going to work for your audience in mind, and create a great experience for them.  

Always get a usability test; it’s never too early to begin one. Focus groups are different then usability testing. Focus groups are a group of people (5-8) coming together and discussing their wants, feelings, and needs. A usability test deals with only one user at a time, and is usually done on camera for looking over the test afterwards. Unfortunately, focus groups can’t tell you if a site works or how to fix a problem. It’s always a good idea to test. One is a lot better than none. Choose people who are your audience to take a usability test on. Testing can lead to a deeper insight in to how a user may attempt at using the site. Usability testing can be a simple process but can be more informative when a person is hired to track this information for you and give you a debriefing. Often times using a small group of people and testing them a second time will allow them to find deeper hidden problems.    

Unit 4 Reading 08/04

Ch7

The first step in recovery is admitting that the home page is out of your control

The home page is the framework for the rest of the site. The home page has to show the big picture, and this includes what the site is about and how the user goes about using it. The home page should have an indication of what the site is about. A tag line can be used as a brief statement of what the site is for. The tag line should be about six to eight words and be a complete thought. The tagline isn’t a motto; a motto can only be understood once the user gets the tagline. The site should have a visual hierarchy, but only show case four features the site has. Like in the previous chapter a search box has to be evident in order for the user to know where they want to go. To grasp this concept the user already has to know what the site is about so that they know what they are searching for and how the site can help them. The site should have some hints or teasers showing partial evidence of the “good stuff” inside of the website. The home page should be appealing for all users who visit the site, to welcome a diverse quantity of people.

 The navigation can vary a little but should carry the same characteristics throughout the website. The names of the buttons have to remain consistent and in the same order. Even if the point of the site is obvious when creating the users may not get it right away. Users generally look for the tag line near the ID or the top of the page. The only reason an idea would be irrelevant is if the site is a well known site or the site is well known of the internet. But either way a tagline could still be helpful. A brief welcome blurb can help users to understand clearer what the website is about but may not bother to read it if it has a longer explanation then necessary.   

Tips on Creating a Dapper Website Tagline

What to put on the Website vs. What is Rubbish!

Making sure your Users' Experience goes Swimmingly

Nifty Tips on Creating a Home Page

Project two

Vintage Martini
Moodboard

Possibility Website 07/31

Vintage Martini
Beatdrops Closet
Wall of Sound
Hippie Shop
Sonic Boom Records
Fat Brain Toys
Buy Gold Online
Firewoks Store Online

Unit 3 reading 07/28

When entering a website its visual cues are important, and navigation is the key component in a site. It is the site and how it is organized. A poorly organized site isn't likely to keep you motivated to keep looking, or to bring you back to the website. 

          Organization on a web site is similar as the organization in a store. There are main sections then there is the subsection within the main section. As you look through each section but don’t find what you are looking for you restart the process. If the process seams too daunting you can ask, or in this case on a website you can use the search bar. Search bars have a delicate standard you don’t want to have a search bar to find the search bar. People on the site are scanning for the word search, avoiding other similar words is appropriate.

          In some case, like with a small website there is no need for a search bar. Using tabs as an indication of what page you are on is great, but it isn’t strong enough. You need to also have a title on each page. People can normally guess that the logo or ID is the link to the home page up a very plain out “home” is helpful to place under the ID. Navigation should remain constant it tells you where you are and where you have been from page to page.

          If you use tabs instead of buttons make sure that they are used as tabs. Many people use tabs before. By differentiating them and making one look prominent helps the user know where they are in the website. “You are here” indications are an easy way to show where the user is and where they have been and it is a great way to go to a previous page, or all the way back to the home page.  

Tab solutions

Planning navigation

Well design tabs

Website organization tips

And yet again more Inspa-rati- ÓN

Website 1

 Website numro dos

Number three

Wk 2 Reading 07/20

Ch 3, 4, & 5

Face the Facts 

Ch3

            Five things to do to make users see and understand a web site;

·         Clear hierarchy on each page 

·         Take advantage of the conventions

·         Beak up pages into different areas  

·         Make what’s click able obvious

·         Minimize noise

Hierarchy can be portrayed in different ways; the important thing stands out and things that are related have the same level of hierarchy. Grouping, same visual style, clearly defined areas can also give this feeling of relation. Elements that are “nestled” visually show how things are related. Hierarchy organizes and prioritizes content. Without hierarchy it becomes slower to scan and makes us have to prioritize content on our own.

            When a phrase is in a larger type it is a headline and summarizes the content under it, and a picture with text below is either the caption or credits. Conventions continue to be used and develop over time. The conventions from the web have derived from news papers and magazines. The adoption of a convention takes time, the more well known the more users are familiar with the convention. Designers often want to create their own convention this is only innovative if the idea is better or leave it alone.

            By glancing around a page a user should be able to point out the areas of the page. A clear division helps the user decide where they want to go. Users decide quickly where the useful information is and avoid areas they don’t need.

            It is important to indicate what is clickable to not disturb a users flow. When there is no contrast of what is clickable forces the user to have to think to rearrange for a different pattern. Buttons on the search bar has to look like a button. With only visual cues, it still requires thought. A triangle is an indication of “clicking here” but it has to be aimed for what is clickable to make sense.

            Limit noise from the busyness of a page and to the back ground noise. Different users have a different tolerance level for noise. When designing assume every element is visual noise until made otherwise

.

Ch4 

Web Designers and Usability Professionals

Wide vs. deep site hierarchy

Wide- more catigories at each level but with fewer levels

Deep- more levels but requires more clicking with fewer options

Some sites have a standard amount of clicks (3-5) to go to any page on the website. A click isn’t really what matters it’s how involved each click is. Users don’t mind the clicks that they know are going to get them to where they want to go. They just want to be on the right track. “Three mindless, unambiguous clicks are equal to one click that requires thought” –Jared Spool

Unclear choices create questions; the choices need to be mindless in order for them to be easy to use.

Ch5

Of the Five or Six Things I learned

E.B White’s seventeenth rule from The Element of Style

17. Omit needless words

Words that take up space should be avoided; these words are unnecessary and make the site look daunting. Remove half the words you where originally going to use. This reduces the noise level, makes the useful words more prominent, and shortens the page making it easier to see each page at a glance. Happy talk and instructions should be limited if used at all. People would rather “muddle through than to read the instructions.   

Web Site sketches 07/15

Here is an idea for a layout of my portfolio website, it high-lights some of my work as a big picture with the navigation being at the top of the screen. Smaller pictures at the bottom of the page to return back to previous projects. I decided not to go with this one because it would be hard to integrate this layout between pages. 

I decided to work with this layout because it is simple to read and changes can be made from page to page while keeping this layout. 

Concept Statement 07/15

Users that may visit my site:

Prospective clients and customers

Future employers

Friends

Other graphic designers

What does the type users who visit the page want to see to have a good experience visiting my site?

My work

Projects that I’ve completed

My contacts

Name your intended audience

Clients and customers

Future employers

Work categories

Illustration-Creative images, techniques

Layout- business cards, posters, calendar

Type design- Type

Identity- Logo

Misc.

Describe what you need to inform and persuade them of:

I want to promote my work and the creative solutions that I have come up with in recent projects. My goals is to keep it updated and have constant viewers, and people who can enjoy the site as a whole and get a feel of how I work and my style. My overall message is that I am open to new things and dedicated to each project. I want to change and develop from each solution I come up with and grow as a designer, and exceed expectations.

Concept statement:

On my portfolio site I want my work to come before anything else and be show cased on this website. I want a scroll over device to be used on each image/ piece. Shaded areas will show some information that can be taken in at a glance. If further information is desired the user can click on the image and be taken to a full display page.

I want the navigation and all other elements on the page to me aesthetically pleasing and go along with my portfolio pieces, but not over shadow them. I want the layout to be intuitive and make sense as the users create an experience with the website and build interest in my work.

List of assets needed to persuade the user:

Personal business card- Layout, illustration, photo, description

Type Illustration- Vector rendering, type based, process, description

Superior Evergreen- vector logo, Identity, description

Youtube Calendar- Layout, illustration, Description

Reborn Tattoo Logo- Vector logo, type, illustration, description

Reborn Tattoo website- Layout, illustration, photo, Description

Poster design- Layout, Illustration, icons, Description

Article Illustration- Illustration, Description

Shock Top infographic- Layout, Illustration, PDF, description

Mood Board

I want my website for my portfolio to show my creative side in a professional way. I used a lot of natural elements and mixed with created elements to give this feeling of familiarity. I used this sense of sky as a way to show imagination but with an elegant undertone. 

Wk 1 Ch 1&2 Why Mood Boards Matter 7/13

Inspiring Portfolio Websites; 

Erik Marinovich's Portfolio

In Erik Marinovich portfolio he show cases his type and lettering designs in a sleek and simple way. The whole layout is nice and clean and easy to fallow. 
Erik Marinovich Portfolio

BrandClay Portfolio

I like how Brandclay is easy to go through. The layout is straight forward and I love the style that you see in both the pieces in the portfolio and the website itself.
Brandclay Portfolio


In Dan Sweet Design portfolio all the graphic elements come together and show this rough side of design but the elements don't distract from his work. The navigation is easy to follow and the website feels very open Dan Sweet Design's Portfolio

Dan Sweet Design Portfolio

I really like the scrolling feature in Heck House's portfolio, it's almost like a time line for all of the projects while also giving some detail about each one. You can really get a feel for the retro type that is used and how it is incorporated in the different pieces.Heck House Portfolio

Heck House Portfolio

This portfolio is very inspiring, it has a different kind of viewing structure. The work pieces sway either left or right and makes it easy to go threw each project. D-NYCE Portfolio

I really like how the navigation on this website doesn't move when you scroll. Having this fuction makes it easy to look at and is also pleasing to the eye.Jas Hands. com Portfolio

Jas Hands Portfoli

D-NYCE Portfolio

Article;

I some how came across this article about things to think about when putting together your portfolio; Portfolio Help  

Why Mood Boards Matter

Mood boards or inspiration boards are used as a tool to show a client that there is an understanding of where the project is going. Mood boards communicate a visual and tells the client that it's understood what they are looking for. Creating a mood board prevents confusion and it helps the client get involved from the very beginning, to makes sure time isn't wasted on an undesirable look and feel.

  Mood boards are used to show a look, feel, and an atmosphere and is a cluster of elements that come together. The process of creating the mood boards comes after the wire framing and before the mock-ups. The elements that are usually shown on mood boards are photography style, color palettes, typography, patterns, and look and feel.

  There are two kinds of mood boards, the loose collage and a refined style guide. The collage is quick and time effective. You can add screen shots of other sites as reference. But this kind of mood board may be difficult to understand and some elements may be distracting.In a refined style guide the elements are pretty detailed and formal.This kind of mood board is clear and concise and to the point.


When starting the mood board its best to have a clear idea of what need to be shown in the elements. Writing down adjectives will help control the mood board in a way that is desired. When presenting the mood board to a client it is important they know that this stage in the process is required. Make sure that the client is aware that their input is welcome and will help you get an idea of what they are looking for. 
Letting the client know the reason why you picked each element will discourage them from personal preferences. Remind the client that nothing is set in stone yet and that mood boards are just a tool to make a quick decision to make a quick turn around. 


Chapter 1 and 2
One of the major thing surrounds making sure that your user gets the picture about your website, and gets where they want to go. In the book it's suggested;

•  to use only half the words you where going to, then half of that. 
• People need sites that are self-evident, obvious, and self-explanator

Main idea is to get rid of the asking questions, a user can feel loaded down with questions of how to navigate the site making it harder for them to get where they are going.


 The titles of links need to be obvious if it seams like it could be something else it could be assumed. Also things that are clickable need to be shown so to avoid confusion. To make a search box easier it shouldn't ask the user how they want to search, it will only complicates things. All the sites components should be recognizable instantaneously. 

Users may not always move on quickly, but either way an easy site makes everything seem better. when there is less unimportant things available it leads to an effortless navigation through the site.

•  Less time goes in to looking at a web page then we think.
•  Only an effective website is able to work instantly at a glance.

 The way we think people use a web site is different then how they actually use a website. Users generally; 

• glance at each page
• only scan limited words
•  portions of the page aren't even seen.

 This is normally dependent on the kind of page it is, what the user is trying to do, and how much of a hurry they are in. 
Very little time is spent reading, the only words that are read, are the ones that catch out eye. Users only read up to a few paragraphs or print out an article because it's easier on the eye. The reason why we scan is to save time, in a hurry, or just want to keep moving.We know we don't need all of this information, we know we can get away with only a fraction of what is there.We want to only read the relevant tid-bits that we find, and we are good at this. Mainly when we scan we look for certain words and phrases or trigger words 


Users don't often time wait for the best option but rather the first reasonable option to save time. 

• Because they are in a hurry 
• There are no negative effects of guessing wrong 
• No improvement of chances of looking for the best option
• Less work 
• The right guess makes it go faster 

We don't figure things out, especially if we know of a way to get what we want done. People will use things even if they don't completely know how to use them. Users rarely even read through instructions. Even I use search engines to go to a web site I've visited many times but for some reason went I want to go to dictionary.com I might just go to Google first. That's just they way my mind works it seems faster when I'm on the web to do what is familiar. The reason why we don't seek out easier ways to do things is because it out right means nothing to us. We don't even think about it. We rather to it a hard way, we discover an easier way that's cool to but the user isn't going to look for it.When a user is comfortable and confident and feel smart when navigating a website they are even willing to come back and keep using the web site.     

Interactive Infographic

To view the interactivity pdf download link
http://dl.dropbox.com/u/83608898/JessicaP3.pdf

Type Illustration 5/22

Open publication - Free publishing - More illustration

photo realistic Illustration options

Option 1;

Option 2; 

Option 3;