Almost every big company and even small startups have their websites but not all of them are keeping up with the times and for sure not all of them have mobile-optimized websites with awesome user interfaces 📲
Making your website mobile-optimized means adaptation to the size of the phone or tablet screen. That involves changing the structure of your website and how elements interact with each other.
Mobile optimization and responsive website UI are extremely important now because the competition between mobile and desktop browsing has already been won by the former one.
Let’s think about main points which should be taken into consideration while designing an interface:
- Quick access to the core information. Mobile users usually don’t have a possibility to spend much time on the website. They are browsing in cars, buses, gyms (eventually everywhere). That’s why they require an instant access to the things they might be looking for.
- Smartly designed interface. Mobile surfing has its own disadvantages as well so the first thing a designer should think about is how to smooth them out! Relatively small size of the screen is one of such cons. The designer should place the most important icons on the screen and at the same time make them big enough in order users could accurately tap them. A real headache, right?
- Reduced amount of text-filling. Some users may experience problems with the tiny smartphone keyboards so it’s better to only ask them to fill such basic info as email/password etc (and only in cases when it is really necessary).
So how can we easily create a mobile UI design?
Here in Vectr we’ve made a small, functional and very common example of the user interface design which you will like for sure emoji unicode: 1f609
We created a fictional travel agency “Wanderlust” which unfortunately didn’t have responsive site before so we decided to help them out and created a mobile user interface for their website!
STEP 1
We took a nice picture of a travel destination and put it at the top of the page. For importing the image, click on Upload Image button in the left toolbar or just drag and drop it in Vectr. You may also import the files from the Internet with URL. Just copy the URL of the image and paste it into Vectr (command + V). Choose a picture which will create a specific atmosphere.
STEP 2
The next step is creating a background for the whole page. The colors of the picture and the background should match so you may use our Eyedropper in the Background section (right toolbar). It will help you easily pick a colour you prefer from the picture and apply it to the remaining part of the page. We created one GIF for steps #1 and #2 for you to see the whole process.
STEP 3
Then, add the name of your company or any additional essential short info and put it in the center of your image. Do it with the help of Text tool which is situated in the left toolbar. You can also enable Grid or Snapping for accuracy.
STEP 4
After creating the text we have to add a sidebar menu at the left top of the page. We strongly recommend to use the rounded rectangle shape as it looks cool and is easy to modify. Create one shape, resize and then use our shortcuts Ctrl C/Ctrl V for adding copies of this very shape. Pretty easy, right? emoji unicode: 1f60f
When you are done with the upper part of your design, move down and create a space for emails using the rectangle shape which is more preferable for this section.
STEP 5
Now it’s time to use Pen tool for adding Submit button. Click on the tool, create a box and add the text with our already well-known Text tool. Then draw a line using Pen tool for division of the section and change its colour to grey in the Background section.
STEP 6
At last, we ended up with adding the social network icons and some contact information (you can’t imagine how difficult it can be sometimes to find the logos whose colors match your design perfectly).
Whoa! How do you like it?We hope this article was useful and inspiring! Stay tuned, there are a lot of cool tutorials coming!
At Vectr, we know design connects people — we’ve experienced it firsthand — and we believe everyone should experience the almost indescribable feeling that comes from expressing your creative freedom through art and design. This belief drives everything we do.
Stay tuned with Vectr: follow us on Facebook and Twitter!
If you want to read the upcoming Medium articles by Vectr team, follow us here and like the post below!
