Dinh Grid Layout Revision

960 Grid layout

For the 960 Grid layout, I darken the blue for the heading to increase increase it contrast from the background. I shorten the column width of the paragraph text to increase readability and removed the unnecessary bottom paragraph rule. I added in a pull quote to the right side of the grid to balance out the white space.

 Ipad Grid Layout

For the Ipad grid layout, the only changes I did was shortening the paragraph column width to increase readability and cropping the image to remove the high contrast spot on the left.

Iphone Grid Layout

For the Iphone grid layout, I decrease the opacity of the divider to pull it back from the design. I change the huge quotation color to blue to match with the text and align the name to the right to create a balance feels.

Varmac Layout reduxes

  

I felt that I had the right idea/s conceptually, so rather than try and fix what ain't broke, I opted instead for fine-tuning each layout and making them better. I got rid of the difficult to read typefaces, improved padding and balance, and I also changed the color of the iPhone layout to something that felt more fitting. Also, in the iPhone layout, the quote is removed from body and in the footer.

Fernandes_lastUpdate_blogProjects

Revised 960 Grid, IPad, and IPhone Layout - Midterm

To start, I didn't relate any of my designs to each other. I figured that the different colors and fonts would make it easier to see how these projects can be so flexible. 

My 960 Grid was actually kind of hard to redo. I felt like no matter where I moved my text boxes i was constantly covering some important part of the picture. I made it so the smaller mountains on the left and right side of my paragraphs created some sort of motion to the middle of the page where i replaced that text. I felt as though I should keep the white background and black text for the contact information because there are a lot of light and dark colors going on in the back that it would be hard to read without a background color. I also changed the position of the whole layout so that it wasn't crowing the right side of the page.

For the IPad Wide layout, I didn't change much. I grabbed another neutral color from the picture and replaced the big noticeable white background for "Women's Education" with a nice gray color. There was a black box inside of the white background as well that i decided to get rid of completely, and the font looked much better white instead of black on the gray background. I also made the weight of the rule smaller with the same color gray. I feel as though the way this design is set up now is much more welcoming to the eye with the neutral colors and subtle changes.

For the IPhone Layout redesign, I felt that connection was a major thing that needed to be established. Before, each colored background was not touching, making it seem a little bit like the boxes were telling each other to stay away (metaphorically). I took the purple background and extended it down behind the yellow quote box as well as up and showing past the main title. I repositioned the picture for a better fit. I definitely feel a stronger sense of unity in this layout now. 

Revisions, and iPhone Layout Design

So this week was tough for me, as far as time management, but anyway, I finally got all my layouts done. The biggest obstacle for me was getting my computer to function correctly while I wasn't at school, so I apologize. Enough of that, here are my two revised versions of my previous layouts, along with my iPhone layout. For the iPhone, I cut out some of the text, since it being smaller, most articles on the smaller screen would have a read more link to expand the rest of the text you're reading. So with that in mind, I tried it out.

Cinelli_iPhone Layout

Here are my iPhone layout designs. I had a little bit of difficultly with this assignment because there was not as much space in this layout. I'm so use to having a little more room to work with but I manage to make this layout kind of resemble a news article for the iPhone. I have two designs because I wanted to show the two ideas that I had the first being my initial idea for the design the second an idea that later popped into my head. I do feel the the second on is stronger, but i figured it could't hurt to share both of them. Please feel free to critique.

Pirperis_iPhone Grid Design

This layout was rather challenging because we were given quite a bit of text to work with, but not much space to put it all. After doing some research, I found that Central Asia Institute is more so targeting towards corporations and organizations. Not so much towards families and homes. With that in mind, I tried to give a professional, sophisticated look to the layout. I created the shapes with the slant edges, keeping that mountain theme throughout the design. I also pulled the different shades of blue from the photo since it was the more dominant color.

Tarr_IPhone Grid Design

For this layout, I was kind of skeptical at first. I researched real web pages on my iPhone to get a better feel for this project.

 As usual I took colors directly from the picture so that it would fit in with the overall look. I broke the main title apart and layered it, but also added drop shadows just to add a little definition to the page. I chose the handwritten font because it seems as though it fits the culture better than a proper looking typeface would. For the quote I used this font because I had the idea in my head that the person was actually writing the quote rather than just saying it.

I tried a few different things with this layout including having everything fit on the page instead of bleeding it off the page. I also used the picture very small in the layout rather than as a big background picture.

Varmac iPhone size

Hello yes I am a web student.

When I was thinking about this, I intended to use my actual iPhone as a guide, but the issue was that the template was not sized for an iPhone; the canvas is far too big, and iPhone screens are tiny. I tried to get the general gist of what I wanted to do instead of my actual vision.

I imagine this with parallax scrolling with the text box scrolling on an upper "layer" with larger, more appropriately sized text. The green is similar to the green they have on their site, and meant to stay in the background. The shadow exists for context for the text box. The logo is supposed to be transparent.

Dinh Iphone Grid Design

For this design, I was looking at long vertical flyer for inspiration. As for the color choice, I sample them off of the picture to create a unity feel. The most difficult part to this design I would have to say is the picture and the white space. I didn't know where to put the picture to create a more interesting look, and so I just place it next to the text block to balance it out. There was just so much white space left over at first that it make the design feel awkward, eventually I had it sorted out by spreading out the text element, but controlling those white space was a fun challenge to this project.