Rewire final

1. Defining Project & Audience

—As mentioned during the midterm, Psychology Today is a psychology magazine that offers articles and blogs about various issues regarding psychology and everyday life issues. The target audience for this site is the younger generation (20-35years)… people who are interested in psychology, the mind, learning, and self-awareness.

2. Sketching

—I did thumbnails for the site that explored the concept of the mind and did different iterations on how to abstract the notion of “rewiring” the mind. I took inspiration from mind maps, infographics, and explored different ways of organizing information, including dividing the website into a left and right hemisphere to indicate the logical versus the creative side of the brain. Ultimately, I ended choosing a less abstract format and focusing on the language of the site and using minimal, stark colors. I thought that focusing too much on abstraction of the mind into a website format would compromise the usability of the site and make it more confusing for its users.

3. Information Design

—I took existing information from the original website as well as new information for the video section from TED.com (TED talks). I re-titled the navigation because I thought the original language for the navigation was boring and had no personality. The new navigation language is more straightforward and impactful.

4. Interface Design

—The interface is a simple two-row structure with one main column. The top consists of a tab-navigation system similar to filing folders, and the content of each tab is pretty straightforward, mainly first-read images and secondary text. I found that there was the hierarchy of information was okay on psychologytoday.com, but after the first-read there was too much information (i.e. blogs and articles) that had no hierarchy or differentiation aside from different images. I wanted to simplify the site and make information only visible when wanted.

5. Visual Design

—The design is based on a stark, black and yellow color palette. I chose typefaces Conduit and Courier to establish the REWIRE brand as modern yet serious, and I chose imagery that was metaphorical as opposed to literal (i.e. an iceberg to represent the subconscious mind, as opposed to an actual illustration/picture of the mind).

6. Prototyping: Wireframes –> HTML

—The site was designed in Illustrator and sliced up in Photoshop, and my grid was pretty straightforward; the transition from design to HTML was first implementing tabs, and then implementing the content.

7. Usability Testing

—I used it, pretty straightforward in terms of navigation, but not tested on anyone other than myself at this point.
8. Iteration

—I did multiple iterations from the midterm and settled on a simple interface based on a tab-navigation.
9. Repeat
10. Final Version (see below)

Midterm Process

For my midterm, I decided to give the magazine ‘Psychology Today’ a re-design. Their current website at psychologytoday.com

Psychology Today is a psychology magazine that offers articles and blogs about various issues regarding psychology and everyday life issues. I liked the content but I didn’t like how it was being portrayed via cliched stock imagery and commercial graphics. So, I re-named and re-designed their identity. I am still in the process of tweeking the logo as well as the overall feel for the site, but in general i wanted to give it a more modern feel. The target audience for this site is the younger generation (20-35years)… people who are interested in psychology, the mind, learning, and self-awareness.

In order to figure out how to re-design their existing site and prioritize hierarchy I analyzed the existing site and its contents. I found that a lot of the material on the site was devoted to advertisements and sponsors rather than actual content. The content featured is primarily 3-4 page articles on various topics related to psychology and its relevance to life as well as blogs written by professionals within the field. I found it really helpful to make a wireframe of the existing site because I was able to really ‘see’ the site from a “bigger picture” point of view. Also, upon examining the navigation, what struck me immediately was the wording of the menus and how repetitive and boring they sounded. I made it my first priority to simplify and condense the jargon so that it would have immediate impact. I also decided to take reference from websites like Wired Magazine in the simplicity of their jargon in their navigation.

The visual design of the interface was an attempt to simplify the existing site and take reference from swiss grid structure. I decided to go with a minimal selection of colors since I thought that imagery would already be too visually complex. Also, I think when colors are used sparingly but more consistently and repetitively, a stronger brand identity is established. I used gray to give the site the feeling of a newspaper… in the sense that newspapers have credibility. I feel that although Psychology Today has a lot of great content, the way it’s portrayed makes it seem like its not as great as it is.

I decided to rename Psychology Today as well as create a new brand identity for them. I decided upon ‘rewire’ because I think that this words nicely exemplifies the positive effects of psychology. When one learns something new or gains self-awareness, essentially the brain’s circuitry is rewiring itself to adapt and implement the new information. I think that this visual is powerful and that this word possesses a lot of positive emotive force.

In the process of creating the website I began with Illustrator and then exported the layers into Photoshop. I found the setting up of the layers to be extremely challenging as I realized that organization of layers/naming of layers was crucial to the rest of the process. I ended up fixing my ‘layers’ about 5 times before I felt I could open them up in Dreamweaver without having to repeatedly fix alignment issues, etc.

Dreamweaver’s AP Divs is most intuitive to me; it’s the 2/3 column structure set-up that I had trouble understanding… also, importing an image to trace in Dreamweaver made things 200% easier because I was able to just drop elements and lay them over the tracing image. I also had trouble setting up CSS style sheets (body text) because I am so used to adjusting leading/kerning/tracking etc. in Illustrator… not to mention having an extremely limited choice of typefaces in Dreamweaver.

Overall, I learned a lot from doing this assignment and look forward to figuring out the mistakes I kept making pre-midterm, including:

-how to implement 2/3 column grid structures properly

-how to properly use css text style sheets

-how to deal with images/transparency issues

-finding more efficient way to slice images/nav in photoshop so that when I open it up in Dreamweaver I have an easier time

