Hot answers tagged

15

For anyone interested, you can achieve this effect by drawing a rectangle above your image. Then apply: Black fill at 70% opacity Background blur at about 25px


11

I mean from a UX standpoint I'd rather just not see the Product at all unless I enter some section for "Already Purchased." Or have it "grayed out" in some fashion. However for icon as requested I think just about any shopping element with a checkmark is appropriate. Not sure if this is only on Lollipop or all Android phones but here's what my Google Play ...


11

As promised: One idea is to use a bag with a checkmark on it. This conveys both the 'buy' context and the 'OK' message. For use online you could even use an SVG, or a combined Icon Font icon. Example:


9

Since the requirements change from time to time, it's always a good idea to refer to Apple's guidelines. There's an Affinity Designer template on my website that I've develop that exports the 18 sizes that are currently required for universal applications.


7

I think what you're looking for is very similar to this recent question: How to achieve a gradient in adobe illustrator The issue is that a lot of what seems flat in the latest UI trends really isn't. There are subtle gradients and hard edged shadows all over the place. As I noted in the comments, I think the main thing you are noticing is how your very ...


7

I use Illustrator for that. If the platform you are going to use supports SVG, go for it. Otherwise, here are some thoughts about how to create crisp raster UI elements using AI (JPG, PNG, etc). Mind you, I am a pixel picker and a bit obsessive at it. Make sure you create a document that is RGB to start with (as opposed to CMYK) so you can see the colours ...


6

Not all displays are equal. This is a problem in the desktop world, too. I got shiny new monitors last year, and looking at some of my old work now emphasizes just how poorly calibrated my monitors were at the time. My advice is to just accept it as something you can't control and ensure that there is sufficient contrast between your colors so that it ...


6

For optimum viewing, and given that you can't control what's below them, those buttons should really have a set, high contrast, background color/gradient. This would ensure that the text is always readable. You can also do away with the drop shadow on the type to provide a more upper-scale, fluid, appearance. Another alternative, if you want the photo to ...


5

First and foremost you should start at "Designing Great Apps" and "Designing for iOS". If you don't aware of these sources your app certainly will be rejected by Apple. What to use? Anything you are most familiar with, Illustrator, Photoshop, Pixelmator or any other app you can run, and better - on Retina display. You should perform a lot of searching and ...


5

I'd likely use some type of directional arrow. If they can swipe/pan in any direction, I'd have four arrows to show that. The following image from a google search is similar to what I'm imagining: If users can zoom as well you could pair it with a magnifying glass (though I'd connect the arrows): If it's just two directions you can use the same concept but ...


5

This is called a SlidingUpPanel - given that one has this sort of interaction behavior with the element in mind: https://pub.dev/packages/sliding_up_panel Searching for SlidingUpPanel as UI element delivers the best search results as well as the most ready to use components out of various frameworks.


4

From a visual point of view, a design doesn't have to be symmetrical to be balanced. Balance has to do with the weight of elements on both sides of an axis (or multiple quadrants). Check this other question for example. Elements with different sizes can still be balanced: You can also have an even number of elements that have the same size, but use other ...


4

There is a semi-automatic way to slice images, that is using the Slice Tool. You can use it to subdivide your file into blocks of icons: When you use File → Save For Web & Devices... Photoshop will export each slice as a separate image for you: This is a non-destructive method, so you can still make changes to the icons if needed and still use the ...


4

For a 2d side scrolling game. Vector style. Using Stencyl That is the key bit of info we needed! Looking at their documentation for animations it looks like animation is handled within the app--meaning that you create the individual animations yourself outside, then import them as individual frames. As such, it appears that the tool you need is a drawing ...


4

It looks like a huge, complex list, but there’s really only 5 sizes you need to build: 29pt 49pt 60pt 76pt 1024px The first four sizes (listed in points) need 1×, 2× and 3× versions (if you’re being future proof, as well as covering the iPhone 6 Plus). Some of the sizes you’ll see listed on the net and on Apple’s site are for iOS 6 and below (57×57 etc). ...


