What is your process to create beautiful and functional UI design for web and/or mobile?

I'm a freelancer. I don't know if my approach is "common" but this is what I do to design beautiful sites.I have a large library of inspiration in my computer and at http://www.pinterest.com/aurelkurtula/. I don't collect images just for future projects in mind, but just because they inspire something in me. In fact I have come to think that collecting inspiration from anywhere (any medium, without the web in mind) makes you a better designerDesigning for UI for the client, I start with pen and paper. If i need to, I would have Pinterest or https://itunes.apple.com/gb/app/ember/id402456742?mt=12&affId=1503186 open for inspiration, and just scribble ideas on paper. This is quick and you forget about "limitations". I am by far not an artist, I just scribble and annotate things. If I felt the need, I have even showed the client these scraps of paper, but not part of "the" plan.Then if the end result is complexed I would go into photoshop (some people would use fire works - I am a photoshop fan) and translate my scribbles into a more crystallised idea but I never aim for detail when using photoshop it is an unnecessary waist of time.There are many times when the paper scribbles have helped me enough and I don't need photoshop. (or after photoshop) I start coding the site into HTML & CSS. For this process I use the following) technologies/softwares (on a mac): sublime text (a cool code editor) http://www.mamp.info/en/index.html Chrome (with it's sass features) SASS/CSS (if you don't know what sass is, learn it, it's cool) HTML (with a little php, just incase I need very basic loops or what ever) Then after I do this and get a good response from the clint. I take the final result and make it interactive, by adding whatever the project requires (be it: PHP, WordPress or so on)Your questions seems to ask about the creative element, I would strongly emphasise collection inspiration, once you "force" yourself into doing that, then you'll start seeing design opportunities on (almost) everything everything you see. And sometimes it makes you feel like the research is already doneLong ago I saw a video where this art director said that she was in a meeting where the client told her that they needed a logo and she was able to create one there and then. The client was not happy, they thought that she would need to research before coming up with the idea. She said (something like): years of research made here come up with the logo there and then. - unfortunately I can't remember where I saw this, but this documentary made me start collecting inspiration. I even have print designs hanged in my bedroom walls! And all because of the documentary which I can't remember where I saw it.Since responsive design came along, I spend less and less time (requiring perfection) in photoshop. Because doing a "rough" (if not complete) html layout, is easier or/and more productive then producing 3 or more sketches on photoshop. So photoshop now is just to quickly bring to live something complicated that paper scribbles weren't enough. And of course photoshop is essential to work with imagesEdited: 16 May 2016This is a very old answer, my work flow has changed a lot (I do all the work using the terminal instead of mamp for example). But I just came across the video I refer above - I found it in an old hard drive that I am cleaning out.The artist that I was talking about is called Paula Scher I operate very strongly with my instincts, and I really either get if I don’t get it in the first crack I get it in the second, and if I don’t get it in the second I almost never get it … it’s a very intuitive kind of process for me, I’ve never been a refiner, my best works have been big bold strokes that came very quickly. And it’s very problematic because a lot of clients like to buy process, and I think they are not getting their money’s worth - like I solved it too fast. I drew the city bank logo after the first meeting, I drew it on a napkin and walked out … it didn’t take, you know, it’s a second. How could it be that you talk to somebody and it’s done in a second? But it is done in a second, it’s done in a second an thirty-four years. It’s done in a second and every experience, every movie and everything on my life that’s in my head. Pretty cool!