Also, a big lesson I learned through this process was the major importance of setting up and organizing files and layers correctly from the beginning. Secondly, the key to all of this is practice, practice, practice, which is a relief in a way because I feel that I am a lot closer to understanding the left-brain side of the web (i.e. programming).

Moma Tween site v.2

With a little more knowledge about how website grids are laid out, I moved all of my navigation to the left. I made bigger buttons for ease of usability. Also, I thought that it would be interesting to create a texture with the logo so I enlarged it and multiplied it in the background. This way, ‘Toma’s’ (Tween + Moma) identity is constantly being subconsciously reinforced.

For body text I chose Helvetica since it is web-safe as well as appropriate for modern museum website… and went with 12 pt. font as opposed to the usual 8 pt. that I am used to (as in print materials)… for legibility.

Moma tween redesign + subsections

When designing Moma’s tween site, I tried to think about what caught my eye when I was a tween (around 12ish yrs old) and I think that younger kids are capable of deep thought and should not be underestimated. Designs should not be dumbed-down for them, I think it should encourage their curiosity and cause them to question the world around them. Some of the important characteristics of tweens are:

• May have a fear of kidnappings, rapes, and scary media events, as opposed to fantasy things (e.g., witches, monsters, ghosts).
• Have a more developed sense of looking into the future and seeing effects of their actions (as opposed to early childhood where children often do not worry about their future).
• Have more realistic job expectations (“I want to be an engineer when I grow up”, as opposed to “I want to be a wizard”).
• Often have more chores, such as helping around the house. The chores are also a bit more challenging then previously.
• View human relationships differently (i.e. they may notice the flawed, human side of authority figures) .
• Begin to develop a sense of self-identity.
• Have increased feelings of independence.
• Have a different view on morality.
• More mature, sensible, realistic thoughts and actions
• Are responsible for younger siblings and relatives, such as babysitting.
• Often beginning to experience limerence, Puppy Love, or love.
• May start caring about what they look like and what they are wearing.
• May become more exposed to popular culture than childhood and may have interests that are more based on internet trends, television shows, movies, fashion, technology, and music, but are very shallow and corporate compared to the means of more rebellious and open teenagers. Preadolescents generally prefer certain brands, and are a heavily targeted market of many advertisers. Their tendency to buy brand-name items may be due to a desire to fit in, although the desire is not as strong as it is with teenagers. Many of these brands include clothing and music. Examples of popular pop culture phonomena for preadolescenes at the current generation includes Disney Channel stars Hannah Montana and High School Musical. WIKIPEDIA.

My re-design uses a simple color palette that serves to reinforce the different categories throughout the website. The site should be easy to navigate and should have room for error (i.e. more than one way to get to a certain page via reinforced visual pathways).

For the subsections, I chose to show ‘museum hours’ and ‘my toma’. Museum hours and other FAQs about the museum would pop-up on a red flag and hover over the other information to give the site a 3d, hands-on feel. The ‘my toma’ site would be a customizable page where one could ‘collect’ their favorite pieces by clicking on the ADD + button on the various works throughout the page. If you click the button, a short description appears.

Each section is reinforced by its color, for example, the ‘my toma’ page is green and so green stripes at the bottom of the page are meant to reinforce this decision as well as serves as a place for descriptions.

Week 2 exercise: Moma re-design

The task for this week was to re-design Moma.org by taking into account the needs and wants of three character profiles: Theresa, Heather, and George (all fictional).

I took notes and in my own words, summarized what I thought was most important. Some of my notes:

Theresa wants:

—a website that’s easy to navigate, ease-of-use

—a website where you can find things fast

Heather wants:

—aesthetically pleasing site

—relevant content

George wants:

—to read LESS text if necessary

—easy to access and use

Top 3 business objectives:

1. promote membership

2. use existing text and images

3. customizable?

—

To tackle these wants and objectives, I decided to heavily simplify the existing Moma site and give it less visual clutter by cutting out a lot of the text. The original site contains a lot of text-overlaying images and I thought that this was contributing to a lot of the visual noise.

Before I began to design anything, I looked at existing museum websites that I thought were successful and I proceeded to analyze “why”. What I found is that the more successful ones are initially super-simple, but the content is actually hidden but accessible if you want to see more. Moma.org does this with their log-in form. When you click the bottom “+” at the bottom of the page, a new window glides up over the main site. This intentional hiding of secondary information was successful for me.

Besides simplifying things, I wanted to create clearer hierarchy in information by providing more contrast through type size, weight, and face. I made the headline for the landing page as “what’s happening” to create a casual, approachable atmosphere. I also thought that Caecilia would be a fitting choice as it is friendly-looking.

The side bar contains Moma’s address, hours, and prices. I think these three things are what people usually want to know first about a museum they want to visit.

I chose to present only three images because I thought anymore would be providing too many choices; however, everyone is different, so I added a “i want more” feature for people who would like to see more or know more.

I think the key is to slowly introduce new informations in manageable bits and chunks, as opposed to putting everything on one page and having someone wade through the content.

Thoughts on week 2, exercise 2

The HTML was slow to get used to at first but I found that once I got into it, it was fun.

I started by looking at the page sources of pre-existing sites, seeing how they were coded. This was extremely helpful. The only issue was seeing the raw html text in completely unformatted. It was easy to lose my place and forget where I was typing.

I realized the importance of laying out html commands in a consistently organized fashion in order to prevent visual choas and confusion later on.