4

Naty's answer is close but since you're looking for the "correct distortion of a cylinder", you should use an actual cylinder. Illustrator has very limited (and sometimes buggy) 3D tools available, but this is a case where it has just what you need. In short, you should 3D extrude a circle and map the text around the cylinder that is created. To do this: 1....


4

Several iOS built-in fonts have monospaced digit characters, including the system default Helvetica Neue, Helvetica, Verdana, American Typewriter, Chalkboard SE, Copperplate, Gill Sans, Marker Felt, Trebuchet MS (and probably more)


4

This is called an "Action Sheet". You can read more about how to implement it on the Apple iOS Human Interface Guidelines site.


4

You need to create slices to tell whatever software you're using what is an asset and what not. Having a symbol doesn't necessarily mean it's an asset, a symbol could be anything from a product tile to a line of text. Your software can't magically tell what you think is an asset and what not, and exporting every layer is not only redundant but doesn't ...


4

Does the type have to stay white? You could merely set the type to yellow.. removing the star. Or if you wanted that outer glow, yellow type with a white glow...


4

If you have an Adobe CC account, you can use the Adobe Capture CC app to take a photo and vectorize it. The app is available for iOS and Android devices. With the app, you can take a photo of a hand drawn sketch on your mobile device, then vectorise it, and send it to Adobe Illustrator (the desktop app) direct from your mobile device. Of course you don't ...


3

It would appear your team has a communication problem on their hands. That said I would suggest you possibly integrate a meeting PRIOR to development. Since this is one sided I will suggest a variety of workflow methods that you should possibly consider if the communication is broken for the team. Project sit down - before a design -> development ...


3

As suggested by horatio we changed the off state of the button to be in the base layer. The button was changed to have no off state, and just an over state and it now degrades gracefully on touch based devices. That said, a lot of PDF readers built in to browsers, like the one in Chrome, will "helpfully" highlight buttons in a PDF, meaning that there is a ...


3

I can think of a few options. Pardon the simple samples: 1. Highlight the item as a block or add a border 2. Add an element ,for example an icon 3. Change the color of the title


3

Yes, if your asset is 55 pixels for the 1× size, then you'll be after 110 for 2× and 165 for 3×. The iPhone 6 Plus should be treated as a full 3× UI scale device. You should use a 1242 × 2208px canvas when designing a full screen mockup. This is because the iPhone 6 Plus renders internally to a larger virtual canvas, then bitmap scales the entire screen ...


3

You can do it in Affinity Designer, slices can scale their output, using suffixes, here is iOS icons export using the 'w' suffix:


3

I read from the iOS human design guidelines it's 44 x 44 pt? Because the confusing thing is Apple is using pts instead of px, so the question is, how large should I make it in Photoshop? 44 pt = 44 px? For non-Retina devices, 1 iOS point = 1 pixel. For Retina devices, 1 iOS point = 2 pixels. For Retina HD devices (iPhone 6 Plus only right now), 1 iOS ...


3

For points in Photoshop to match points for iOS and OS X native development, you’ll need the document’s DPI to be: For a 1× document (non-Retina), use 72DPI. For a 2× document (Retina), use 144DPI. For a 3× document (Retina HD), use 216DPI. Document DPI typically doesn’t matter (it’s pixel dimensions that matter), except when talking about points. Points ...


3

You will have to make sure you're using the right font type in PowerPoint as not all font types can be embedded. Note You can embed any TrueType font that is included with Microsoft Windows. Other TrueType fonts can be embedded if they do not have license restrictions. Other font types will not embed - How to embed fonts in PowerPoint


3

I was thinking you write out the words "Purchased" or "Already Purchased". You could design a graphic or just use CSS to make the design. Example: https://jsfiddle.net/cnhkagp4/ You could make the purchased tag themed to the layout of the site.


Only top voted, non community-wiki answers of a minimum length are eligible