Portfolio Site Lecture: Print to Screen

Presently, we are limiting our design to the screen size and are heading towards more print looking websites.

However we don't have to be limited on the screen size
  • We could create side scroller websites which was predominately created in the 90's. 
  • Using AR this enables the viewer to go into our websites.
  • Parallax designs gives us a wider view of space.
Using Rich Media can be used to make our portfolio site more exciting:
  • Audio
  • Video/YouTube Videos
  • Animation
  • Visuals
  • Image Galleries 
  • Facebook components
  • Google map components
  • Lead capture - collecting information
  • Contact easily using click to call components 
We went over the design process for our website
When developing our website we can use the following methods:

  • Sketching - express and elaborating our ideas. Formalise our sketches creating a digital sketch. Concepts sketches for planning.
  • Storyboards - user storyboard for interface design. Create a user persona and how the user will use and interact with the website. (Can use an application storyboard template)
  • UI Mockups - digital/hand drawn user testing through wireframes.
  • UI Concept MockUp - showing how the app would work using a video.
  • Interaction Flows - step by step through the user journey. (giffy)
  • Paper Prototypes - quick method when team working etc.
  • Interactive Prototypes - Digital app mockup used for user testing.
  • Final Native App - Finished product.



Image anchors - are used to draw your attention towards the content of the site.
Composition Principles - are important in how images are orientated in the site.

 Layout composition - Gestalt Laws (CRAP design used as a checklist for website layouts)
Contrast - avoid using congruence colours, use different fonts e.g. serif fonts for content, sans serif fonts for titles and different contrasting shapes.
Repetition - repeat lines, fonts, shapes for a balanced site.
Alignment - avoid centring text, alignment using the grid.
Proximity - how close elements are to each other.

Mobile Responsive
Designing for landscape and portrait for desktop and mobile.
Menu reduces to the hamburger menu on a mobile due to the screen size. Commonly this menu is on the right-top as this is easier for our thumb to reach the top of the screen (If the individual is right handed).
Fluid focussed grids used to see how a webpage drops the columns down from a desktop site to a mobile site depending on what's the most important.


Layout Shifter Grids - When information needs to be shifted completely you may want to use a different type of grid system. A dropdown menu may be best used in this situation.

Tiny Tweeks Grids - Scaled down layout - no difference between the desktop and the mobile site.


Off Canvas Grids - where you can swipe across to reveal a new content area.
If the site is not a web app, the operating system may work differently with general user interactions on different phones which will need to be considered if this layout grid is used.


Natural Gestures have to be considered when designing for mobiles. We are leaning towards using natural methods of input. If we wanted to include this in our website then creating a diagram is the best way to map this out. User testing on young children can be beneficial to find out how natural the interaction of the app is.


Semantic time notifications - Allowing location information on your phone to give you information e.g. discounts at a store.

Comments

Post a Comment

Popular posts from this blog

Unity Project 4: Ball platformer game

Image
Finished game displayed in the scene view. Scene view Assets Uses Rigidbody so that the ball can use physics (Gravity) therefore it doesn't fall through the ground. The 'Rolling Ball' script is attached to the ball which adds force to the ball. Ball Inspector Scene view displaying the invisible cube object which can be used as a trigger for an event. Scene view When the console prints 'COLLIDED', the ball has collided with a specific object (Invisible cube). Console Message The invisible cube that is attached to the 'Trigger' script. When an object does not have a mesh renderer, the object becomes invisible as we cannot see it due to it not having a mesh. Cube Inspector Field of view changed, so that the ball can be seen from a slightly different angle. Follow target script also attached allowing a first person type view of the ball as the camera is set to follow the ball's movement. The camera can be moved so tha
Read more

[Research] Traditional Poster Design (4CTA1214)

Image
As you can see from the superman poster, there are only four main colours used which includes red, blue, yellow and brown. All elements are filled in with block colours with no shading which was a common colour theme for traditional posters of this kind. This poster may have been used to advertise a new Superman comic or movie depending on the year it was created. The expression on the characters face fits the title shown on the poster explaining that he is returning. This poster advertised Coca Cola, and looks as though this specific poster was used in the USA - due to the currency used. The whole aim of the poster is to incorporate this drink into working peoples daily lives. This is seen by the slogan, 'Work refreshed' and the small graphics on the bottom right of the poster. Displayed is a man working in a factory environment and a lady is working in an office environment both drinking cola during their breaks - to feel refreshed. In some ways the bottle and
Read more