Posts

Posted on

Review #2-Single Page Site

For my second review, I chose NeoBred, a single page website. The site’s use of color is really good. It uses the black as the background color and white as the text color. The color of text on black background reflects the text really good. Black and white is a great combination to be used together. Use of black text on white background is very normal but using background as black and text as white is not seen everywhere and it feels different from usual and reflects the tone of the both colors. Other colors used in the website are yellow, pink, cyan and soft pink. The shades chose of these color are light and works really good with the black background. Soft pink color is used for BRED in the logo of the website, some text in section 1, and also for a small circle in sections 1, 2, 3, and 5. Yellow color is used in section 2 for heading ABOUT, a couple text lines and periods. Pink color is used in section 3 for a word of the heading, a line on the page and some periods. Cyan color is used in section 5 for one word of the heading again and just a couple words in the text. Cyan color also pops up in section 5 when you try to fill up your information in the space provided. All the colors used on the black background pop really well that gives the builder to achieve emphasis in his website. The text used is very neat and explicit font which gives a really good texture feeling.

In this single page website, user has to scroll up and down to explore the content of the website. There are five sections in the website, assigned accordingly to a specific section. A user can click on the section number linked on the bottom left corner of the webpage, and it will take the user on that section. Also you can scroll it up or down with your mouse to switch the section and there is a small mouse icon on the bottom right corner of the website that takes the user to the next section when he clicks on it. I really liked this mouse icon as it keeps bouncing and it is something new and unique that I found on this website. In the middle right of the webpage there is a menu section which is another option to navigate to all the sections except the home page. On the bottom left of the webpage there is a count that tells you which section you are on.

I think the colors used in the website make it easy to scan and read. Colors like white, yellow, pink, cyan, and soft pink works and reflects the text really good, and make the text easy to understand. Repetition also comes into the play since white text has been used on every page of the website to make the text easy to scan when it pops up on the black background.

I believe that the site is designed well. While I was looking over onepagelove.com to pick a website, this was the first website I found that is designed well out of first 20 I saw. NeoBred uses really good color combination which pops up the text and make the website easy to scan and read as well. It also has different ways to navigate the website and the user can pick whichever he likes the best. The best navigation way/controller I like in this website is the little mouse navigator on the bottom right of the website. Other thing I liked in the website is that the user has to scroll up and down rather than left to right. I personally prefer to have up and down scrolling since it can be down by using the scroll button on the mouse which is quite easier and quick rather than clicking on the left/right side of the webpage again and again. Overall, this single page is designed pretty good.

Posted on

Review #2

Upon scrolling through OnePageLove.com, I was fascinated by the site resn.co.uk because of its design and concept. This site has a very sleek concept combining 2-D and 3-D elements and using two different color schemes. The main thing that I like from this site is that it does not require any scrolling. Everything that you need to see is right before your eyes.

The design concept itself it quite interesting. You mainly navigate the site through clicking and holding onto this 3-D drop that moves like it is looking at your cursor. Each time you hold onto the drop it displays one of six different designs to play around with. Each of these designs bring forth something different. The first one is in full black and white and is of apples and moons floating around in circles and they get bigger and smaller as you move the cursor. The second one is of a vibrantly colored 3-D cylinder and ball. The ball is controlled by your cursor and when you hit the cylinder with the ball it swings around in place, making different sounds depending on where it is hit. The third is of a bat that shoots out lasers from an ouija board that reveals a few different photos. The fourth one is a tunnel that switches from a black and white tone and a colored tone while also changing shapes between a circle, square, and heart. The fifth is a neon blinking bottle controlled by the cursor and when it is moved it releases various blinking, neon pictures. The sixth and final design is of shapes flying in a black background and bounce out of the way when impacting into the cursor. After a certain amount of shapes are hit it will switch to a white background with black shapes.

On the main page in each corner, there is a specific button. The drop-shaped button in the top left corner works the drop is you don’t want to click on it. In the bottom left corner, is a play button to reveal their showreel to watch. In the top right corner, there is a circle button to reveal what they do, some of their work, and their contact information. Lastly, since everything on the site has sound, on the bottom right corner, there is a bottom to turn the audio on and off.

I really love the design and layout of this site. The color scheme is a bit confusing to me, but I think it works very well together with the mix of black and white and neon, vibrant colors. Navigation on this site is also very easy for the simple user because everything is already there in front of you without have to do any scrolling. Another thing to make it easy to navigate is that everything is explained on what each button does. Overall it is a great site to have some fun on.

 

