Design is not something that gets talked about much here and it is such an important part of the whole process of software development and this is even more true on the web where design is what could make or mar a project.

I'm going to be dropping a few helpful hints (nano article esque thingies ) for developers who find user interface design to be a chore or just too much work.

As it turns out, quite a few developers don't like anything to do with user interfaces but I hope to demystify the preconceptions surrounding it and make it more approachable and even enjoyable (I don't collect juju for dis one) for everyone.

So, it's going to be like very simple courses that everyone can participate in but my focus is mainly on beginning Web programmers since I can very well identify with such crowd and consider myself to be one as well.

As beginning Web programmers, coming up with designs for Web projects can sometimes feel very daunting and confusing but I hope to simplify the entire process; understanding the problem you are trying to solve with design, research, sketching, prototyping and all that ish.

I'll make some assumptions about what we already know though:

At the very least I expect everyone to be familiar with HTML and CSS (you don't have to be an expert but at least know what an HTML tag looks like and how to change the color of an HTML tag using CSS)

Now, I'm by no means an expert on the topic but I am very passionate about it and I'll try to help in any way I can. I do hope that the real experts will join me on this thread in helping to educate developers on the value of design and also help to develop the next generation of awesome user interface designers

Strap on your belts (literally), it's going to be an interesting one.

Following...

I'm definitely here..

BUILDING A WEB PROJECT FROM START TO FINISH

Hello guys, so I was wondering what to start with but what other way would be better than building an actual web project from start to finish.

The creator of this thread:

https://www.nairaland.com/2413832/design-new-home-page-us#35359375


needs a redesign for their home page and we are going to be taking on the task of giving it some sweet love (the deadline is 6th of this month though so we'll have to work really fast in order to cover a lot of ground).

I will try to walk everyone through the steps involved when building out new designs for a project and hopefully give everyone a familiar starting base for every new project.

BUILDING A WEB PROJECT FROM START TO FINISH

The client is a health tech startup aiming to re-imagine health care through tech and here are screen shots from the current home page

Would you buy or create special UI kits? Either for wireframing or icons...

BUILDING A WEB PROJECT FROM START TO FINISH

I'll first start by pointing out what I like about the current design and what I don't like (This will help us decide on what we feel can be kept and what can be discarded).

For https://www.wellahealth.com/, here are a few things I noticed:

** I like the simple text-based design of the logo and the beautiful big background image of the happy family (I don't like the fact the the textual content on the background is embedded right into the image, makes it hard to change the text if someone decides to)

** I don't like the fact that horizontal scroll bars are appearing on the page

** It's a bit confusing to figure out what the company does at first glance (Are you satisfied with your health doesn't do much for me), also when you scroll down the next thing you see is 'wella health care members are' and it just stops at that point. Then it moves next to saying let us help you manage your health care without specifying how it would be of help to a potential user. Note: This point doesn't really have anything to do with user interface as it is more in the realm of user experience design. Moving on

** The navigation bar looks cramped

** Too much white space

Lemme stop here because I could actually go on and on but that is not why we are here.

So, we truly have to try our very best to improve this homepage but where do we start?

AAinEqGuinea:
Would you buy or create special UI kits? Either for wireframing or icons...

I'm not an expert at creating icons (I don't even think I could even be called a rookie) so I would probably buy or look for free alternatives.

If you still "don't judge a book by its cover", you are wrong!








Don't base your fact by a book's cover

blueyedgeek:
BUILDING A WEB PROJECT FROM START TO FINISH

I'll first start by pointing out what I like about the current design and what I don't like (This will help us decide on what we feel can be kept and what can be discarded).

For https://www.wellahealth.com/, here are a few things I noticed:

** I like the simple text-based design of the logo and the beautiful big background image of the happy family (I don't like the fact the the textual content on the background is embedded right into the image, makes it hard to change the text if someone decides to)

** I don't like the fact that horizontal scroll bars are appearing on the page

** It's a bit confusing to figure out what the company does at first glance (Are you satisfied with your health doesn't do much for me), also when you scroll down the next thing you see is 'wella health care members are' and it just stops at that point. Then it moves next to saying let us help you manage your health care without specifying how it would be of help to a potential user. Note: This point doesn't really have anything to do with user interface as it is more in the realm of user experience design. Moving on

** The navigation bar looks cramped

** Too much white space

Lemme stop here because I could actually go on and on but that is not why we are here.

So, we truly have to try our very best to improve this homepage but where do we start?

Responsive issues with text margins, if this tutorial ventures into responsive CSS

Screens from mobile IE (1) and Safari (2)

AAinEqGuinea:


Responsive issues with text margins, if this tutorial ventures into responsive CSS

Screens from mobile IE (1) and Safari (2)

Yeah, I'll talk about responsive CSS as well, thanks for pointing that out. By the way, this thread is intended as a way to promote good user interface design practice and I don't intend to be the only one running it so if you have a set of mini courses or articles that would help us all, please do not hesitate to bring them here or create a new thread if it's something that requires it's own thread.

BUILDING A WEB PROJECT FROM START TO FINISH

So, where do we start with a new web project? I would like to take a little detour and talk about architecture. When people set out to build houses, what do they do first? Do they just get their tools and start building? No! What contraption would come out from such decision! First they make adequate planning and take everything into account in the blueprint for the building. Basically, they draw out the plan for the house before carrying out any actual work. Building a website is a lot like building houses and requires a lot of planning. For building websites you need a work-flow that you can always use for every new project, a design process sort of. For a more traditional website process, we would first start out by building out the information architecture which is basically just a big word for deciding on how page navigation would work for things like 'Home', 'About us', 'Contact us' etc and determining the relationship between various links. We might not need to do this here as this is a redesign and everything we need is already available and we'll basically just be re-tooling and making things better.

BUILDING A WEB PROJECT FROM START TO FINISH

Now while starting off, it's easy to try and jump into the code first but that is pushing it a step too far. Before writing any code whatsoever, it's better we play around with a few design sketches. I'm talking about getting a pencil/pen and paper and just drawing out the layout. This will enable you to have a clear idea of what you are trying to achieve and it is just way more easier to not think about technical limitations. Basically, this is the exploration phase where you just flex your creative muscles.

So, I'll take a pause here to come up with a few sketches for this project and I'll try to upload them here. It's good to draw a few of them (Although you'll only be picking one, it still makes for good practice)

