A Review of Webflow

  Webflow is quite the ideal website builder for those who have a bit of knowledge about designing and code. There is a small learning curve, but after spending an hour or two on the site, navigation becomes almost second nature. Webflows allows its user to start with a completely blank canvas or use a few of of the free templates they offer. A positive about Webflow is that while the main focus is to visually edit a site, there is also the option to focus on its code. It also allows the user to host the site on their own server.

  When creating a website in Webflow, the site takes you to what they call "The Designer". This is where the creation and customization of sites begin. Once of the most glorious features of Webflow is that it automatically makes the site responsive (see #1). The icons at the top of the page allow the user to manipulate the site and see what it looks like on a desktop, tablet or mobile device. Another nice feature of Webflow us that similar to dreamweaver, it tells the user what is being selected (see #2). Knowing what is selected is helpful in that it aids in making sure things being changed are supposed to be changed. Whatever is being selected will have a blue highlight around it and a small blue label in the upper left corner. Again, similar to Dreamweaver, Webflow has a small menu on the bottom left corner that also states what is being selected and edited.

  When in "The Designer" the user has two menus on either side of the screen. The one on the left, is to add divs, text, heading etc to the site (see #3). They are grouped into sub menus such as "basic" "typography" "media" and "forums". The on on the right is to edit whatever has been edited. To add something to the site, simply click on "add element" and drag out to the main part of the site.

  Then head over to the right side and customize it (see #4). Change the padding, height, color, type. Most adjustments can be done manually or just by clicking on the arrows featured on the right side menu. Like the left side, the right side menu is sorted into sub categories like "position" "typography" and background.

New and Improved

Last week's assignment was to improve and add to our blog. I typically lean towards more minimalist design, but the last layout of my blog was a bit to minimal. I didn't really have any color and my banner didn't reflect my aesthetic. The first change I made was I created a new header. I knew I wanted it to be my own photo, so I had a "mini shoot" when I shot potential photos I could use for a header. I also added some color and enlarged my nav bar.

Other changes I made include adding a background and labeling my posts. Labeling my posts will keep them a bit more organized and easy to find. I was unsure about adding a background, but I think it pairs well with my banner and the feel of my blog. 

The last couple changes I made were adding some code to get my Instagram to show up in my side bar and adding a portfolio link. I had a portfolio link in my nav bar before, but it hadn't been updated for a while. I also updated my bio and photo. 

Parallax In Web Design

    Parallax scrolling is a technique used in computer graphics, mainly video games. Parallax scrolling is done by creating background images that move slower than foreground images. This create an illusion of depth and interest. Now this scrolling technique has moved into the world of web design. With web design the effect occurs when various elements on a page move at different speeds. Websites that use parallax scrolling intrigue users and enhance the visual appeal.

    Despite the hype around parallax scrolling, some designers have issues with it. It is arguable the parallax scrolling can take away the functionality of a site or its usability. Since the whole site on one page, the amount of data is a concern too. Users may get tired of waiting for the page to load and hit "x" before they can even see the first heading. 

   Most of the time parallax sites are used for story telling, for informing. A lot of parallax site use symbols and images rather than large chunks of text. A website to enroll you child in school will most likely not have parallax scrolling, but a portfolio might. Adding the element of parallax scrolling is good for catching the user's attention. It creates and element of fun and can be looked a quickly. 

    Most parallax sites are create through a mix of html and javascript or jQuery. These computer programming languages aid in the animation of the scrolling. There are a variety of tutorials and even certain plug-ins that make it easy to create a parallax scrolling site.

Sony

The Beast

KC Redesigns Logo

   Graphic designer Emily Elmore has created much talk, regarding her new logo design for KC. Elmore provided this re-amped logo to the Kansas City government free of charge. Opinions about the logo came pouring in, and most of them were not pleasant. Many people have called the logo a "boring...monogram...". Despite the high criticism that surrounds her logo, Elmore has defended it stating "Any press is good press". 

    Redesigning has recently become a trend and many are leaning towards simplistic, contemporary designs. Elmore pulled from many sources of inspiration to create this new logo. The interlocking K and C reminisce of old sport team logos and the C and H found on the doors at city hall. The seriffed font keeps it somewhat traditional. Although the seriffed font ties the logo with some of Kansas City's past, the bright mint green is what some might call "contemporary". Kansas City is a city that has much depth, and it's logo should do it justice. Officials of Kansas City only see the redesign as an opportunity to bring the city and it's past into the 20th century. 

    I do not like the new logo at all. I don't feel that it embodies the vibe of Kansas City and it is an idea everyone has seen hundreds of times before. The interlocking K and C is an old design that has been around forever. The mint green and grey contrast very nicely, but I don't like them in a logo for Kansas City. The logo is very clean, but clean can also be a synonym for boring. Clean and simplistic design should still be eye catching and original. 

Designer of New KC Logo Rises Above the Tempest

Dont Make Me Think: Krug Ch.3

Krug Ch.3 Project

This website has lots of background noise. Even though the background is black and white it is still very distracting; the flashing graphics in the corner of the page do not help.Versace 

Google is one of the most well know sites and it is very easy to use. The main page really has only one clear purpose and that is to search something. The basic primary colors and white background eliminate distraction. Google

This website does not clearly indicate what is clickable. It appears that the underlined phrase "WIIFM" is clickable because's its underlined and bolded, it's not. Also because all of the content text is white it becomes hard to decipher what text is information and what are links. Natalie M. Fashion Show

MoMa has a nice site where you know immediately if something is clickable or not. Most of the links have a small red arrow or are in a different type in order to indicate if it is a link or not. MoMA

Pintrest is a site that has awful organization.  Nothing is split up into defined areas so the user must scroll through the site with their eyes "bouncing". This can be very inconvenient if the user is looking for something very specific. Pintrest

Lookbook is a fashion site that is very well organized. The navigation is incredibly easy and it is very easy to find a desired search. Lookbook allows users to search by clothing item, designer, date, color and country. Lookbook clearly defines where everything is and clearly shows what is offered in its layout.
Lookbook

8tracks is a site that uses conventions very well. They indicate a "+" sign to expand something, house to represent the link home, A triangle to indicate play and numerous others. Conventions with music sites can be especially recognizable. 8tracks

Apple takes a "less is more" approach to their website. This helps clarify a strong visual hierarchy. Apple uses bolded and enlarged text to draw the users eye to it and then gradually move down to the small text. Doing this allows the user to find what they need quickly. Apple

Design Case Study Summary

    Playground is a digital creative agency located in Canada. The company has been around for 4 years and is continuing to grow and expand. Playground helps their clients broaden the horizon in terms of creativity and innovation. The team at Playground is always looking to add a sense of exuberance to every project they work on and felt their branding should represent that. This year Playground decided to take on the task of rebranding.

PLAYGROUND LOGO CIRCA 2009

    First they started with the logo. The original logo for playground used a simple sans serif font in a standard shade of grey. The "O" in "Playground" was purple and elevated above the rest of the other letters. Light grey dashes are placed over the "G" and "R" so the "O" is depicted as a ball bouncing. While the logo was very playful and clean the colors made branding very limiting. While purple interprets a slight whimsical vibe, it is a very finite color and Playground desired to do more. The name of the company conceptually ties into Playgrounds approach to everything. The logo needed to represent the dual meaning of work and play. After a great deal of time the creative minds at the company came up with a logo they were very pleased with. The new logo illustrates a deep purple hexagon with rounded edges. Inside the hexagon a white scripted "P" is placed. To the right of the hexagon is "playground inc." is presented as a sans serif type face in black. Many people felt the new logo was a bad combination of the "P" in Pintrest and the hexagon in Simplebits. Eventually Playground realized they needed to push further and find a new, fresh and timeless identity for them to take ownership of.                                     

NEW PLAYGROUND LOGO

    Playground was left with ambition and inspiration from the branding work of Paul Rand and Massimo Vignelli. They took it upon themselves to create a simple, but bold logo that was both geometric and timeless. Playground felt the hexagonal "P" was very geometric and clean while the color red makes the brand appear very approacable. The color red doesn't have as many limits as purple giving the brand a fresh and fast feel. 

PLAYGROUND LOGO 2013

   Rebrand sounds like a death sentence yet it can launch a company into many new ares and provide new opportunities. I think that rebranding can either help or hurt a company. This is illustrated with the development of Playground's logo. If you look at Playground's logo from 2009 and then the 2013 one there is a notable difference and feel between the two. More and more companies are rebranding themselves, trying to create a new image for the new age. If anyone should learn anything from rebranding it should be that simplicity is often the better option. Simplicity doesn't mean a boring corporate logo, but something that is fresh and modern. 

LINKS: Playground Redefined, Mail Chimp Redesign, Designing Type Systems, Tour de France Posters