For this project I had to create a homepage for a ramen restaurant and then use that initial web layout to make mobile and tablet sized versions.
Final Work
![Final Web Layout](https://cdn.myportfolio.com/459f62b9-b32d-4312-a6cf-9f4689acd955/04def89b-c1ab-4c73-a559-53786439d4a7_rw_3840.jpg?h=fb7696c099e20b454435d89ba39daaba)
Final Web Layout
![Final Tablet Layout](https://cdn.myportfolio.com/459f62b9-b32d-4312-a6cf-9f4689acd955/d04e4210-b1e6-443d-b4b6-260be82f50f1_rw_1920.jpg?h=2dede28d2d62fb7da3082b71d5584bef)
Final Tablet Layout
![Final Mobile layout](https://cdn.myportfolio.com/459f62b9-b32d-4312-a6cf-9f4689acd955/cda14083-32da-44c6-a939-236a3a668261_rw_1200.jpg?h=ea8247b6ecebdfd874723448773bc0a8)
Final Mobile layout
My Process
To start off I created a wireframe to get the layout and general types of content I wanted into the website and how they would all work together. I also went and made a version with annotations so me and others could understand what the intention of each component.
![Wirefram](https://cdn.myportfolio.com/459f62b9-b32d-4312-a6cf-9f4689acd955/ac0f7262-4a0e-4fa6-9a8e-f2c6b4e02cca_rw_1920.png?h=51c813605c5f6bac582bb1e060e0efda)
Wirefram
![Wireframe With Annotations](https://cdn.myportfolio.com/459f62b9-b32d-4312-a6cf-9f4689acd955/76c4531c-8c6b-46ae-aa8f-19a48146184f_rw_1920.png?h=33cb4cc3e83c2df37052f48dc31b15c0)
Wireframe With Annotations
For the desktop version I took my ideas and general layout from the wireframe and reformatted some of them based off feedback and general look as I started inputting photos and text.
![Desktop Header](https://cdn.myportfolio.com/459f62b9-b32d-4312-a6cf-9f4689acd955/0f05bc8b-7eb9-47f1-96ac-0936008e92fa_rw_1200.jpg?h=053ebb26f7df08a31dc1be0c9b2e9594)
Desktop Header
![Cards on Desktop](https://cdn.myportfolio.com/459f62b9-b32d-4312-a6cf-9f4689acd955/9260920c-3ad1-4a54-9d3e-475c056cdf41_rw_1200.jpg?h=186cfd60461f52855313acb8d9bdefbc)
Cards on Desktop
![Slider on Desktop](https://cdn.myportfolio.com/459f62b9-b32d-4312-a6cf-9f4689acd955/33957e95-ae2c-4322-95c8-84c4276c0ab3_rw_1200.jpg?h=2181af98e348f9b90d2f4b893354b98b)
Slider on Desktop
Desktop Format Aspects
Moving on to the tablet format I took the desktop layout and took the aspects that would be affected most by the size and format change. For example, I reformatted the cards to a 2X2 grid in order to have them readable by the user. I also changed the grid format of the image gallery to that of a slider so that the images could easily show up. Some of the sizes of the images like the header and history of ramen image and I made them longer to make up for the shortened length from the new format.
![Tablet Header](https://cdn.myportfolio.com/459f62b9-b32d-4312-a6cf-9f4689acd955/edb986d5-a996-456a-a131-19b63819d32c_rw_1200.jpg?h=a09d02702169b6162d3f262f1ecafd28)
Tablet Header
![Tablet Cards](https://cdn.myportfolio.com/459f62b9-b32d-4312-a6cf-9f4689acd955/aea61171-2cf2-44fa-bdca-8646bb13fadd_rw_1200.jpg?h=b6e85f8f46d260baa04160cf2ae536af)
Tablet Cards
![Tablet Slider](https://cdn.myportfolio.com/459f62b9-b32d-4312-a6cf-9f4689acd955/12952ed7-8fee-4f39-bebb-ee125f4b77a0_rw_1200.jpg?h=948d699b73799d3ae573320bb8ec7bf9)
Tablet Slider
Tablet Format Aspects
Last I did the mobile format as it was an obvious follow up to the tablet size. Starting from the tablet size I then changed a few things like the cards I changed even further to have them in a single row to be readable and clickable as well. The other big thing I changed was the footer I reformatted all the information into vertical stacking so that all the information could be read and interacted with.
![Mobile Cards](https://cdn.myportfolio.com/459f62b9-b32d-4312-a6cf-9f4689acd955/b0ed7056-a091-4d2e-9c8d-cb4a16907abb_rw_1200.jpg?h=9387d6ded0089fe6eeed2b29b5df97d0)
Mobile Cards
![Mobile Slider and Footer](https://cdn.myportfolio.com/459f62b9-b32d-4312-a6cf-9f4689acd955/cec5fe67-2e43-43f3-895b-e9c7d756d8fc_rw_1200.jpg?h=18d568f2cb36ab72249e6eb6449ec570)
Mobile Slider and Footer
Mobile Format Aspects