Posted on

Review #2

Browsing through these single page websites Denis Smirnov’s was the one that caught my eye. The geometric design of simple architecture that gave the page depth drew me in. Then once I got to the actual website I realized that the architecture built itself as the page scrolled with it which has kept me interested for countless loops.
The page itself gives off an inside a computer vibe. It does this because it uses four basic colors red, blue, black and white. The black give a background that allows the red and blue building of architecture pop and give depth. There are also times when the color gets filled in and there are sheets of pure blue or red which catches the eye. The white is then used for the information he provided.
The information is all presented in the middle of the page left aligned and we aren’t able to scroll. The background does that for us or at least gives that illusion. The text itself is simple his name is the largest and then it gives three professional credentials in an ordered list. Below that he has icons that lead to his other pages such as Facebook, Twitter, Email and bittalk forum. When these icons are hovered over they light up as well.
In my opinion this site is well constructed because of the simplicity of use. The user does not have to do anything but read what is presented, which is enough to judge if one is interested or not, and follow the links which open in new tabs. The background is also simple but intriguing to watch as it grows and takes one on a short journey.

Charles Stockhausen

Posted on

Review #2: Single Page Webpage

For the one page website review I chose www.jordancole.com which was on www.onepagelove.com.  This was a portfolio created by freelance artist Jordan Cole.  Upon entering the site, you simply see an image of a magazine page flipping.  It is assumed that this is some of his work.  Right at the first page there is the main image, a drop down menu on the side, arrows pointing in all four directions of the screen, and Jordan Cole’s name on the top and bottom of the screen.  You can only physically scroll up and down even though there are arrows pointing in all four directions.  You can’t scroll right to left.  You must click on the arrows with your mouse to move the screen horizontally.  By moving the screen, it moves to more of his work that has been shown in magazines.  As you move down the website it breaks into a different color with a different main image.  I am assuming that it is organized by each different project he created.  So when you scroll to a new ‘page’ it is a different project that he created.  If there are arrows pointing to the left and right, then there are more images of the project either on a different media device or different point of view.  Throughout the website his name is placed at the top and bottom of each page continuously reminding you who created the work while being a page break as the colors change between pages.

Overall the design of the website is minimal.  There is simply a colored background with the image of the project in front of it.  Everything has a clean and simple look because his designs themselves often have the texture in them.  Most of his designs tie in nature in some manner giving them texture.  This texture contrasts with the clean technology and colored backgrounds.  The only details other than the images themselves are the occasional use of shadows with the images.  As explained in The Principles of Beautiful Web Design, “Light and shadow establish visual contrast, and help to create the illusion of three-dimensional depth with two-dimensional media, such as pencil on paper or pixels on your computer screen.”  For example, he uses shadows to create the idea that these mediums in which his projects are on are sitting on a table or are located in front of a background.  Allowing these subtle shadows into his images makes them more realistic to the viewer.  He’s used it to show the width of magazine as well as the size of a computer against a table.  Using these shadows also helps show the different sizes he designs for specifically in media.  Showing the different forms of technology that art can be displayed on (phones, laptops, tablets, desktops) the shadows help create a more realistic and visual size difference.

The colors that Jordan Cole used within his website were a mix of warm and cool colors.  He used colors to spark creativity and action which follow with his constant outdoors theme.  He took into account the colors within his designs and the color he chose for the background.  For example, If the image of his work had primarily cool colors within it, he would use a warm colored background to create contrast.  The different colors helped to break up the webpage into smaller pages to represent the idea of looking at a new project.  Also, the colors had a very similar tone allowing the transition between them easy for the eye.

Overall the site is well made.  The navigation might take a second to think about it but after the user realizes they have to click on the arrows to move screens it is extremely easy to use.  The different forms of navigation located on the webpage are very large making them easy to find.  The organization can be a little confusing because I feel the user would someone question why Jordan Cole laid out the webpage the way he did.  I still am not entirely sure if each individual panel is a new project or if they connect in some manner.  So that could be more clear so the user understands what was a complete project.  I believe that using his name as a page break was very smart as it continues to remind the user of the artist while easily covering the transition from one block color to another.  He uses contrast intelligently throughout the webpage, especially on the about me and contact pages because he loses all color except his personal photo and everything is black and white.  Contrast is definitely the element he relied on heavily for his entire webpage and I think it was used well.  Overall the website is eye-catching and easy to follow along.

 

