The semantic web is definitely something that web designers need to be more conscious of. Designing on set grids is no longer pragmatic. As a designer, I need to focus less on set grids and work on optimizing CSS so that the site is still functional on multiple devices as well as having form.
In class there was a pop quiz to redesign the website & logo for Empire Blue Cross Blue Shield. Needless to say, the site is a mess. In terms of UX, it is poorly organized, and there are multiple links everywhere that lead to the same information. Wouldn’t it be better if there was only one location for each subject?
Furthermore, the home page is too cluttered with information–it’s hard to know where to start. Even though many people know that it is a health insurance company, it is best to assume that not everyone knows–this will make getting new customers easier for them. At least with the home page, it should only include the bare necessities: who they are, what the company stands for, what they offer, and a log in screen for members/ new members. the rest of the information on the current login screen is superfluous. Once one is navigating the site, you begin to realize that links are placed anywhere and everywhere–and there is a lot of useless information that does not really add to the functionality of the site as a health insurance company. For example, there is a ‘member news’ section, where it discusses members–in hopes of trying to create a community on their site. The site is not an appropriate platform for such uses, and so in my own redesign I will just leave that out. People seem to think that a lot of content means more substance. I have no idea why. A lot of it is unnecessary fluff. For me ( and I would think for many other web users) simplicity is a refreshing sight. It definitely makes navigation easier, and makes people happy that they don’t have to weed through a ton of words and pictures just to get to the link they are searching for.
In terms of design, there is a cohesive color scheme, but the format of the site is so outdated and boring–almost every single medical website seems to follow this drab format. With good design, it is possible NOT to sacrifice familiarity and user-friendliness while creating innovative designs. The logo is also in need of refurbishing. While it’s true that their logo is very recognizable, that does not make it aesthetically appealing.
These are some quickly drafted logos. I studied Visual psychology one semester, and I remember that one effective method in visual advertising is a simple, yet distinctive logo–mainly for its impressionability. I was going for that look.
I tried to make the home page as simple as possible, removed the superfluous elements from the original homepage, and decided to see what vertical navigation would look like instead of horizontal. Looking back, I feel like the navigation bar for pages other than the home page could be pushed off more to the side, and perhaps maybe made smaller.
Just a sidenote: the bottom picture bar would be flash, and it would change pictures every so often. In future mock ups, I will also include an internal search bar on every page.
Guest Speaker: Karen Kranack, Information Architect
Reflections of readings:
The 10 Most Common Misconceptions about User Experience Design
From reading this article, I realized that I am guilty of making those mistakes. I used to think that UX was basically the same as UI design–except it isn’t. UX is not just aesthetics/design/pretty packages wrapped with pink bows. UX is design that is functional and intuitive.
It is also a mistake to think that once a design team figures out the logistics of the UX for a project, that it is done. UX is never done–the process is always ongoing. As long as people are interacting with their environment–physical or digital, UX will always be salient. In a way, these definitions of UX remind me of industrial design concepts.
To sum up, UX is not equal to usability…
UX has to be useful, desirable, accessible, credible, findable, valuable.
The 5 Competencies of user Experience Design
This article goes over the different roles a designer plays in the site creation process. An Information Architect’s main job is to design the UI, and must keep the business, the product itself, and the user in mind when coming up with concepts. One question I found thought provoking was that not only does one have to think about the website by itself, but how the site, and how the UI you create actually can dictate the relationship of the business/product within a market setting.
In the section of Internet Designer, it shows how roles overlap, because in this role a person needs to understand UI patterns and components. The Visual Designer on the team, is the person who deals mainly with overarching presentation of the site ( communicates brand, hierarchy, typeface, context, etc.) The Usability Engineer tests user friendliness of a site, and if a user navigates a page in the way that the developers intended. A good technique of thinking in this way is to block out all other design roles, and to simply think as if one were simply a user of the site. In this way, more criticism can be made and alterations to the site could be made to fix errors of any kind. Prototyping is also of importance and should be considered as a method of time management when mocking up site designs.
Well yes–that is indeed a wire frame. Copper, I believe. Someone made it on Etsy 🙂 But those aren’t the kinds of wireframes we will be discussing here. In website design, wireframes are a way of visualizing a site before actually building one.
Wireframes:
How to wireframe?
Hand Drawn wireframes, 
or wireframes made on online wireframing tools such as Hotgloo, Cacoo, or Balsamiq. Adobe Photoshop and Illustrator are also good options.
Who is the audience of the site? How does the layout navigation and layout become more accessible for that demographic? What is the purpose of the site? Does the site successfully lead the user to the purpose? How does UX lead the user to the site’s purpose? Why is an element located on a spot on a page? Why does this page link to that page? Should that page be linking to what it is linking to? Why did I, as a designer, choose this layout? How do all of these elements come together to make a cohesive, well organized, and well-designed site?
My own wireframe examples:
For this assignment, we were instructed to learn about wireframes and then make 2 of our own. I made a couple to try my hand…
This wireframe is for the current website of Anthropologie. It’s one of their category pages ( i.e. clothing, accessories, furniture, and home decoration.). I’d say the site is well organized. I, as a shopper, can find everything I need easily, and I can sort by size, price, new arrivals, etc. Stripping the design to it’s structure makes the organization of content more visible than it was already. It’s clear that the site makers thought about the design and UX of the site in great detail.
The New York Times is a site I discussed in Assignment 1. This wireframe clearly demonstrates the cluttered visual–and this is their homepage! If it didn’t look crowded now, imagine it with text all over the place, along with images and ads scattered throughout.
In contrast to the NY Times, Hypebeast has a better visual aesthetic:it’s clean, well organized, and clearly follows a grid without being boring. This wireframe indicates that there is just enough balance in the figure/ground relationship–and the grid is removed from the realm of “boring” because the blocks of content are different sizes.
Part 2: Basics of the Internet
Webpages, and other documents or files are hosted in a variety of ways. They can either be stored in a single computer, or a group of servers, or even a remote web server. Connecting these individual computers and the data contained on them is what makes up a network. The internet is basically a network of all these networks, on a global level.When computers connect, or communicate information–they are recognized because of protocols. The TCP/IP, or Internet Protocol Suite is the communication standard. Each computer has an IP address, or an Internet Protocol address, and this is designated by the ISP ( internet service provider). IP addresses are 12 digit numbers, and they can be dynamic ( changes at specified times) or static ( never change). Being dynamic or static is a choice determined by the ISP chosen, and it is important if privacy of information is a top priority for a user.
So back to connecting to websites, a user connects under that IP address. Websites are found by typing domain names ( i.e. facebook.com) into web browsers ( i.e. Firefox, Google Chrome, Safari). In 1983, the DNS, or Domain Name System was created. The DNS automatically communicates to the computer the IP address of a typed in domain name. This makes internet browsing easier–because people did not have to input lengthy IP addresses when trying to locate a file, or site on the internet. Nowadays, to find a website, one simply types a URL into a web browser. A URL, or uniform resource locator, is the global address of documents and resources on the world wide web. URLs are made of 2 parts:
The 1st part is the protocol identifier, which allows the computer to understand how the file should be understood/recieved ( the formatting).The 2nd part is the resource name, which is the same as the domain name ( as input into the browser by a person searching the web.)
When outputting data into the web, routers are used. Routers are basically pathways between computers and their networks which ensure delivery to the correct destinations. Additionally, the Apache router is an http server, and is one of the main reasons why the internet has grown to the capacity that is has today.
Source: http://computer.howstuffworks.com/internet/basics/internet-infrastructure.htm
This is a very basic explanation of how connections are made to the internet, and I am still in the process of fully understanding the complexities of it all.
Part 3: Design Methodology
A big part of design incorporates the look and feel of a site. In order to keep people returning to your sites, user-friendliness is key:Part 4: Assignment 2 Review 
In review of Assignment 2: Abstraction, I would probably go more abstract in my interpretations and in my observation process of websites ( look for future changes to Assignment 2!). It was very helpful though, to understand the concept of abstraction as it relates to web design. When I created the above abstract image for the Hypebeast website, I was able to think in a very Kanindsky-esque style. I looked for the rhythm and balance between the elements on the page. I removed some of the rigidity of the grid format on which the site was constructed, and I came up with what you see here. The result reminded me of Mondrian’s art–and it revealed to me why I thought the website was aesthetically pleasing in the first place: there was such balance in form, and the elements were of varying shapes. On the actual site, there are fiercely straight lines, and images accompanied by text–but the underlying structure is still very much what I came up with in this abstraction exercise.
In terms of my manipulating the shapes in the second part of the assignment, I was not very abstract–and they ended up looking more like wireframes of sites instead of abstract images.
Another perspective of traditional design is the grid system, which is a very formulaic and structured way of dealing with design. In many ways, it is very different from abstraction.
For me, I think that it is possible to incorporate these different perspectives in the design process. Abstraction and thinking freely and more organically, even if that means starting web concepts on paper, is great because it allows for different website ideas to come forth. It refreshes the cookie cutter templates that are starting to crop up in terms of website design and site purpose, as I discussed earlier. The grid, then, could be used as a way to fine tune, or edit the rough ideas that come out of such an organic and free-form style of thinking.
Through this assignment, it became more clear as to how separating content from visuals makes the design process easier. But I also keep in mind how the content can often dictate the sort of design being used.
jesmingonzales 