#honest to god the Hardest part of that UI design? the little 2 in the neon pink circle

[damnation-if]

wrestling with canva like i’m crocodile dundee... this probably won’t end up being anything like a real UI because i don’t think a lot of it is Possible jsfdbgs

It looks amazing, how did you do that? 👀👀👀👀👀

hi, thank you for the compliment! i took a bit to answer this because i'm not really... equipped to be making Design tutorials haha. graphic design is my passion neither ironically nor unironically and i'm absolutely rubbish at art - however, canva has enough tools to help me feel like i'm building something visually interesting despite my. abject lack of talent XD i'll put a cut here and some like. explanation and tips underneath.

i have premium for my non-IF-related work, but the free version is what i started out on and it's honestly surprisingly good and has a generous licensing agreement. the biggest drawback for the free version for me is the inability to save files with a transparent background or resize files mid-edit, but for most people making banners or concept art you're not going to Need transparent files - that's more of a thing for actually creating assets.

the biggest ADVANTAGE of the free canva license is that you are licensed to use anything you make using the free assets in commercial products if you want/need (including games or promo for them). many similar design products only allow personal use for free licensing. (however, i'm not trying to sell canva to you; rather i'm pointing out that sticking with the free version is actually very convenient and the premium features are probably things you won't need lol)

basically canva allows you to search for graphic design elements by keyword and drag and drop them onto a design piece, mix them around, change their colours and sizes etc. and combine them together to make something. i'll talk a little bit about the UI design you're mentioning (the one i showed off here for anyone curious) not to brag about my Skillz(TM) but just to show how easy canva makes it for a total newb to make something that looks really neat!

there's about 30 different elements in that particular UI design - the "console-y" looking frame itself is half a dozen on its own: the basic frame (those cyberpunky lines at the top and bottom of the screen); a semi-transparent box i added to make it look like a holo-screen; the panel on the side, which was originally square until i cropped it down to make it look like a panel and colour-shifted to match the main box; the little connector between the side panel and the screen, which is actually two of the same asset with one upside-down and cropped; and then the various text assets, not to mention all the logos, which are also all separate (and also the little 2 unread messages symbol is another 2 separate design elements i put together lmfao).

canva will probably seem overwhelming once you first start using it because it has So Many tools, but most of these are for companies and you'll probably find you don't need to even look at the vast majority of them. for example, it'll probably ask you to choose a template to start a design, and there are like. 100s. that it'll want you to sort through. but you very probably won't ever use more than one or two. i think i've used three Ever for IF stuff - tumblr banner (for banners, obviously), social media banner, for the RO banners you can see on the ROs page, and 16:9 Blank Presentation, which is what i use for UI designs because it's just. a big blank page size. you can Literally ignore all the others unless you need something specific!

you can either use the pre-generated aspects of the template and simply replace their designs with ones you prefer, or do what i do and delete it all and put your own stuff in lmfao. the templates can help if you don't have much of an idea of what you want your design to look like but obviously for me with UI design it's a bit. Pointless because canva doesn't have a template for that XD

anyway once you have your blank canvas, you can search for "elements" in the search panel and look through them for ones you want to use. the pro version assets are labelled pretty clearly so you probably won't mistakenly pick something that requires paying to use and the search filters themselves are pretty hefty - i rarely run up against a search term that brings back nothing unless it's HIGHLY specific lol

here are just a couple of tips that help me get basically closer to what i want out of the whole thing:

when you're changing the size of an element, canva only increases or decreases its size by the exact ratio of its original dimensions - you can't Only make an image wider, for example, it will also automatically increase the height to match. that's why the "frame" asset in my Gone Dark UI design is centred in the page instead of taking up more of it - i couldn't make it wider without it getting taller and the top and bottom bars disappearing off the page. you can get around this by using elements that are mostly plain - i could have, for example, made the semitransparent screen box as wide as i wanted, because it's uniform in design and there'll be no visible difference in where i draw its boundaries as it all just looks like plain rectangle.

combining photo images and less realistic graphics can look jarring but there are handy image editing tools (found by clicking "edit image" in the top toolbar with the image selected, and then "show all" in the lefthand sidebar to show all of the filters) that you can use to make photos look Less Photolike - lowered blur and heightened clarity especially can make it easier to make photos fit better with other graphics.

some of the text effects (found by clicking "Effects" in the top toolbar with the textbox selected) can make it way easier for text to be visible against certain backgrounds - this is not much use if you're designing something for another medium like a UI, because you can't replicate them in other software, but if you're just producing an image like a banner they add a lot of neat flair.

when you have a lot of elements working together they often look a little better with at least a slightly lower transparency to hide that their borders/edges aren't uniform - 85-90% is usually opaque enough to not notice it's slightly transparent but soften the edges.

it can be hard to figure out the exact size (in pixels) of an element while you're In a design - there are rulers that can be applied through the settings menu, but the maths often fucks me up, so i find it's easier to resize the image by dragging the expand handles by like a single pixel and then putting it back to normal - while specifically holding the expand handles (until you let go of the mouse and "drop" it in the desired size) it will give you an exact reading of the height and width in pixels along the bottom toolbar that you can read easily.

this one is pretty specific but when you're making boxes to put behind text they often look better with a slight blur filter on them as well as transparency - for Gone Dark in particular the blur gives it a nice fuzz that makes it look even more like a projected screen. if you look closely you can see a slight difference between the text screen and the side panel screen background - that's because i forgot to blur the side panel lmfao.

aaaand that's probably all the advice i can offer. i'm far from an expert, but i do feel like i have fun with it XD i'm glad so many people have thought it looked cool! sorry this got so long but. it's hard to explain without actually Getting Into It haha

[nhmobileapps-blog]

How to Make Your Mobile App Stand Out In a Crowd

"Application configuration patterns go back and forth, yet being exceptional applications never leaves style"

"How about we construct an application and make million dollars." It is not too same-straightforward senseless thing today as it used to be half decade prior. That is, building an extraordinary mobile application. The best mobile app design & development services companies in India USA biological community is prospering in today's hyper-aggressive market. Did you realize that App Store develops by more than 1.5k applications for every day? That is not in the least misrepresented, however an overview from Statistic.

Most mobile applications really do lose all sense of direction in the whirlpool of App stores. For the most part, the revelation happens in the main 25 outlines. Having said that, of course, most engineers flourish to encroach on main 25. On the off chance that it's proficient, then download rates will soar considerably. Before hopping to any conclusion on the most proficient method to stand firm for your application to make it a pioneer, it's critical to know some mobile application related insights and imperative notices. Today, it doesn't ensure achievement like it was practicing before 5 years.

To be sure, it's about 'Appealing the Audience'

What is the mystery equation to make your application 'The Slight Edge'?

The answer is entirely convoluted. In any case, the uplifting news is that the best application circulation or promoting procedure doesn't cost a dime. It's the little things that when done reliably and done after some time prompt to achievement.

It is important to keep up an impeccable harmony between mobile application development and showcasing to guarantee manageability of your application.

'Try not to target 5% of bigger gathering of people yet to attempt to get 80% of a littler one'

The question continues as before: How to make your application emerge in the group that will make it interesting?

Do you have any Succinct Solution?

Possibly, Application Performance: ‘Enticing through Excellence'. Will only it make your application unique?

We should discuss it in detail. Do you wish to make your mobile application exceptional? See these eighteen successful tips (not all together) at the top of the priority list, and you will be on your expressway.

1: A Name of the App

Hold up, what? The name of the application ought to be in vogue, astute and persevering. Second thing, it ought to be quick and painless. Third thing, it ought to relate nearly to the class of the mobile application. Look at it with delineation: Messenger is compact, related, looks cool when talked, and remarkable. Including "Z" toward the end of the application or placing it in the middle of the name, word juggling, Adding prefix and postfix to the terminology, and so on., are current approaches to name the mobile applications.

1: Laudable Logo

The logo is an "Insignia" of Application. It's ridiculously vital how great the logo looks. It gets our consideration. The most troublesome thing to plan a logo is that it ought to be as one of a kind as could be expected under the circumstances yet it ought to be straightforward, incomparable and shocking. Whatsapp, Facebook, Hike, Viber, Snapchat, and so on., have such logos that it's engraved in our mind. It should be tranquil and vital. That is the magnificence of it.

2. Application portrayal in App Stores

'This application is great. It has many features. It’s free.'

'This application is made only for you, having interesting components and brilliant interface. Additionally, it's free, free...'

Can you figure about the forte of over two applications? Umm, both are same. Interesting, would it say it isn't? Yes, it is. At the point when the client comes to 'Play Store' without having any learning of your application, it's the application depiction that will draw him/her to tap on the "Download" catch. All things considered, they say it right 'Substance is the King'. It's not the matter of what you compose; it's the means by which you compose. At any rate, you ought to compose it right.

3. Recordings and Screenshots

In some cases, the application depiction doesn't clarify the client what the application is about. At that point, it's the ideal opportunity for some pictorial representation. Of Course, Video, and Screenshots, to be exact, striking video and remarkable screenshots will enthral the clients to get the correct thought regarding the application. This is the manner by which an application is made interesting. Phew!

4. Surveys (Genuine)

The question is 'In what manner would you be able to simply judge an application on video, screenshots, and short description?'Here comes the reply. Clients, specifically or in a roundabout way, constantly get a kick out of the chance to share their input whether the application was useful or an entire annoyance. You can check the remarks of "Bona fide" clients, I rehash, 'Honest to goodness Users' in the Review segment beneath the application portrayal. 1,2,3,4 or 5 Stars? The gauge of the mobile application is measured by the stars it gets.

5. Last overhauled

Some application begins well; gets more download however the consistency is not kept up. Clearly, there are few bugs and minor blunders in each mobile application. Beat Developers have faith in overhauling it consistently so that the past nonconformists get evacuated. You can see the 'Last Updated' date beneath the Review segment. That date ought to be as close as would be prudent to the present time that implies the application was just as of late redesigned.

6. Number of downloads

Basic as 'Thumb Rule'. Progressively the quantity of downloads, more is the fame and more will be the client engagement. It's completely clear that any moronic application will never achieve a base limit that an outstanding application. Wouldn't it be without any help enough to demonstrate that the application is standing up higher in the group?

7. Size of the application

'Gracious God, I don't have sufficient information pack to download 28 MB application. Disregard it'

'It's alright. It's only 5 MB application. We should give it a shot. It would be ideal if you turn on your Hotspot'

Is there any clarification required? The extent of any mobile application matters a ton. Along these lines, designers dependably remember that the span of the application so that the above clash doesn't emerge. Yes, in fact there is some substantial/cumbersome application whose size is 20+ MB however it ought to be worth and legitimize the measuring.

8. Selective: Be the pioneer

Individuals like selective things. They love it. They value it. Rather than enlisting in the as of now existed stream, why not to detail something new? New, Exclusive, Unique. Whatsapp is the best delineation for this. No advertisements, No bothering to clients; more easy to use, more prominent.

9. Feel: Adaptable and Agile

The excellence (UI) ought to stun. At the point when the client introduces your application surprisingly, in any case their eyes will be attracted to the outline as it were. " the First Impression is the best Impression'. Next: Making your application emerge from the group by conveying esteem and fullest client encounter.

10. Smooth as Butter

Level 1 crossed. Presently then, clients have introduced and loved your outline. The following significant thing is the manner by which it works. Is it fast? Is it stacking excessively? Are there any bugs? Clients are usual to a considerable measure of alternatives so if your application is not immaculate then accept them gone until the end of time.

11. Get criticism from clients.

Your unwavering and dependable clients are your 'Remedy box. They let it know what they feel it. Their criticism is exceptionally legitimate. The important information they give can help you to enhance in further up-degree in the application.

12. Change Over: Browsers to Downloads

It is most likely one of the hardest assignments yet you need to be that right? How? For the most part, guests are surfing continually, searching for their advantage to get something costly at the unobtrusive cost. Allure your clients by telling that the arrangements, unique offer, most recent components, and so forth. are accessible just on mobile applications. Note: When they will download the mobile application, they are anxious to see those elements and specs; on the off chance that they are not given what they were guaranteed, you will lose him/her relentlessly.

13. Sticker price: The more is not the merrier

The application investigation firm Distimo broke down the effect of value changes over the main 400 applications all inclusive. It said that 90% of clients go with the expectation of complimentary mobile applications despite the fact that the paid application of a similar classification has bounty more components in it. This unquestionably puts designer to consider it. So as to fathom this obstacle, they have concocted one new technique. Professional hypothesis. Essentially, the application is given for nothing yet for more elements clients need to purchase master variant. Thus, the client if happy with the free administration will then thoroughly consider buying the expert.

14. Conceptualizing Promotional Strategy: Promote your application over a few movement sources

There are a great deal of stores with the exception of the goliaths Apple and Google. Doing that won't just build the activity additionally improve the brand mindfulness. This is one of the procedures advertisers are applying to get the advantage.

15. Looking into post-download movement

This is urgent. After the application is downloaded by the client, is it sitting inert on the landing page or not in any case utilized once every week? That is miserable, would it say it isn't? Obviously, with this plan, the investigation can be made and the engagement can be expanded settling the feeble stick focuses.

16. Recognizing the smart agenda

Meaning: The Perfect course to the objective market.

Once a client has been locally available, it's basic to keep them drew in with your application. Urging Your Customers to Share the Goodness is the most ideal approach to showcase your application. This demonstrates it is appreciated by the clients utilizing it and need to help it to others. Recognizing and Discovering the course to reach to your objective market is one of the empowering things you can do.

17. Astounding SEO

You made a splendid application. Cool. Be that as it may, it's not searchable and it's not in main 25. All things considered, it's gravely miserable. Website improvement ought to be in the same class as conceivable. It is the binocular of the mobile applications. It's obvious that SEO is a test to every one of the advertisers and designers however it's the essential source to get their application on top.

18. Rivalry: Little fish in a major sea

Absolutely: This point is prompted/tip/recommendation under the class mobile app development.

Expansive markets have bunches of rivalry which mean your weight to a position you as interestingly is very high. Not unconquerable but rather a test in any case. What are you going to do to message properly? What strategies would you be able to utilize that drive enough clients to your entryway and not to your comp

[jamiekturner]

How I, a designer, learned to code and released an app in 4 months

Okay, I’ll be honest with you right away. The title is a little misleading.

I started learning Swift 4 months before and I knew some coding before that.

But I have never created a native app for any platform. Thinking about it now, I had no idea what I was up against…

For you to understand the how I did it, first I must tell you the why.

Traveling back in time

I always loved computers. My father bought our first machine when I was around 8 years old, and I became hooked in a second. It had a blurry CRT screen and it was running DOS, but it did what you wanted it to do.

That thing was pure magic for God’s sake!

Of course I mostly played games on it but I fell in love with the whole environment. I learned about how a PC worked, turned all the knobs and switches in the programs and became the guy others came to for tech-advice.

Fast forward to 1999. It was the time of 56k dial up modems and ADSL lines. I was still into computers as the Internet started gaining popularity in Hungary. I spent most of my afternoons in the school’s IT room visiting Geocities pages.

It was the beautiful era of <frame> based websites with the dancing baby animgif and I wanted a part of it.

I started learning HTML and created my first website. And since it was ’99 I appropriately named it Zolee Site Millenium. It ran on our school server and was only accessible via a Frankensteinian URL, something like www.kkt.piar.school.gov.hu/~hosszu2 (notice the nice tilde character in there). But I was online, I conquered a little bit of the new promise land called the World Wide Web. It felt amazing.

My love for gaming stuck with me in the following years: I was playing a lot of Counter-Strike. As it became the most popular game, I always had a chance to create a website for my current team.

I loved designing and building pages, but after a while started focusing my efforts on the visuals and usability. The latest trends of web development passed right by me as I learned more and more about pixels and user-experience.

Today I work as a full-time UI designer at a Hungarian agency. I have no experience with the current top frameworks like Node, Angular or Bootstrap. And I’m okay with that.

But I’ve been keeping an eye on HTML, CSS and JavaScript goodies, because I always work on personal projects on the side.

The idea for GAget

In 2011 my website got a huge facelift. The layout got featured on DeviantArt and I felt excited about new users checking it out every day. But I also was really frustrated.

Not because of the number visitors, but because there was no quick way for me to check them. There were two options. I either had to keep fiddling with Google Analytics, or I needed to find a simple app to do the trick for me. That’s what OS X Dashboard widgets are for, I thought, so I started looking around.

But the solutions out there were either too nerdy and ugly or just didn’t give me enough data. So being a designer, I drew up a mockup of what the best solution for me could be and posted the design on Dribbble.

A couple of dozen likes made me dig into the topic a bit more. I found out that widgets were essentially HTML + JavaScript apps, so I started taking it a little more seriously. I mean, these were the two languages I was most familiar with.

The working prototype was running on my Dashboard in a couple of days. I named it GAget [pronounced the same way as gadget] as an acronym for Google Analytics widget. A silly name, but it stuck.

The widget was released about 2 weeks later, in August of 2011.

I stopped updating the bookmarks featuring GAget after a while…

The amount of feedback was stunning: MacStories, SwissMiss and tons of smaller blogs featured GAget. I even had my name printed in the Hungarian version of PC World magazine.

I knew I had to keep working on it.

What to do next?

Today the widget has over 84 thousand downloads and it is being used by thousands weekly. With a friend of mine we even created an iPhone version. So when Apple released Yosemite and discontinued the development of Dashcode, GAget’s future started looking pretty grim.

But as one hand took something away, the other gave something back: Apple opened up the Notification Center for developers to display widgets there. Hope! Maybe the success story of my small widget could continue!

My Instagram post about the new design.

I started reading Apple’s documentation on Today extensions (this is what they call widgets). But it was all native Objective-C code. Ugh! Dealing with a compiler, memory leaks and multi-threaded processes was not what I wanted to do. It sounds scary if you’ve never done it before. But I made up my mind, GAget needed to become a native widget!

My biggest problem was that I had no idea where to start.

The Objective-Struggle

I purchased a book about iPhone development in Objective-C, but gave up after a couple of sections. To be honest, for someone familiar with front-end languages and a bit of PHP, Objective-C looked way too complex. Look at this code:

@​i​n​t​e​r​f​a​c​e​ ​​R​e​m​i​n​d​e​r​V​i​e​w​C​o​n​t​r​o​l​l​e​r​(​)​

@​p​r​o​p​e​r​t​y​ ​(​n​o​n​a​t​o​m​i​c​,​ ​w​e​a​k​)​ ​I​B​O​u​t​l​e​t​ ​U​I​D​a​t​e​P​i​c​k​e​r​ ​*​d​a​t​e​P​i​c​k​e​r​;​

@​e​n​d​

What could an interface, a property be, what does nonatomic or weak mean and what the hell are @ and * doing in there? I understood end though!

https://fat.gfycat.com/DifferentGivingFunnelweaverspider.mp4

The swifter way to code

The tutorials in the book were leading nowhere. After a few weeks of struggle, I didn’t get any closer to a native widget.

Then I remembered that Apple introduced a new programming language called Swift alongside Yosemite. It was new to everyone, so a lot of gurus started writing about it, discussing why it sucked and how you should learn Objective-C before even thinking about touching Swift. All this buzz made me take a look: I downloaded and started reading its documentation.

It felt like a breeze. The code started looking familiar, something like a little complex JavaScript! I fired up Xcode and started copying what people were doing in tutorials.

My main goal was an OS X widget, but most tutorials were focused on Swift itself or iPhone apps so I had to keep searching. I still had a lot of unanswered questions, like:

How can a widget and a containing app communicate? (Core data and app groups)

Can I use hover interaction? (No)

How do I open only one row of the widget while closing the others? (Auto layout and some manual height hacking)

Apple’s one page long documentation on widgets forced me to dig up source codes on GitHub and Stack Overflow and it took me countless hours to figure out the answers.

I collected and published the links I found useful along the way. They might be relevant for you too, in case you’re starting out with iOS or OS X programming.

I managed to find everything I needed and started moving faster than I expected: GAget for Yosemite started to take shape.

MVC, multi-threaded processes, app targets, view controllers and core data meant nothing 4 months ago. But thanks to the tutorials, Stack Overflow and a lot of sleepless nights I managed to learn the bases of Swift and OS X development.

Thanks to 800 people the beta testing was a blast. GAget is now available in the App Store as a designer’s first native application.

What I learned — besides a new programming language

I knew that working on a personal project is awesome long before Swift came along. You get to do whatever you want and you don’t answer to a boss or a client. You can add and remove features any way you like and you work in your own pace.

Deadlines

However, I found that giving yourself a deadline can be extremely motivating. Every New Year’s Eve my wife and I sit down and make a list about the things what we want to achieve in the following year. This time I listed that I want to release the new version of GAget by the end of January: this was my deadline.

Even though I ended up missing it by a month (thanks to Apple’s review process and a few other projects), I was working the hardest in January to check this thing off my list. Having it written down on a piece of paper is a powerful motivator.

The circle of learning

I also discovered that while learning something new there are three phases you cycle through: excitement, struggle and solution.

Excitement phase:you alway start here. You have a new idea and start learning things, everything looks promising and you wonder what you can do next. You feel motivated and you’re experimenting with the stuff you know. But you eventually reach a barrier in your knowledge.

Struggle phase:as you encounter the first real problem your excitement and motivation levels start to plummet. You have no idea what could help you or what to search for. You are desperate: even checking out the 3rd results page in Google for an answer.

Solution phase:Finally! You find the solution to that nasty problem. You move faster than before, and start to feel excited and motivated again. You go back to phase 1.

So next time you start out, remember: the struggle phase might be long and frustrating but the solution is out there. Finding it is part of the fun.

And don’t forget to check out GAget ☺

  The post How I, a designer, learned to code and released an app in 4 months appeared first on Design your way.

from Web Development & Designing http://www.designyourway.net/blog/user-interface-design/designer-learned-code-released-app-4-months/