Posted on

Interaction Design Documentary

In class we watched a documentary that focused on interaction design through it’s progress and evolution and influence with the user. The documentary featured several well-known and respected designers who used interaction design in various different forms. There were a few different points made throughout the film that I either agreed or disagreed or made me think a little harder. One point which was very strongly projected was that design is the search for form; and that form follows function. I suppose that in its simplest, most easy to understand terms, that yes, design is the search for form. Whether it be digital, traditional, interaction; design is a consistent search for a an answer, or a solution to a problem. I thought that the statement that form follows function was interesting, mostly just in the wording. I’ve never thought of it before, but it makes complete sense now, that any object, item or idea has a function and a purpose. If the form can’t fit the function or doesn’t allow for the function to occur anymore, then it’s overall design is purposeless.
One aspect of the documentary that really opened my eyes was the recreation/redesign of common household items. For example, in the beginning, there was a focus on a set of hand trimmers. I didn’t realize how many steps needed to be taken. It starts with finding a problem or finding a task that could be made easier. Once this is established there is a long experimentation process where the team finds the best solution. From here it is executed with 3d modeling and prototypes to make sure every aspect is covered before the product is ready for production. I have so much more appreciation for this area and how much brain power it takes to not just create, but recreate in a more positive way. I found it kind of sad that this type of design and thinking isn’t as common. Because of the level of intensity and hours spent, this is very financially taxing and a lot of businesses and companies cannot afford to hire people in these fields. Because money is an issue, we as a society choose to settle with the cheapest alternative even if the design and function suffer.

Posted on

Chapters 3,4, and 5

  1. Ethnographic tools would need to relate back to the company culture and habits. There should be quick links to the most common used pages of the site/ services. The website should also show a safe and reliable theme. If it is a bank, they want to be seen as safe and trust worthy by their users.
  2. There can always be improvements to designs, so designs are never fully don’t. A successful design is one that incorporates all of the components in the user-product interaction (user, product, and context of use).   The purpose is to give the user a pleasant experience.
  3. The product family I use regularly is facial soap. I either use 2 brands, Neutrogena or CeraVe. Both of these brands brand themselves as natural, chemical free, and healthy for your skin, especially for sensitive skin. As I have sensitive skin, it does not make me break out and makes my skin feel great. I may only be limited to these two brands, but I do not actively look for something else because I have had nothing but great experiences with these products.
Posted on

Review #2: Keep Portland Weird

For this review, I chose Keep Portland Weird. It was one of the first ones on the page, so I clicked on it, and was immediately intrigued by the site. It opens up with an animation, then one click allows you to enter the website. It comes up with a list of the alphabet, which totally caught me off guard at first, but each letter lists a different thing to do or about the city. Each letter is a different color, but none of the colors fight with each other, and come from an analogous color scheme. Chapter 2 discussed the different feelings given by each color, which was definitely utilized when choosing a color to fit the letter. For example, C is for crocheting, which is a calming activity, and is represented in a blue color. The text said blue is a color that can give a sense of calmness. Also, the letters have a background that appears like a pattern, but is an image from what the letter is describing. It is very clever and a great way to get the user to click on the letter. It is also super great because each letter is different already, and then once the letter is clicked on, it pops up with its own analogous color scheme. A short description is given, and a button is displayed in the upper left corner to go back to the home page, or there are up and down arrows on the right side to navigate forward or backwards through the letters. There is basically no room for user error, which makes the site extremely easy to use. I love it and think it is so so beautiful and well done.

Posted on

Website Review #2- http://www.federicoguzzardi.com/

