heading comes here

hahahah ooo badra bahar

ooooo ads daspdas da d asdsadasjdsd asd asjkdnasd askjdnasd daskldansd asdaslk dnalsdas dlknasd das d dasdasjda sdask dada dda dad a da

Text Copy

“What you say in your design is just as important as how it looks. Good copy can not only make an app easier to understand, but also gives it personality through the tone of voice used. Speaking to people like human beings, rather than machines, creates an emotional connection that results in a better experience with your product.”

Visual Hierarchy

Layout, colours and typography have a huge influence on what the eye is drawn to, and consequently how information is consumed. Think about what you want the user to look at on the page and in what order, then design around that hierarchy. Grab attention with high contrast and large, bold type, or push items back with lower contrast and smaller, lighter type. Culture also plays a part: for example Westerners will naturally start near the top left of a screen as that’s the way we read.


Typography is often overlooked in digital products, but since most information is conveyed through text it should be high on your list of priorities. Apply the same basic principles as for other mediums: is it a comfortable size for reading without squinting? Is there enough leading and are the line lengths short enough to make reading comfortable? Don’t just accept the default font settings in your design environment — treat type with the respect it deserves!

Aligning Text with Objects

Try to vertically centre text to an object using the x-height, rather than the cap height, as it gives a better optical alignment. In the Naughty example above you can see that the main visual weight of the typeface, located in the x-height area, sits lower than the square. The exception to this rule is text fixed to all caps or numbers — these can be aligned by cap height as they won’t feature descenders.

Object States

Remember that interactive elements will likely need some extra states in addition to the default one you provide in a mockup. These can vary depending on the platform and input method, but in any case try mocking them up while creating your design rather than leaving them as an afterthought — that way you can make sure their styling fits in with the rest of the design and works on an interaction level.

Navigation Content Structure

When creating the layout for a page, really think about why the user is there and what they’re looking for. Based on that, structure your content in such a way that the most important parts are the easiest to reach.

Navigation Titles

Clearly title pages so that users know where they are, as well as the context of the information presented to them.

Navigation Appropriate Page Sizes

Keep your content to an appropriate page size and try to introduce breaks where it makes sense. Scrolling through a page is much easier than linking between them, it also reduces the amount of page requests which will be beneficial to mobile users. Don’t make the pages too long though, as no one likes to endlessly flick up!

Navigation Limit Scrolling to One Direction

Make sure your content only scrolls in one direction — it’s easier both physically and mentally for users, as they won’t have to pan around trying to keep track of what they have and haven’t seen.


Creating labels for text-to-speech functions is an art form in itself. Make descriptions clear, so that users know what’s going on, but also concise so they don’t have to spend ages listening to them.

Navigation Labels Above Input Fields

Place labels above input fields rather than in them, as once there’s an entry in the latter, a screen reader won’t make as much sense to the user — it will only output the value entered, not the field name.

Interaction Buttons and Hyperlinks

Buttons are the commonly accepted method of initiating actions in applications, so opting for hyperlinks instead will confuse the user.

Interaction Buttons and Hyperlinks

And talking of hyperlinks, don’t underline text that isn’t a link, as again this can cause confusion. Users may think something is wrong when they tap it and nothing happens.

Error Prevention Design

It’s well worth trying to minimise errors that can occur while using your product. One of the best ways to do that is through design. There are various techniques available, such as placing useful elements at the fore and isolating or hiding those that can be risky; using warnings and confirmations as methods to prevent errors; and providing fail-safes should anything go wrong. Also, try to make users think about what they’re doing in important situations, rather than allowing them to cruise through on autopilot.

Error Prevention Checked Data

It’s sometimes difficult to input data on mobile devices due to their small size, so giving users an indication that what they’re entering is correct can be really useful.

Error Prevention Free Text

Where possible provide default values rather than free text entry, as it will reduce the chance of input errors.


It’s not just how your type looks but what it says that’s equally, if not more important. Unclear labelling or instructions confuse users, so spend time thinking about what you’re trying to communicate and if it’s being done effectively. In this Naughty example would you select Cancel to cancel the order, or does it cancel the cancel?

Break Up Large Blocks of Text

Break up large blocks of text so they’re easier to digest and keep track of. Use around 5 lines as a maximum and you’ll not go far wrong.


Give users some feedback when they're performing tasks so they feel reassured. There's nothing more annoying than wondering if an app's frozen when it pauses to process a request, or pressing buttons that don't seem to do anything. Feedback in these situations could be in the form of spinners and messages that notify users of what's happening, or pressed states and sounds to reinforce that they’ve initiated an action.

Feedback Multi-sensory

Provide feedback in multiple forms where possible. For example, relying solely on sound for an alert would mean that deaf users, or those located in noisy environments, wouldn’t be aware that something has happened which requires their attention.

Feedback Error Messages

“Certain colours and shapes have become synonymous with specific meanings in digital design. Be mindful of these norms, as mixing them up can cause confusion for the user. Green and ticks are commonly used to indicate good, likewise red and crosses bad, but jumbling the two up creates a mixed message. Similarly, yellow and triangles are often associated with warnings, blue and circles with information."