Showing posts with label web design. Show all posts
Showing posts with label web design. Show all posts

Friday, April 24, 2015

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.






Tuesday, March 24, 2015

What The Rising Use of Mobile Users Mean For Web Designers

  Looking at the user stats for our school site, it is apparent that the number of mobile users are increasing. While the majority of users visit on a desktop, the amount of mobile users have continued to increasingly surpass the amount of tablet users. This is probably due to the ease and accessibility to mobile devices. Every time I step out of the house or my car, I make sure I have my phone. Anytime I go to lunch I make sure I have my phone. Right before I go to bed I - yep, check my phone. Last week I went to a restaurant and they even recommended we use our phones to order our food. This is helpful to web designers, as it is now more important to make sure websites are responsive and have mobile friendly navigation.

  An important stat to focus on is how long mobile users stay on the site compared to non-mobile users. The bounce rate for mobile users continues to be the largest, almost 15% from the 2014 stats. In contradiction the amount of time a mobile user spends on the site continues to be the smallest. Compared to desktop users, mobile users stay on the site for almost half the amount of time. This is important for web designers to pay attention to, as mobile users aren't just perusing the site - they are looking for a specific, quick piece of information. This indicted that the mobile, responsive designs of websites must be clean and easy to navigate.

Friday, September 26, 2014

Content Management Systems

   A content management system is a web application that ensures the ease of creating and managing a website, for people who are not web designers. Usually a CMS is made up of two parts, the CMA element and CDA. The CMA allows the creator of the site to customize it without having to know how to code HTML. The CDA element takes the information and changes the creator made and keeps it updated. Some of the most widely used CMS programs are Wordpress, Joomla and Drupal. All three of these CMS are free and have great advantages and disadvantages based on skill level.
Screen Shot 2014-09-19 at 1.37.24 PM 
   Wordpress was released by Matt Mullenwegg in 2003 and has by far the most users, due to it's easy installation and choices for customization. As it is the most popular CMS, Wordpress has the most themes and plugins. It can be tailored to create a website or a blog. Wordpress is a highly recommended CMS for beginners. Users of Wordpress are not required to have any skill in coding in PHP and HTML. A giant advantage to Wordpress, is that Wordpress will host sites from it's own server.
Screen Shot 2014-09-19 at 1.37.36 PM

   Drupal was created in 2001 by Dries Buytaert. Like Wordpress, Drupal also offers a large amount of plugins. Out of "The Big Three", Drupal is considered the most technologically advanced and has the most flexible CMS. Users with at least a basic basis of knowledge in HTML, PHP and other programming languages have more control and flexibility considering customization and technicality in Drupal. Due to it versatility, Drupal fits the size and concept of any website.

Screen Shot 2014-09-19 at 1.36.58 PM   Joomla is the largest CMS for commerce and corporate sites. It kind of runs down the middle of Wordpress and Drupal. It does not require the amount of technical skills Drupal has and doesn't have as many themes and plugins as Wordpress, but is still a smooth operating CMS. Joomla makes it the easiest to set up a a social network or an online store. Joomla is the best CMS for those who desire a more powerful CMS than Wordpress, but want something easier to manage than Drupal.




Sources: Website Set Up, Tech Target

Monday, August 18, 2014

3 Sites, Then and Now

The first image is ebay in 2001. The first distinguishable difference between the old site and the current site, is there is now no side bar. ebay used to be solely an auction site, so a list of categories were crucial. A revised list of categories now resides at the top of the site and in a drop down menu. ebay essentially kept their same color scheme and logo with a few tweaks. The code for ebay has also changed a bit. Shown below, there is a meta tag for key words. Some words have been eliminated, but the sequence of the words have also changed. Orginally "ebay"was the last key word with "auction" being the first. Now it switched around, with "ebay" as the first and auction being the "last".

ebay 2001
ebay 2014
The next site is Twitter in 2006. The layout have significantly changed along with the logo. Twitter is now recognized by just a bird. Also Twitter is now mainly concentrated on as an app. The color scheme has also gone through many shades of blue and now shows no trace of chartreuse.. The homepage of Twitter used to show recent status updates as well. I remember when twitter first came out, I wondered why anyone would join a website based on status updates, now it is one of my most used apps. The code for Twitter used to be heavily based on separate divs, but is more prominent in javascript.
            
Twitter 2014
Twitter 2006

IMDb has continued to keep up with it's usability and layout, but now adding more graphics. Photos and graphics used to take ages to load, but now with faster internet they aren't a problem. The color scheme on the 2014 site has a more polished feel to it then the other one along with a more polished logo. IMDb has relatively kept their same logo, only changing the font and size. In the code, the old site had a lot of usage with tables. almost everything was kept in tables. In the new site, they heavily use iframes, giving users easy access to movie trailers and graphics.
IMDb 2002

