Design, Design and Pattern again!

The lecture for this week was design and design patterns for screens, with a new movement that aims to make for the small screens and scale up to a larger screen as this will allow for a more interactive and in-depth time for a user while they are on the site. This then can allow for the following designs and design patterns to be transitioned easier into a larger design then the other way around:mobile first

  • Responsive design has made a lot of designs look similar, they follow a clean simple look. An example of this is near all WordPress sites. An example of similar design is the hamburger button (which is the three lines stacked which opens a tab menu for other areas of a site), this button is used on basically all sites not just mobile now days and allows for the viewer to see more with the menu hidden away.
  • Another design that is commonly used is the account registration. This is something anyone who has an email, social media or even a WordPress site knows exactly what this is. Which is something that we all know the purpose and use for.
  • Scroll, or the long scroll is something that has come around due to the innovations of interactive mobile devices such as Apple IPhones as they have forced the user to scroll through the page/s and menu/s of a site or application to access it.
  • Card layouts are the rectangular or square boxes usually accompanied by a text box underneath and is made for an easier and simpler layout that is easily rearranged and changed. This layout was something that came around due to Pinterest and is part of Pinterest’s success as a website as it allows the user to see and read bite sized chunks of information that is targeted at them.
  • Hero images, as images that you see when you are on a splash page of a website or anywhere where an image would be either just as effective or more effective in getting across the sites thoughts and what it wants to say to a viewer. Sites like Nike use a hero image on their splash page to help sell the idea of Nike.
  • Animations are becoming wide-spread and used in nearly all sites to help with the load time between segments of a site to keep the user interacted and interested with the site. Examples of an animation would be the apple’s multi-coloured wheel that spins when loading, the windows white and blue bar with the green colour passing through and the white circle lines that make a complete circle when fully loaded.
  • Another form of animation are navigations and menus that are under the hamburger button
  • Hover animations are something used on a PC, not a smart device as they are made for the user to hover and not click to read the information
  • Galleries and Slideshows that depict photos/videos that can be seen in basically all photography websites and even on social media sites such as Facebook and Twitter.
  • Motion animation is used on sites to get the eye of the viewer as moving objects attract the eye. As it can also add interest and intrigue through visual higharched.
  • Scrolling background animations/videos are something that follows the user as they scroll down the page and the image follows and isn’t static.

Material design is made to be simple and easy accessible for a user to allow them to get where they want and navigate the site with ease and little to no issues at all.

Responsive design is something that allows for a site to be almost the same layout but keeps the look through variations of screen designs from PC’s to smart devices. They are typically clean designs that allow for this type of design to be applied easily.

Flat design. Is something that is encompassing in all these various designs just highlighted and allows for the sites to use these design ideas as it usually uses the minimalistic style to allow for the user to easily navigate along the site and allows for smooth transitions through the designs already discussed.

Advertisements
Design, Design and Pattern again!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s