reginazambrano-blog1 - Tumblr blog

[reginazambrano-blog1]

Project 3

The purpose of this project is to create a responsive portfolio website.

Part 1 | Research

The first step was to conduct research by looking at other portfolio websites, highlight things we liked and creating wireframe sketches of them.

Part 2 | Wireframe Sketches

Based on inspiration from research and other wireframe sketches, I created the ones I wanted for the website. After this, I proceeded to code the website based on this.

Part 3 | Style Tiles

Now to start with the design, I created different style tiles to serve as inspiration for the digital mockup.

Part 4 | Mockup

After receiving feedback from people, I changed the direction of the style tiles and created a digital mock up.

Part 5 | Coding and Final!

After knowing how it would look like, I proceeded to doing the coding and changing things around as needed.

Link to the final live website

[reginazambrano-blog1]

Project 2 | Game/Learning Tool

The purpose of this project is to create an interactive learning, gaming, or informative website using touch (and clicks) as methods for exploring and configuring solutions.

Part 1 | Sketching and Ideation

We started off the project with a brainstorming and ideation session. This included making lists about things we learned in school when we were younger and making lists about things we do on a daily basis. Then I choose the 6 ideas I liked best and went on to create rough wireframe scketches to see how the idea would look like on a website.

Part 2 | User Testing

After choosing the idea I like best, in this case Sudoku, I went on to create a paper prototype of the different pages I would want so I could test my idea with people. Here are the two videos of my user testing sessions. From these sessions I did get some feedback and other ideas that I could implement or change from my original idea to make this more user friendly.

User Testing 1

User Testing 2

Part 3 | Digital Wireframes

After getting the feedback, I started coding. First I created a static digital wireframe on XD of what I would want my pages to look like and then, based on that, I coded it and made it a website to start testing the interactions.

Part 4 | Moodboards and Style Tiles

Now that the skeleton was done, I had to decide how the website would look. I went and created two mood boards and chose the one I liked best to then go ahead and create 3 different style tiles inspired by that moodboard.

Part 5 | Static Digital Layout

Now that I knew the style I wanted my website to be in, I went on to XD again but modified the previous wireframe and styled it how I would like it to be, insipired by my chosen style tile.

Part 6 | Final Coded Site

Now that I knew how the specific elements would look like, I went back to coding and styling the existing digital wireframe to end up with the final product.

Link to the final live website

[reginazambrano-blog1]

Project 1

The purpose of this first project is to design a iPad size poster depicting a letterform of our choice in order to understand and manipulate screen-based media.

Part 1 | Selecting the Letterform

The first step of this project was to find a letterform or character that I would like to use for this project from either Google Fonts or Adobe Typekit. So I started by choosing 6 different letterforms from different typefaces. Here are the 6 I went with (you can click on them to view them larger). Out of these 6, I ended up choosing the number 5 with the typeface Prata from Google Fonts because I liked the unique characteristics in that number and that it closely ressembled the typeface Bodoni.

Part 2 | Research

After choosing the character I wanted to use for the project, I conducted research on the typeface, designer and style. In this case, there was not alot of information on the typeface or designer so I decided to complement my research with information on the style (Didone) of the typeface. Below you can see my complete research process.

Part 3 | Analysis Sketches

After conducting the research, I went on to develop different rough sketches of a visual analysis for my chosen character. I decided to try out very different analysis and ended up choosing the one that compares the Prata typeface with Bodoni.

Part 4 | Wireframe Sketches and Style Tiles

Now that I had all of the elements, I went on to create 5 different wireframe sketches. I decided to try horizontal and vertical styles. My main inspiration for these designs were fashion magazine layouts. Because I was not able to find a lot of information on the typeface Prata, I decided to stick with the recognition of the Didone style typefaces.

I also went on to create style tiles that I would use when developing the static digital layout and the final coded product.

Part 5 | Static Digital Layout

After choosing my favorite wireframe sketch, I started devloping a digital layout on Adobe XD. What ended up happening was that I did not like how the sketch looked digitally so I continued moving things around, using elements from different sketches, and ended up with my final layout.

Part 6 | Coding and Final Product

Finally, once all of the ideation was finished, I could now proceed to coding the website. I first started by creating a "skeleton" HTML code. Then started adding in some CSS. And finally added jQuery for the button. Along the way, I kept tweaking the HTML and CSS code to make sure the website was looking like the digital layout.

Link to the final live website