IMDb 2014

Using sites like Wayback Machine, or any internet archive, give designers and curious minds alike a look back into the past. Internet archives have become a "yearbook" for graphic and web design. It's interesting and somewhat self satisfying to see how far design has come. It gives a chance to laugh at the earlier stages and compare sites to where they are now.















Wednesday, May 7, 2014

Extreme Homepage Makeover


MVHS 
    Over the past week I have been redesigning the home page of Mountain View High School (shown to the left). I decided to emulate the style of Design Republik's home page as I liked their clean and organized design as well as the color blocking. Mountain View had a nice banner, but the organization of the page was difficult to work with. The home page was essentially gobs of information with no structure. The site also lacked depth, and the gradient, embossed, drop shadow letters were begging to be redesigned. The site was not incredibly horrendous, but it did need to be updated into a more modern, appealing homepage.




Design Republik
  
 Flat design doesn't always work for everything, but I really liked the design of Design Republik. The site has attractive  minimalistic qualities and a user friendly layout (despite that it's in spanish). The color blocking is what caught my eye first and I thought that it would transfer well with  MVHS's red and blue scheme. My only concern with the colors was that the site might end up looking like The Fourth of July.


Logo Redesign
I worked on redesigning the logo first. I was a little unsure how to do a school logo utilizing a flat design esthetic, as most school logos are bold and have a lot of dimension and detail. The new school logo mimics Design Republik's logo quite well. I used the school's original "M" with the torro head in the middle, but added a plain white torro with a drop shadow in a plain black square. I kept the red and blue, but made the colors richer, to add some depth. The thin "Mountain View" offsets the bold "high school" as shown in Design Republik's logo. I decided to place the logo in the footer and in the slideshow photos.


Last Slide of Slideshow
Next I started on the site. I knew that I wanted to keep a slideshow on the front page. I thought this was a nice aspect of the original site. Design Republik also has slide show so I decided to add some graphics to the photos like they had. Finding photos for the slide show was a nightmare. I hoped that Mountain View would simply have a photo album on the site, but they don't. They do however have a separate pages for each school activity within pages of several other pages, and after you weave through that web you might be able to find a low resolution picture after you scroll all the way down (yeah, organization was a real issue). Weaving in and out of the MVHS's website was getting me no where so I took to google. I eventually found enough high quality pictures to use for the slideshow through random news articles they were in. I decided to add in the school's honor code in the slide show as well, which I think looks nice. The slideshow was created using java script.


Redesigned Home Page
The original school site lacked a lot of depth and since I was using a flat design approach to the redesign, I wasn't sure how to add depth. I decided on adding a drop shadow to the entire website container, which helps the page stand out a bit more. I condensed the 3 "blobs" of information they had on the front page into a bar above the footer, mimicking Design Republik's. This condensed the content and made it easer to navigate. I thoroughly enjoyed this project. It made me take a more structured approach to creating a website and mimicking other sites is good practice. 

Path: Taylor, Mallory > MVHS > index


Friday, April 25, 2014

HS Website Redesign

I will be redesigning Mountain View HS, website (and logo) in the style of Design Republik's website.





Tuesday, April 8, 2014

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.





Tuesday, February 18, 2014

CASA Superhero 5k Run: First Endorsement Website

     About 8 weeks ago, my friend Erin and I were approached by CASA of Kansas City. CASA (Court Appointed Special Advocates) is a wonderful organization that assists in legal cases involving abused children, giving them a voice in court. We were asked to create a website for their first ever Superhero 5k Run. A meeting was set for the date December 5th. It was a little nerve racking, this being our first endorsement project, but the women we met with could not have been more kind. We met with Di Topjon, the Events & Communications Manager for CASA of Johnson & Wyandotte Counties and Kris Mattern, their Marketing Chair. They informed us that the Event Planner for Jackson County, Lara Klover, could not make it to the meeting, but we would surely be in contact with her. Our first matter of discussion was when they would like the site to be up and how we would go about doing a WordPress site. Erin and I had never used WordPress, but liked the idea of experimenting with it. Also using WordPress allowed Erin and I to work on the website outside of the classroom. After the meeting our teacher Mr. Olson explained the bare bones of WordPress and let us go from there! 
     After messing around with WordPress, we became a bit more comfortable with it and started to add content. We received many emails regarding graphics, content, website layout and were encouraged to ask questions if in need of clarification (We asked many questions). This project was presented to us about 2 weeks before our winter break. We vowed to work on the site at least a couple hours while we were off. This would've gone as planned, but the domain name the server we had the site on expired over break. This prevented us from working on the site outside of the classroom. When we got back from break, Mr. Olson let us know what was going on. While we weren't able to work on the site outside of school, we were still able to work on it in school. This now meant that we would have to stay after school if we wanted to get hours in for the site. Staying after school actually helped us though. It gave us more time to marinate in a creative environment and we eventually changed the theme of the site. The theme we had changed the site to looked great and motivated us to work on the site even more. Erin had conflict with staying after school so I messed around with the design aspect of the theme, while she focused her attention on entering content. 
  Mr. Olson and Kris Mattern pushed through the complications of transferring the site to a new host and the site went live on February 11th. Working on this Project was a great experience and boosted our confidence as designers immensely. Getting "real-world-experience" is helpful in that it required us to step up to the plate and take charge. All together we ended up spending 56 hours on the site. Erin worked for 26 hours and I worked 30. Working on the CASA Superhero 5k Run website was an incredible and much enjoyed experience. 