BUILDING A WEB PROJECT FROM START TO FINISH

Turns out my phone's camera is really bad (no flashlight) but I came up with just one sketch for the interface and it still maintains a few things from the current design, just a few changes in the layout here and there.

Note that drawing out a sketch doesn't mean that the finished product has to look exactly like what has been drawn, it's just a way to get your creative juices up and running and give you a direction from which to work.

Some sketches would contain a lot of details while some some wouldn't, they are just ways to get started and give some sort of reference.

BUILDING A WEB PROJECT FROM START TO FINISH

Now, it's time to prototype the page in code. I'm deliberately skipping the mock-up part which involves using a design tool like fireworks or illustrator to build out a detailed version of a web page that looks a lot like the final product. The reason being that:

1. To me it adds more complexity as you still have to write out everything that has been mocked up in code.

2. With the current rate of devices that keep proliferating every year, it's hard to conveniently build mock-ups that would account for all these devices

3. It's hard to build responsive features using mock-ups (You actually have to code it first so that you know where break points are so that they can be properly handled)

4. I don't really know how to use those softwares and even if I did, I would still design in the browser rather than in illustrator.

That's enough about me but the truth is to use any thing that works for you as long as the end result is something really awesome.

BUILDING A WEB PROJECT FROM START TO FINISH

We are about to get serious.

Let me talk briefly about tools I'll be using

** My code editor is Brackets

** I'll be using the emmet plugin that can be installed on any code editor. Basically emmet helps me write HTML and CSS faster than ever before. I use emmet mostly for my HTML though. Let me give an example of what emmet can do:

Assume you wanted to write something like a <div> element 20 times, now instead of typing it out and then copying and pasting 20 times, with emmet all you have to do is type div*20, hit the tab key and voila! it does it's magic.

What if you wanted to write deeply nested elements like a parent header element that wraps a nav element that wraps an unordered list with 5 list items that each have anchor tags in them. Emmet makes this simple by writing css like syntax something like this: header>nav>ul>li*5>a and voila! everything is set up for you, even the anchor tags href attribute is set up for you as well saving you a lot of keystrokes. If that interests you, check out the documentation at http://emmet.io


** I'll also be using Sass (Bourbon + Bitters + Normalize + Neat + Refills) which compiles to plain vanilla CSS that we are all familiar with. I use these tools because they help me treat the web page as several different components all communicating with one another. They help me separate concerns.

** I'll be using mixture to manage the project. Mixture is a really cool tool but I use it mainly because it allows me to use includes in my HTML. What are includes? includes are those part of your page that basically remain the same across all pages and don't need to be changed as much. With includes, you can just write them once and they will be wired everywhere they are needed. A good example of a page component that usually remains the same across all pages is the navigation and the <head></head> part of a page, instead of having to write these components all the time (or copy and paste as the case may be), you only need to write them once and when you make changes at that place, it reflects across all pages. Such a time saver.

I already have a starter kit that I use for all my projects that already has the folders set and ready for prime time. I'll be updating with screen shots as I go along.

Please, do not hesitate to ask any question at all.

blueyedgeek:
Yeah, I'll talk about responsive CSS as well, thanks for pointing that out. By the way, this thread is intended as a way to promote good user interface design practice and I don't intend to be the only one running it so if you have a set of mini courses or articles that would help us all, please do not hesitate to bring them here or create a new thread if it's something that requires it's own thread.

Im a horrible designer but maybe a thread like this can turn things around I usually like to delegate design tasks to someone else, even if I have to outsource design

