I'm an aspiring web designer. Today, my leadership, I was tasked to draw a mobile version of the site. But I don't even know where to start. I sketched out on paper that I want to see it, but how to implement it in photoshope — I have no idea. I would like to ask for your help and advice.
1. What width to create a layout for mobile devices.
2. What width to draw, if I want to look good on retina screens.
3. Can someone share a PSD mockup version of the website for mobile devices, so I relied on him.
On the Internet a lot of information about mobile versions of your website for web designers and programmers. But detailed recommendations for drawing layout for web designers I found.
Will give my five cents...
Start not from the resolution of the target screen - decide what kind of screen your future audience (for example it is possible to consider the 3.5" and above). Then pick a size on your monitor (that 1:1 corresponds to a physical screen). Then draw given that the proportions of the screens can vary, i.e., immediately calculate which blocks will be "reaching" and which are not. The dimensions of the tie to the percentage and not to pixels (half of the screen and the tablet will remain a half but 320 px on a retina display can become very small).
1. Make regular site considering that the monitor is very small
2. Do not use pixels (replacing them with ratios, percentages, etc.)
3. Consider that clicked a finger and not a mouse (read physical clicking finger)
4. Do not use smooth gradients, and are too close colors (gradient likely "zaprosit" and gamma blue, a little blue is difficult to read in different lighting)
5. Very well-designed navigation (beautiful menu screen on the floor is unlikely someone will appreciate).
All IMHO :)
p.s. You can see the design examples on various sites that sell templates have always represented both mobile and normal version.
taryn.Rober answered on October 3rd 19 at 02:41
Look at jquerymobile.com
Carlos_Walter answered on October 3rd 19 at 02:43
And access the statistics of visits You have? The same GA at least, to see which come most often from mobile devices and, based on this, start drawing the basic design. Most likely it will be resolution with a width of 320px or so.
marcus.Champlin53 answered on October 3rd 19 at 02:45
Use the screen of the iPhone. The web is easy to find the PSD with the finished frame.
For inspiration, for example, view the mobile version of Facebook.
pearl_Web answered on October 3rd 19 at 02:47
Go to templates bootstrap, and compress the window of any template when it is narrow enough, it turns out the mobile version ) I according to this principle drew its first mobile layout.
pearl_Web answered on October 3rd 19 at 02:49
On the website - to-door is very well made mobile version of the site, view it. I did on the basis of this website. And you can read also htmlbook.ru about how to create such designs websites