Process of creating Mobile version of Wix website
In addition to previews bog post where I have talked about creating my Wix website for desktop version in this blog I will show I designed Mobile version.
When you go to mobile version it will be shown like an actual display of mobile phone so you can clearly see how it looks like. The tool bars are in same positions just with slightly differences. The right side of tool bar is the same.
In this case left side of tool bar contains:
- Menus & Pages
- Mobile Tools-here are quick action bars & button back to top
- Hidden Elements
- Page Layout Optimiser
 |
| Home page and tool bars |
Setting layout Home page
On Mobile Menus you can create different designs and effects, so I have experimented with them. You can see in images below that I have tried.
 |
| Customise Design |
 |
| Customise Design |
 |
| The design I have chosen in the end |
 |
| Defoliate text is lined up on left side |
 |
| I have decided to put text in the middle of the screen |
 |
| In the Mobile Text Settings the alignment was on the left side of the screen |
 |
| I chose to put the text alignment in the middle |
 |
| Between the bottom strip and footer was a big gap so I have fixed it |
 |
| Finish result - there is no gap |
 |
| Also I am following my linear and centred approach through the whole page and website |
 |
| The background picture is working perfectly on the desktop version however, in Mobile version it show like this |
 |
| I have decided to remove background from Mobile version |
 |
| The logo was as well on the left side so I moved it in the centre |
 |
| The logo is perfectly centred |
Biography page
As I said earlier the desktop and Mobile version are slightly different so I had to make few adjustments. The look of my Biography page is completely different from desktop to Mobile version. So on the desktop the text and the picture are in the same row, however on Mobile version you don't have that option. In Mobile version I put picture and text in the centre.
 |
| Text and the picture are not in the same positions |
 |
| Text and the picture are centred |
Portfolio page
The portfolio page had different gallery layout. I'm following the same concept of linear, centred and rule of thirds.
 |
| Different Gallery Layout |
 |
| Applying my concept to the Gallery Layout |
Contact Page
Luckily the contact page was fine so I didn't have to do any changes on this case.
 |
| Contact Page |
Project Pages
This page is still in process because my 2D and 3D projects are going to be here. Again I'm following my concept trough the whole website and each individual page.
 |
| Correcting the layout |
 |
| Centering the pictures and texts |
 |
| On Project Pages you can even add slide deck gallery |
I hope you did enjoy reading my designing process and creation of website, maybe even learn something new. The finished website will be live soon!
As we discussed in the lesson yesterday, the 2D 3D work isn't to be uploaded to the website, however you can add any old work you have created before you started with the DMUIC to showcase your skills. This is a good post showing the process - perhaps add a little reflection on the final outcome of the website changes.
ReplyDelete