I believe 's is a great answer. Kudos Aurel. If for no other reason, Photoshop has been moved to where it should be in the process. That is, in 2015 - fyi: I like to think ahead - its role should be one of supporting the process not being the feature. Photoshop in and of itself is not a web design tool. It's an image editing and image creation tool. It made sense years ago. It's time to move on. PSD to HTML / CSS might as well be a fax machine at this point. Thinking and working in those terms adds an unnecessary layer to the process. Time is money, correct? More importantly, it also can result in designs that aren't so easy to convert into mark-up. Frankly, I've grown tired of "web designers" complaining how their image in Photoshop doesn't look exactly the same once it's marked up. Pardon me (while I vent) but...No shit! You used a hammer when you should have used a screw driver. What did you expect? To those "web designers" I say: 2007 phoned and it wants its web design tool back.  It's time to move on. With that said, I would suggest taking a look at something like Pingendo (http://www.pingendo.com). It's a "prototyping" tool for . While it's not going to help you with any PHP (as Aurel mentioned) you might - if necessary - be able to fake that with or one of its flavors (e.g., ). Or just leave the PHP for a later step in your process. In any case, tools such as Pingendo enable you to work directly in "manufacturing mode". Yes, you'd still use Photoshop to create and edit pieces of the puzzle. The benefit is Pingendo would be your primary tool for assembly and manufacturing. That is, your "prototypes" would certainly be a lot closer to the real thing (than a Photoshop PSD that's for sure). Other than that, don't over-think the solution. There are plenty of pretty websites with fancy and creative UIs that ultimately deliver a sub-optimal experience, or are just plain useless (from the visitor's / user's perspective). With more and more people doing more and more of their internet'ing on small screen (read: mobile device) it's very easy to get sucked into the "this looks soooo great on my 24" display." Unfortunately, a 24" display is a very fringe use case. Don't be THAT designer. Please. It's time to move on.

Beauty could be a lot of things. For me a beautiful website not only looks good but has a great user experience that works perfectly and delivers the results for the client. Clients come in all shapes and sizes. Some will want to see something tangible for their money - so in this case mock ups and visuals could be required. Taking Mark's response on board, sometimes I am "that designer". I can't see this changing anytime soon. There's a small group of web celebs who seem to think not showing clients any visuals is a good thing. I tend to disagree... ... However, other clients will trust you to lead the way so you can take a more creative steer using mood boards, element collages and prototypes. Either way sketching out ideas, functionality concepts, wireframing, looking at other sites and apps for inspiration - everything's in the mix regardless of client expectation. I tend to avoid frameworks such as Bootstrap and Foundation. There are handy snippets to utilise, but I don't want my sites to look the same and act the same. I like to write and test my own code rather than sift through someone else's. I tend to use Illustrator for mockups and visuals simply because I prefer working with vectors. I can also export retina friendly SVGs from Illustrator too. I use Sublime Text for code, Codekit to compile my SASS files, Duo (http://helloduo.com), Chrome and IE to preview and test.

I design website from start to finish and started as a freelancer. The method I use is a variation of User Experience Design. You are not designing a website for yourself or your client. You are designing for users. So do some research on User Experience Design especially in the website design field. This will help you build websites that have value for your users which means value to your clients because of the traffic flow and potential customers. It needs to have value for user before they invest their time. A great design is one that looks great but is functional as well. You have to remember users don't come to your website because it looks nice. Take Quora which is very plain and simple. It looks clean and easy to find things. Users want to type a quick question and have others quickly answer them. So adding a lot of bling and glamor is just going to frustrate or distract users from the reason they come to this website and creates an unpleasant experience. I've learnt a lot from different sources but This Week In: Webdesign really helped me a lot. You can watch them on Ustream or watch episodes on tube http://www.youtube.com/show/thisweekinwebdesign . They even had a few episodes where they show you how they implement everything and they where using a real clients website. Some stages/phrase you can implement in your projects: 1. Briefing Here you spend time with your client to understand what they want to achieve through the website. You find out about their company, employees customers etc. 2. Strategy Here you determine what purpose the website is fulfilling for your client and the users going to use the website. Why are the users going to come the website? What do they need from the website? Who are they? E.g. Users are coming to our website to review books and find out what books are good etc. 3. Scope In this phrase you determine what features you will use on the website. The features you use must be centered around your strategy and you also determine whether you have the resources for the features and what resource you will need. At this point your content collection will also be done as well as SEO research. You'll also decide whether your website needs to be available on different formats and which formats, this should relate to your user research. E.g. A search box so user can easily find books, a latest release section, a user  review section so other users can recommend books. We will need to start off with a database of 1000 book reviews etc. 4. Structure Here you will determine what the best ways are to move the users through your content and website.You will chart-out and document the flow of information, how the user moves from one point to the next. E.g If the user click on the review link what happens, where do they go and what do they find and see on the next screen. 5. Skeleton This is where you give bones to your website. You design layout in form of wire-frames whether basic or more structured. Usually no content is placed and you use symbols to show what will go where on the website. E.g. a wire-frame showing where the main navigation will be vs the main content. 6. Surface This is where everything comes together. This is where you design the layout, look, style, feel or your website. This is where you will see how it looks. How big will the headings be? What colours you using for background and why? What colours for what type of content. Each and everything thing you visually place in the design must have a function related to the previous phrases. E.g light blue background to relax users. Light gray text for main headers for high contrast to draw the eye towards the headers. Red big text against white background in main banner to create focus on sale. 7. Representation Here you will present to the client. Don't just show them what you have done but explain the features and how they work and related to the user and your client. The more smiles you get for each feature the more likely your client will be impressed. If you just show your client the design they are going to say yes or no. By explaining your client can see how everything works and why you did certain things. E.g. The search box we put right at the top. We made it big so it's clearly visible so users can use it to search for questions already asked or some they might want to answer. We've added a big button so users can easily ask a question. We've added a small red icon for new notices on the home button. The red colours shows urgency and it has the number of notices in the icon. 8. Development Once the client is satisfied you take the project into development where it is coded, tested and then goes live. In this way you create a great design that has functionality and gets users to invest time because they find every feature valuable on your website. The time it takes depends on the size of the website and the quality you want to produce. If you want to create better website you going to have to invest more time to complete the different phrase. The software I use: Abode Photoshop, Illustrator, Fireworks, Flash for designs layouts and images Dreamweaver for coding. Don't use text editors as it takes too long and too much energy to code. Don't use wysiwig programs as your option for functionality will be limited. Dreamweaver can help you code and avoid errors. Microsoft Project for project management Microsoft Visio for wire-frames, charts and flow charts for project documentation I tend to steer away from CMS (Content Management System) as they use templates. If you can design and code your own templates then this is great. In most cases I find out what my client wants to edit themselves and design a interface for them very similar to CMS. My opinion is CMS takes a design template and basis content on the design. For User Experience Design it's taking content and creating a design based on the content. Hope you find something useful.

Sketch is a great alternative to Photoshop if you are on a Mac. Personally I don't spend too much time with the design as most of the time the end product may not be exactly the same pixel-to-pixel as the designed one. In terms of development, if you are comfortable with PHP, check out Laravel, a neat framework that makes life a whole lot easier with the many nuances of PHP development.