The Website: CASA Superhero 5k Run

Screenshots:


















Wednesday, December 11, 2013

Texture In Web Design

Smashing Magazine recently released an article discussing the use of texture in web design here. In class we were asked to answer a series of questions regarding the article. 


Why have the benefits of texture sometimes been overlooked?
Texture, in the past, was often over used and used in inappropriate ways. This has “tainted” the use of texture in design today. Many designers feel that texture is not a necessary asset. While it is not always necessary, it can tie a website together and highlight the main focus points in a tasteful way.


What is the usual difference between a texture and a pattern?
A pattern is often a small repeatable element that will tile. A texture is usually much bigger and don’t typically repeat.


What are 2 ways to focus people’s attention using texture?
Texture have the power to highlight certain elements of a site. If a grunge texture is placed against a clean background, the grunge texture will stand out and draw people’s eye. In retrospect, if a clean element is placed on top of a texture, the clean element will draw focus.


How can texture enhance the structure of your information?
Texture enables designers to offset a crucial aspect of a site, or enhance the way information is presented. Specifically, texture can enhance the structure of information. Texture can guide the eye through contrast and imagining lines. This can make content easier to read, find and remember.


How does texture enhance the identity or atmosphere of a site?
Texture can become a trademark to a brand and “...put a face to the service…”. This creates a recognizable brand that has personality and taste.
Describe in your own words what is meant by the following tips:
  1. Maintain Legibility - make sure content is still prevalent
  2. Don’t Beat a Dead Horse - Don’t overuse texture so that it’s distracting
  3. Practice Means Improvement - Experiment with different textures and take risks
  4. If It Serves No Purpose, Take it Out - Make sure the texture serves a justifiable purpose. It should not just “be there”.
  5. Consider the Effect You Are Trying to Achieve - Think about what vibe the texture brings to the table
  6. Collect Resources so you Don’t Have to Search Later - Keep an array of resources for future reference
  7. Learn Masks - Experiment and learn the software
  8. Don’t Sacrifice Quality for Loading Time - A quality texture dominates slow loading time
  9. Choose Textures Logically - Use textures that are relevant to the kind of site being built
What are 3 different ways you can come up with your own texture images?
To come up with texture images from scratch you can use your own photos, scan different materials or experiment in photoshop.

Sites that use texture effectively:
- KEZ

Thursday, October 24, 2013

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




















Tuesday, October 22, 2013

Don't Make Me Think!

Don't Make Me Think!

A web page should not require the user to put effort into thinking about something that should be effortless. A web designers job is to eliminate a users "question marks" and make the navigation as easy as possible. The page should not only be self-evident, but self-explanatory.



This website has numerous problems with it. A lot of questions pop into my head when I look at only the homepage. First of all I have no clue where to look first. The four column layout is very distracting as well as the bold type in the boxes, not to mention the crazy amount of color. Another question this site provokes is "What is a link?" The scattered boxes in the four column layout could be links, but there is nothing to indicate they are clickable.  Pinesol


Another site that has many problems with it is the U.S. Versace site. From a design aspect, the background is incredibly busy; even though it is black and white it does not as as a background to the brightly colored boxes in the three column layout. Also many of the links are at the bottom of the page. This is not an issue when browsing, but if someone was looking specifically for something on this site, it would be ideal to have the links at the top of the page to ensure that the user finds what they are looking for quickly. Versace


RVCA's site has awful navigation. It is unclear what any of the linked boxes link to. You much hover over each one to see what the subject matter is. While the design is very clean and organized, it makes it hard to know what is clickable and what is not. RVCA's drop down menu for "shop" is a slightly transparent , textured background. This makes the text very hard to read and the grey font color does not help their case. RVCA