Letterhead Design

With the unusual way I have designed my envelopes and letter shape, I thought it would be an important stage to design the layout of the content itself. Therefore I studied some grid layouts (https://akbrodie.wordpress.com/2014/12/29/understanding-grids/) and started to mockup a few of my own. I knew that using the same colour across all the promotional material I produced was important, so I decided again, to use purple, I knew from the traditional letter, and the legal requirements of any business that sends a letter that it was important to include contact details on the letter, so I decided to use the way I had folder the paper to change the layout. I created a blank space on the left to begin with so that the main content was on the right, this is like a letter I found during my research and you can see this here:

You can see my first design is similar but removes the box from the left, it is below. I found by having the content of the letter so far across the page just seemed unbalanced so I scrapped it.

To create a design much more like the one I was inspired by I moved the informational section to the left but maintained the width of the column since from my previously research I knew it was important that the line width wasn’t too long as it would be easier to read. Also, I disliked the text being so close to the left  as I feel it didn’t work with what I’ve learnt from my research about white space and overall layout so I moved it over a bit to the right, you can see this edition below.

Then I started to consider the experience of opening the letter and taking the letter out of the envelope, I folded the paper into thirds, the way I was planning on doing, and realised the section I created on the front of the letter wasn’t quite a third so I changed that to be exactly one third. Next placed the letter in the envelope and pulled it out as if I was opening it fore the first time, I visualised my logo on the centre and coloured sections on the thirds above and below. My logo is purple and I wanted to have a consistency across my branding therefore I decided to have the coloured sections in purple too, this mean’t I had to move the logo on the letter because it didn’t stand out against the new background colour.

Advertisement

Adaptive, Fluid, Responsive or Static?

Responsive or Adaptive?

Responsive web design allows you to create a website that will adjust itself to fit the size of the browser regardless of the size of the screen. It means you code it once and it will flow more like a grid with images that will rescale themselves to fit the screen.

Adaptive web design is where you make lots of different versions of the same website so that it fits the different screen resolutions perfectly, while effectively gaining more control of the specific user experiences, it is time consuming. Adaptive design uses breakpoints that mean once you reach a predefined point, the layout will change to fit the screen again.

Something to take note of when making adaptive or responsive sites, is that they all use the same information but use styling to change the information. For example, an image is required at a large size, then the browser will resize it depending on the screen size. Therefore, when possible, it is important to use vectors. It is equally important to remember that you should always design for the desktop and then work smaller down to mobile rather than starting at mobile size.

So overall, fixed websites, the ones I am currently learning how to build have set widths and no media queries (allows the size to understand the size of the device it’s being used on). Fluid websites are a little different, they rely on percentages for relative widths to the browser itself, therefore they don’t need to you use media queries either. Adaptive are built to certain resolutions, then require media queries to determine the device or resolution, these usually rely on set or relative widths. Responsive seems to be a lot more focused on the actual resizing of the display as it is actually designed at multiple levels using again media queries and relative widths.

I found the utility http://www.liquidapsive.com/ which has the same design but allows you to change the way it is coded so you can see for yourself fluid, static, adaptive etc. This allowed me to find the negatives of using every type design. My first finding, one that I was already experiencing when designing my site was when you try to reduce the size of a static site;

Adaptive is time consuming and works well for smaller devices but as you can see there are white borders on each side of the design once you reach a certain size.

Liquid, because it uses percentages of the width works really well at larger sizes but starts to become illegible when you start to minimise it to a smaller level;

Finally, responsive seems to be the go to style as it works when the browser is both really large and really small.

Having understood the different types I thought it would be important to have a look at current responsive sites, as it was the best option from the four above.

Meti Design is a really nice responsive site complete with animation, smooth transitions and a nice 3D animation using frame loads like I noted previously in Sony’s Be Moved Campaign (https://akbrodie.wordpress.com/2014/10/15/website-analysis-4-dangersoffracking-com/). This makes the website look very professional and I found myself wanting one of the products they produce, whether that’s because of the website or not, I am unsure.Below you can see the different screen sizes effecting the page, and how similar the experience looks.

Skinny ties also have created very good responsive site that promotes the ties they sell. It works just like a responsive site should but has thew addition of a feature that I haven’t seen anywhere else. This feature being the fact that the rollover still works regardless of the screen size, I am unsure if this is pointless or not as when the screen sizes are smaller they generally are touch screen but it turns out that when used on a mobile, the rollover menus come up when the menu items are clicked on. Below you can see the images of the screen sizes and then the different sizes with the rollover menus.

 

Mry is probably my favourite out of the lot though, doing what my research said about starting with desktop and working your way down removing parts bit by bit. The desktop version is complete with zooming circles with flat colours and images in the background while the mobile version has none of this and turns into a box style, therefore creating to completely different experiences for the user depending on how they view the site. You can see this here;

 

References;

http://mry.com/

http://skinnyties.com/
http://www.metidesign.com/#