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

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

Working on the navigation and the intro section

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

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.

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

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 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

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.

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.

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.

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?

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

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.

dhtml18:
Nice

Thanks oga at the top! how far with your tutorial na?

tgmservice:
You guys must be sooooooo stewpid thinking u will learn programming through a forum

There are better ways to express your opinion(s) without insulting people.

Craigston:

The contact form is okay and encourages potential clients to make the decision to contact you. It makes it easier for them since they can just do it immediately. Having your work phone number there may be a good idea. If you have a LinkedIn or an elance account, put it there (let all your work accounts be interlinked)

I've added my linked in account there. I don't have a work phone number yet sha but you're right, it would be a good idea to add it there as well.

You can make it simple and still use colors correctly. Do you know that gray scales have different on moods as they vary between black and white? Just a hint.
https://en.m.wikipedia.org/wiki/Color_psychology
www.helpscout.net/blog/psychology-of-color/
www.forbes.com/sites/amymorin/2014/02/04/how-to-use-color-psychology-to-give-your-business-an-edge/

Yeah, I read something about color psychology on smashing magazine once like that. I'm still working on becoming better with using colors in general

I may come back to this. No answer for now.

Cool

If you use HTML5 and CSS3, specify them. You use SASS? Specify it. Any CMS or libraries? These can be subtly added to give the 'he's-the-man' impression. People seem to fantasize over the latest technologies and forget the core.

You know I always find it funny when people separate HTML, CSS, HTML5, CSS3 as separate skills all independent of each other when in fact they are just new versions of the existing languages but what is good for business is good for business sha.

Nmeri17:
seen bro. you're far too kind. gist boku o

by "no be here" I mean, the portfolio too tight!! your aesthetics game is on level 100 I'm even considering shifting that church's site and other projects to you as beautician/florist wey u be

Lol, florist no be am oo. I don't think I've even gotten to half of 100% but I appreciate the sentiments bro.

cyrielo:
Your design is cool, you've really improved See you @ bootcamp on monday

You got into Andela as well? I would like to meet you there ooo.

delomos:



Interesting, 3 questions --
1. What other places do you recommend?
2. What will make a program like this useful to you?
3. How much will you be willing to pay (by the way, the developers I'm hoping to work with, included myself have deep international experience)?

1. It's kinda hard to find people who are actually interested using just nairaland alone. Most people that would be interested would likely start with the programming section so having this here already has that covered. I would have recommended the webmasters section but that section isn't really filled with people you would likely be looking for. Using social networks would be good. I'll also recommend you look into researching existing code camps (yes they do exist. Chub runs one that I'm aware of) and look into how they get interested young people (you could even try partnering with them). Look into schools for people just coming out (ss3 set) that are interested in stuffs like this or would be interested and get them interested enough to commit.

2. Different people would have different reasons. I am very passionate about this stuff and hence any opportunity that presents itself that would enable me become a better developer, I would jump that.

3. Not too much and not too little. I know this answer is kind of vague but I don't really have any specific price off the top of my head. It shouldn't be too high so that anyone with an interest can participate and shouldn't be too low so that you as the organiser doesn't run at a loss. Just find a balance. (and also make it free for a few people who show potential but just don't have the money and also people who answer your questions on nairaland, hehehe)

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.

Awesome idea if you ask me. I'll suggest you put this up on a few other places as nairaland's programming section has a low amount of visitors and the people that do come here are already experts (sort off) in their respective fields with a few being extreme newbies. If the code camp will be extremely newbie friendly, affordable and is okay location wise then it would make a lot of sense to start something like this. All in all, good stuff.

P.s: I'm a newbie

I'm not really looking for a job but I would like to take a shot at this (as a learning experience).

AAinEqGuinea:
I like the simple color scheme and layout.

Feature more of your work.

otherwise, the site looks good

Thanks! Comment appreciated.

Nmeri17:
owky. That stuff deadline na today. 5:30. so I need spikes to vet it before then.

I've replied your mail bro.

@topic this your site nor be here o

What does this mean?

Nmeri17:
chairmo pick yo phone naa

Sorry bro, I'm trying to reply your mail.

Craigston:
(I am viewing your portfolio on opera mini.)
I like the simplicity. I don't have much knowledge about portfolios and such, so I can't tell how professional it is.

Cool, that was what I was aiming for; simplicity above anything else.

I like the contact form: good idea.

Thanks, what do you like about the contact form? How do you think it can be improved?

Did you use a template? The braces around Chinedu aren't cooperating.

No, I did not use a template, it's all built from scratch using HTML + Css / Sass ( bourbon + bitters + neat + refills ) + Javascript
The brace were used purely for aesthetic reasons with a fancy font face to boot (But opera mini doesn't support @font-face rule hence it doesn't display that way. I'll remove it for opera mini since it's pointless on the browser).

Your choice of colours is important. Apply some colour theory/psychology and use it to your advantage.

The lack of color or little use of color was intentional as I wanted it to just be dead simple and responsive.

Though you are not a firm, branding yourself a little can help.

You are right about that. How do you think I can improve on that aspect?

Do you use any other technology for your work? Add them.

My 'technologies' are HTML, CSS and JavaScript and I think I mentioned it there clearly. When I do gain more skills and learn new technologies, I'll add them in as well.

I like your work. I wish you more success.

Thank you! Your comment is very much appreciated.

mlm20:
you link is not clickable sir

Yeah, I don't know why but when I try to link to the page using Nairaland's BBcode tag for inserting hyper-links ([url][/url]), it cuts off some parts of the link and so I decided to type it out directly. Sorry for the inconvenience.

Evening folks, I finally came around to building a portfolio site and I would like to have it torn apart reviewed by the able folks on nairaland. It's a very simple design and it's just one page. It's still a work in progress and I would like to improve it.

I hope to put it on a proper domain soon

Here's the link: http:// b i t .l y / 1BVereX (Please remove the spaces after copy, then paste thanks. Nairaland is messing with the link)

toystars:


Congrats for the bootcamp callup. I'm sure you will enjoy the program. So to your question. The bootcamp runs for two weeks and you will build on what you've learned from the homestudy tutorials. But it's all basic though. Just be confident and show you want to learn.

Yeah, everything must feel basic for you now right? Oga.

So, do we work on mini - projects and stuff?

Thanks for all the help.

dami9ja:


Congrats bro! All the best. Is this your first time applying?

Second time actually.

@ezra, @toystars, I just got called up for boot camp, it would be nice to get some inside info on how it all works. Thanks a million