I brought up the buying or crafting UI elements dilemma for that very reason , and also the fact that I live in the states and dont want my company getting sued for using copyrighted elements (I'm sure I could get away with it and Im sure no one will find out if I did, but I'm playing it safe). I buy everything from UI elements, photo libraries, accents, fonts, etc before I put code in action... or I could design UI elements all from scratch but it wont be pretty

Following through.

AAinEqGuinea:


Im a horrible designer but maybe a thread like this can turn things around I usually like to delegate design tasks to someone else, even if I have to outsource design

I brought up the buying or crafting UI elements dilemma for that very reason , and also the fact that I live in the states and dont want my company getting sued for using copyrighted elements (I'm sure I could get away with it and Im sure no one will find out if I did, but I'm playing it safe). I buy everything from UI elements, photo libraries, accents, fonts, etc before I put code in action... or I could design UI elements all from scratch but it wont be pretty

Have you heard about [url]hackdesign.org[/url], you should check it out, it's pretty amazing. It's a site geared at helping developers become better designers, I know it has helped me a lot (since I don't consider myself that much of a designer as well).

In fact, every developer that seeks to become even a tiny bit better at design should go check out [url]hackdesign.org[/url]

BUILDING A WEB PROJECT FROM START TO FINISH

Working on the navigation and the intro section

I love emmet

you using bootstrap ?

Jregz:
I love emmet

you using bootstrap ?

Yeah, emmet rocks. You get one like for loving emmet. I'm not using bootstrap, I'm using bourbon + bitters + normalize + neat + refills.

** Bourbon is a simple and lightweight mixin library for sass

** Bitters provides base styles, variables and structure for Bourbon projects.

** Normalize is an alternative to css resets that makes browsers render elements more consistently in line with modern standards

** Neat is a lightweight semantic grid framework for Bourbon projects

** Refills is a set of pre - built components and patterns built with Bourbon and Neat. It includes things like navigation patterns, modals, tooltips, collapsible sections, accordions etc.

You might ask what advantage does this offer over bootstrap and I will mention a few:

*** smaller css file size as I only generate what I need for each project, no need to download a separate css file again and I stiil get all the features that bootstrap offers.

*** No need to litter my HTML with unnecessary class names, helps with file size as well.

BUILDING A WEB PROJECT FROM START TO FINISH

And we are done with the basic desktop site but our job is not yet done as I still need to make it mobile responsive but we can give ourselves a pat on the back since we are making progress.

When the site is all done and linked on-line, I'll give details on what went into some of the parts like deciding on font-faces, color, typography and all that sweetness.

Here are screenshots for version 0.0.0 of our project

blueyedgeek:
Yeah, emmet rocks. You get one like for loving emmet. I'm not using bootstrap, I'm using bourbon + bitters + normalize + neat + refills.

** Bourbon is a simple and lightweight mixin library for sass

** Bitters provides base styles, variables and structure for Bourbon projects.

** Normalize is an alternative to css resets that makes browsers render elements more consistently in line with modern standards

** Neat is a lightweight semantic grid framework for Bourbon projects

** Refills is a set of pre - built components and patterns built with Bourbon and Neat. It includes things like navigation patterns, modals, tooltips, collapsible sections, accordions etc.

You might ask what advantage does this offer over bootstrap and I will mention a few:

*** smaller css file size as I only generate what I need for each project, no need to download a separate css file again and I stiil get all the features that bootstrap offers.

*** No need to litter my HTML with unnecessary class names, helps with file size as well.

I'm not into SASS, not really into front end development, I'm more of a backend guy.........

hmm,I do know normalize.css ,I'd look into this some other time, I use zurb foundation though

Real shii is going down here.
Following with speed.

BUILDING A WEB PROJECT FROM START TO FINISH

All done!!! Yipee!!!

Screen shots for mobile view attached.

Let's get it up online so that we can all interact with it

Jregz:

I'm not into SASS, not really into front end development, I'm more of a backend guy.........

hmm,I do know normalize.css ,I'd look into this some other time, I use zurb foundation though

Foundation is cool as well. They have some of the best designers on their team

BUILDING A WEB PROJECT FROM START TO FINISH

Screen shots from mobile view attached

By the way, I used opera mobile emulator for testing it out on mobile.

BUILDING A WEB PROJECT FROM START TO FINISH

We are finally done with our project and it's up online

Here's a link to the live version of our project:

http://b it.ly/1epMcdq (Please copy, paste and then remove the spaces. Nairaland cuts off some parts of the link)

BUILDING A WEB PROJECT FROM START TO FINISH

If there are questions, please ask them here and I will do my best to answer them all.

I'll be giving a break down of some of the decisions I took for the page.

blueyedgeek:
Foundation is cool as well. They have some of the best designers on their team

yeah...why design the footer like that for mobiles, looks a little bit too long...


hmm,nice job though.......

1) background color of the menu to match site's color theme? See below.

2) The main pic becomes cropped on mobile your decision: it's either tolerating the Img crop or potentially have aspect bars if either max-height or max-width media queries properties becomes botched on certain mobile devices.... no biggie... looks good