Lecture Three: Design Patterns for Screen


  • The “mobile first” approach has become rather popular in recent years. Essentially comprising of designing with the intent of it being for mobile. In a way, this method good to practice prioritising important elements over unnecessary ones and having a consistent design across all platforms.
  • Each design pattern helps the designer understand the possible outcome of the design. Is the solution to the problem solved? This is the main question that should be answered.
  • There are three types of interactive website designs,
    • Material Design: The main idea of material design is to create clean design and focus on user experience. It has a sense of depth and show in comparison to other forms of screen design.
    • Flat Design: Flat design is known to be very simplistic and have no dimension. It is very clean and is user-friendly.
    • Responsive Design: This is a generic form of digital design. It came to rise in popularity since the release of the smartphone. It allows a website to be mobile friendly and is inexpensive to create. However, a downside to this method of design, is that performance is is effected and the design is needs to be very simplistic. Some of the common features of this design method is the following:
      • Hamburger Menu: Three parallel lines on top of each other. Generally placed on the top left/right hand side of the page. It is an effective means of saving space on a page while allowing the user to easily navigate the website.
      • Account Registration: A form to fill out or button to link a social media account to the service the website is providing.
      • Long Scroll: Long scrolls allows one to tell a story to the user. What would’ve been the headings of the navigation bar, that when clicked takes the user to a new page is instead shown in a sectional format across one page, the home page. ¬†All of the content is split tidily and given headers to make it easy for the user to find the information they’re looking for.
      • Card Layouts: Originated by social media platform, Pinterest, this method allows the user to see multiple cards of content. The rectangular shape helps the design be more effective for a responsive design. Cards come in all shapes and sizes. They generally include a title, picture, icons and a maybe a sentence or two of text. Overall, they are basically condensed webpages.
      • Hero Images: Using a large high resolution image on a homepage instantly grabs the attention of the user.
      • Animation: A great way to reel in users, however must be used sparingly. Animations such as the loading sign while the user is waiting helps keep the user engaged as well as the slight animation that occurs when the hamburger button is clicked/touched. Other animations such as when the user hovers over an icon, however this is only operative on desktop as a mouse is required for it to activate. Or carousels, these galleries are effective when needing to show an extensive amount of imagery, ideal for portfolio or photography sites. These are just the tip of the iceberg, there are hundreds of animations to use and help keep the user interested. But NEVER use too many in a single project.