Portfolio Site (Mobile) - UI/UX Design
9659
585
14
Published:
  • Add to Collection
  • Tools Used
  • About

    About

    What’s the point of having a really great desktop site? The modern web is device agnostic. And modern sites have to be the same. Big enough to im… Read More
    What’s the point of having a really great desktop site? The modern web is device agnostic. And modern sites have to be the same. Big enough to immerse you in experience and small enough to assist you with convenience. My task for the mobile version of my site meant transferring the design concept to a smaller screen and blending flexibility with fluidity. Read Less
    Published:
MOBILE WEB DESIGN: POCKET SIZED PORTFOLIO SITE
So how do you create a pocket sized portfolio site? I began by stripping away all the unnecessary frills, so that only the most essential experience and functionality is delivered. The conceptual tone of my personal portfolio site was initially shaped by this minimalist approach. You'll see this common concept run deeply through the user experience, as it begins on mobile and expands across larger screens and devices. As I began with this mobile first approach, I focused intently on creating a user experience built on finding the most relevant information, quickly and easily and then optimising the presentation of that information. As you explore the details of the site, you’ll discover intuitive UI tricks that turn the site into a pretty packed, pocket portfolio! Tap on…

*STICKY NOTE:
MOBILE WEB WORK FLOW

FINAL SITE ELEMENTS


SITE CONCEPT:
Minimise distraction. Maximise action. This was the premise of the minimalist design concept, that flowed throughout the site, which you will see presented in the project that preceded this. I wanted the UI for the site to be incredibly intuitive. As such, my mobile site design process began with a focus on extensive and intuitive UX research. Here's an elaboration of the tasks that were also performed during this phase. 
WIREFRAMES:
Once the site concept is completed, I start sketching out wireframes for the site.

Home Page  &  About Page
 (Left)                        (Right)
Portfolio Page &  Blog Page
          (Left)                      (Right)   
FINAL SITE MOCK UPS


HOME PAGE:
As you can see, this is more of a landing page with menu buttons that anticipate exactly what a mobile visitor would want to do. Mobile visitors are far more specific in their intentions when visiting the site. They often have very clear and concise goals when visiting a mobile site. 

I broke these down into 4 main tasks: 
1. Visitors would want to find out who the hell I am (About)
2. Check out my work (Portfolio)
3. Read my Blog (Blog)
4. Get in touch with me (Contact)

These main tasks then became separate pages in the desktop site. So one can clearly see, the mobile first approach and it’s application across different device platforms. The page layout for mobile is also very minimalist and has the creative consistency of the original concept.
ABOUT PAGE:
This allows users access to all the content on the page, at the flick of a finger. From a responsive point of view, this layout also allowed me to easily scale up the content for desktop and tablet screens and scale down the layout for mobile. 
MENU DROP DOWN
PORTFOLIO PAGE
BLOG PAGE
CONTACT PAGE:
This is a pop up, that speeds up the UX and makes the site quite snappy from a response point of view. All the necessary details are laid out to fit a mobile screen comfortably, while ensuring that it’s easy to read.
CONCLUSION:
Overall I think the optimisation efforts for the mobile version of the site does a great job of anticipating a users needs and presenting information in an easily accessible manner. The mobile first design concept also means that the minimalist style also comes through quite strongly, with plenty of white space on the page and no unnecessary items anywhere. This then allowed me to carry this theme through to the desktop site. All in all, I reckon it does form a pretty good-looking pocket portfolio!
Thank you for taking the time to view this project.
 Hitesh Jinabhai