MA Graphic Design & Art Direction / Self Study: Front-end Development
Monday, 2 February 2015
Notes responsive design principle
website offers lots of inspiration for some top-notch responsive web designs.
Element 1 (base element) 100%
Element 2 / 3 / 4 80% of the base element
Element 5 / 6 55% of the base element
Next problem is the shift positions between portrait and landscape layout / how the elements work as a whole.
Give up control of the overall design and focus on the elements and the relationship between them.
That way no matter the size/ format of the canvas you still have rule in place that the design adhere to
When passing mock ups off to developers
The idea of a style guide might work, the ability to clearly explain the importance of each element in a hierarchy, how they react to one another and how they alter dependant on canvas orientation.
There would need to be a clear, percentage based, labelling system worked out where you had a base element that set the ratios of all the other elements.
"The Challenges a Responsive Web Brings
Working with responsive design isn’t without its challenges. First of all, there are such a multitude of devices and screen sizes that we have to cater for. From extra-large to large screens, from small to mid (and everything in between) there’s a lot to think about. And, as I’m sure you already know being a developer, working with responsive design from the technical side of things can also turn nightmare-ish and be extremely difficult to handle."
"Like with any project, the main things you need to think about with responsive web design are the content of the website, how this content fits into the design and how the content flows from page to page. You need to look at how the different design elements you have work together and ensure that everything feels cohesive and consistent.
The difference with responsive web design is that you also need to think about how all of this works from one size to another, whether that is width or height based. You need to think carefully about how all of this translates to a smaller or larger screen and how all of your design elements, your content flow and everything else works. You need to keep the experience consistent, no matter the size of the website.Maybe you could modularise the design and try and create a base element that is pertinent to the other elements"
Share to Twitter
Share to Facebook
Share to Pinterest
Post a Comment
Post Comments (Atom)