For my second website review we had to chose a one page site so I chose the portfolio website of Visual and Web Designer; Federico Guzzardi (http://www.federicoguzzardi.com/). I am a very big fan of the way that this site looks especially because of how minimalistic yet modern the site is. The main colors that he uses for his website are white and a darker greenish/blue for the color correction that he has applied to the images on his site. I am a fan of this because it keeps it simple and clean and doesn’t cause your eyes to go absolutely crazy when you are looking at this website. The navigation for this site is just a simple parallax scrolling site but the transition from one section to the other is very clean and nice looking in my opinion. Each header for each section sort of appears with an animation as you scroll which makes the experience a lot more interesting and entertaining rather than all of the information just being there.

Another thing that I really like about the site is the fact that once you get to his work it is all very clean and organized. Everything is spaced nicely and if you hover over the project you get a title and description of the type of project which I think is nice. It allows you to get an idea of what the project is but if you want to see more you have to click on the project to see the full thing. Overall I think the design of Federico’s site is done very well and is presented in a way that is minimalistic and organized and is very easy on the eye and allows you to really enjoy not only his work but also the site itself which is really nice.

Posted on

Thoughts on Interaction Design: Chapters 3, 4, and 5

  • What information can ethnographic tools give you to improve the interactivity of an online banking website?
  • At what point is a design finished? What makes it a success? What is its purpose?
  • Identify a product family you use regularly. How has its branding effected your use, relationship and experience with the product?
  1. By using ethnographic tools one can gather information on what users of an online banking website do and why they do it. By learning more information about the website’s users one can easily make changes to improve the interactivity of the banking website.
  2. Design is finished when the product is ready to be marketed. Design is considered a success when the product becomes a functional advocate to humanity. Designs purpose is to “create usable, useful and desirable creations”.
  3. A product family that I regularly use are the Apple Iphones. The Iphone’s branding has helped attach me to the product due to the luxurious easy to use marketing appeal.

 

 

 

Posted on

Review 2: Single Page Site

Z Creative Labs

Z Creative Labs’ single page site uses only black, white, gray, and pink in terms of color. The page scrolls from top to bottom. Along the side of the page there is a navigation bar that has an arrow pointing down to further emphasize the way the page is meant to be navigated. As you scroll there is a “Get in Touch” button in the top right corner that is clickable to contact the creators. At the bottom right corner there is a “Return to Top of Page” arrow that moves with you as you scroll. Most importantly, Z Creative Labs’ logo scrolls with you along the top left of the page.There are drawings that are “drawn” in the background of each section of the site to match the information that is being provided. These drawings are moving and are actively “drawn” when you scroll over its section. All of the drawings and uniform colors provide a sense of unity in terms of design. As you scroll down the page the title of the subject is in bright pink and is the largest font size in each section, which makes it easy to scan and read and see if it is the information you are seeking. The content is very straightforward and written in in a way that is easy to understand with common, everyday terminology.

 

The single page site for Z Creative Labs creatively depicts their company’s purpose in a creative and effective way. The consistency with color, graphics, movement, navigation, and scrolling capabilities works for them. It is easy for any user to find the information they seek. The site is easy to scan, read, and interpret the content provided. The site is easily navigated due to the scrolling, navigation bar, and clickability.

 

Posted on

Objectified

“Objectified” is a feature length documentary about the role that objects play in our everyday lives while also examining the creative people who design them. Each designer interviewed talked about the importance of the design process and how it effects ones everyday life. At first I thought it was a little ridiculous of the designer’s to stress how important the design process is until I thought about it. It wasn’t until I realized that every object I use everyday had to have been designed by someone with the intent to satisfy the user that I started to agreed with the designers. The designers definitely helped me change the way I think about design as well as gain more respect for the people designing today. First off I had no idea how important subjects such as Sociology, Psychology, and Philosophy were in the design field. “Objectified” taught me that design is so much more than creating objects, but understanding people and how they interact with the world around them. Before watching “Objectified” I would have defined design as the process it takes to turn a idea into a physical object. Now I would define design as the overall process of studying how people interact to create an object that meets the aesthetic, functional, economic, and sociopolitical needs of the consumer. Overall “Objectified” helped me to understand the real need for designers in todays society.

Posted on

Objectified

 

After watching “Objectified”, my views on the interactive world changed a lot. I learned that the key to designing is that the goal of creating is to design something that is different than what’s common. When designers are brainstorming ideas, they can’t just think about the average person that it would be using it, they should consider the extremes. They used an example of not making a product the average person, say 22 years old, would be able to use—they want to create something that somebody even with arthritis could use. It taught me that even though as designers we put a ton of thought into our product, we shouldn’t over-design it. The product should be fairly easy to use and make sense to the user—it should feel natural. We as designers should look at a design in a formal way. Although we want the product to look appealing, we have to also look at what it does—function vs form. Sometimes a product might look appealing, but it will do what it is supposed to. Also, designers need to take the future into consideration. You want to create a product that lasts, but only an amount of time until the designer feels it should be replaced. The product should be able to be used in a year or two years after the purchase without being outdated.  “Objectified” taught me a lot about being a designer and entering the field I am going into.

Posted on

Torchia Review 2

Review 2

Morgan Torchia

The website I chose to review was “The Wedding of Ashley and Jeff.” The overall design of the website really accentuates the theme of love and marriage throughout the entire single page site. The layout consists of of two short bios about each person, and as you scroll down you gather all the wedding details.

I enjoyed the use of color in this website. It was very light and clean with nothing standing out too much, taking away from the content. I would’ve liked to see a few more pops of color, just for some added flare, but overall it worked well. The layout and overall organization worked well. The pictures served as a nice break between content, and all of it was organized thoroughly.

The website starts off with a nice big picture of the couple and the wedding date, immediately establishing who the website is about. Next you scroll down and learn a little about each one of them. To break up the content, there’s a quote off to the side and a few pictures as you continue down. It ends with wedding details, the schedule, and the couple’s registry. It is organized very well so nobody can get confused about the information.

Overall the website is very nice. The layout works for the content in it and the it is very easy to navigate through. There is nothing overly flashy, but for a wedding website it is very clean and too the point.

Posted on

Chapter 3,4,5 reading responses

  • What information can ethnographic tools give you to improve the interactivity of an online banking website? (pp. 48-54)

The different types of diagrams can help give information to improve interactivity of a banking website. An ecosystem diagram (pg 48) gives user engagement points. It illustrates the various system touch points, and can give the banking site information on how to structure things. It will show them how the user will interact with their site and find them. This is valuable information and can help improve the relationships between users and the their interaction choices. A journey map (pg 50) actually describes the sequences the users take as they go through the different touch points. This is used to hypothesize how this site will be found, navigated, and learned. This can help the site focus on how intuitive they need to make the site, where to place the site, and the process that users go through. It can help with best case-scenario steps, or focus on failures and deviant paths to help make the site more interactive. This can help direct users to the right place.

  • At what point is a design finished? What makes it a success? What is its purpose? (pp. 54-62)

A factor of success in design is the relation from form to function. Can you convince users that the form you created is what it is supposed to look like? If form does not relate to function anymore, how can you relate form to emotional and social qualities? These are important questions to answer in design. (pg 56). The proper understanding and use of signification also plays a role in success (pg 56). Design can have a lasting and substantial effect on the world. Every design decision matters. (pg 57). Visual form is one of the most basic methods to be successful. The purpose of design is to improve all aspects of human life. (pg 60). Design has many stages, but is finished when it begins influencing the outside world. In a sense though, it can never be finished if the design has longstanding effects on the world.

 

  • Identify a product family you use regularly (can be anything from technology to consumables except for coffee). How has its branding effected your use, relationship and experience with the product? (pp. 78-84)

Labtops: The branding, particularly by apple, has affected my relationship and use of the product. Apple markets with a lot of integrity and attention to detail (pg 79-82). They focus on the most minute details and have created a strong trust between their products and consumers. This affects how I view my labtop, and enhances the experience of using it. I feel very mindful when using it, there is no unnecessary clutter or details. Everything is very sleek, professional and virtually perfect, which in turn makes the experience a very smooth feeling to it. Using my Macbook for designing makes me feel more professional. This is because of their marketing and design choices. Apple pays attention to the concept that consumers will pay the premium price for the premium experience (pg 82). I did not really enjoy the price, but the experience definitely is worth the price and then some. It creates a poetic interaction, which keeps bringing me into their products (pg 83).

Posted on

Review 2

For the second review I chose the website Keep Portland Weird: Earthquake Preparedness. When you first open the website you are greeted with a loading diamond shape and then the page automatically scrolls down to a enter button. There you can click which enters you into the site and then you get lowered into another page that has the alphabet. When you click on one of the individual letters it drops you to a different page that lists that activity that is coordinated with that letter. This website is very colorful and has very nice artwork. The colors all work together and are all pastel like, the colors change as you scroll through different pages. When you are navigating through you also see the different graphics change when you select a letter, the graphics range from different bars of colors that start at the bottom and it takes you to that page. Each of the different letters have their own color scheme. This website isn’t scrollable able, it is only accessible through clicking the different boxes.  When looking through the different subjects you are able to share them through social media. The textures thought the whole piece were  very attractive and they are the pictures from the interactive pages. The background images throughout the whole website are very cool, they are all the art work made up for the select pages or the devastation from the earthquakes. The content through the piece is every read because you have a picture of the item and the text matches the color scheme of that letter.

Overall I would say that this website is very well done. They did a very good job with the overall design of the whole page. Being able to interact throughout the whole website through clicking while also getting the effect of movement through the whole piece. It was very nice to be able to navigate and read each part easily.