Web Development - WAYWO - #8

[Proffrink]

I know I'm probably not going to get a great deal of agreement on this, but I've found that Bootstrap makes it very hard to change anything beyond colours - try to do anything special with layout and elements, and you'll find yourself with a fair bit of work on your hands.

Just stick to the way Bootstrap handles things; it does it fairly well. I'm not saying that you're thinking of going above and beyond with this, but if you do, then yeh, it'll be a fair bit of work.

This is by no means a perfect example of what can be done with Bootstrap, but I guess it's a good illustration of the fact that is handles very shallow edits quite well and is fairly adaptable. I know this is all kind of obvious, but I must stress that the few times I've tried anything beyond colour changes, it's rapidly become more efficient to build something from scratch.

[t]http://i.imgur.com/cwL036L.png[/t]

Grab yourself a [url="http://subtlepatterns.com/"]subtle background texture[/url] find [url="http://www.colourlovers.com/"]a nice colour palette[/url], then add it to Bootstrap: [url="http://www.lavishbootstrap.com/?utf8=%E2%9C%93&image_url=http%3A%2F%2Fi.imgur.com%2FeDy8Gf5.png&commit=Go+Lavish"][1][/url] [url="http://paintstrap.com/"][2][/url] - keep the column layout nice and simple.

Bootstrap does control panel stuff pretty well a lot of the time.

[MuffinZerg]

[QUOTE=MuffinZerg;40556981]I fixed the website design I am making with your advices and also made it a bit lighter.

[url]https://www.dropbox.com/s/6muyqj850lc7qe2/Blog-a_ver2.png[/url]

Could you please tell me how to pick a good font?[/QUOTE]
Can I have some C&C?

[P1raten]

[QUOTE=MuffinZerg;40569002]Can I have some C&C?[/QUOTE]
To be honest I'd say that you'd be better off starting over.

Bring up photoshop or your preferred image editor and look at your current design.

Try to remake it, but keep to core, so to speak.

Here's some inspiration:

[url]http://www.hongkiat.com/blog/flat-ui-design-showcase/[/url]

[MuffinZerg]

[QUOTE=P1raten;40569131]To be honest I'd say that you'd be better off starting over.

Bring up photoshop or your preferred image editor and look at your current design.

Try to remake it, but keep to core, so to speak.

Here's some inspiration:

[url]http://www.hongkiat.com/blog/flat-ui-design-showcase/[/url][/QUOTE]

But why should I remake it? What's bad about it?

[P1raten]

[QUOTE=MuffinZerg;40570209]But why should I remake it? What's bad about it?[/QUOTE]
The color combination doesn't go that well together.

You have different shades of gray, white, black and lime green.

Try to stick to maybe 2-3.

There is no real structure in your website. The date for that post for example, it just looks like you randomly placed it somewhere.

Your tweets sidebar is way too big.

Your navbar is too big.

You should consider going with the 80-20 implementation.

80% content - the things that the user is looking for when going to your website.

20% functionality - navbar, header, footer, etc.

Right now it looks like you have around 20% content and 80% functionality.

[MuffinZerg]

[QUOTE=P1raten;40571292]The color combination doesn't go that well together.

You have different shades of gray, white, black and lime green.

Try to stick to maybe 2-3.

There is no real structure in your website. The date for that post for example, it just looks like you randomly placed it somewhere.

Your tweets sidebar is way too big.

Your navbar is too big.

You should consider going with the 80-20 implementation.

80% content - the things that the user is looking for when going to your website.

20% functionality - navbar, header, footer, etc.

Right now it looks like you have around 20% content and 80% functionality.[/QUOTE]

Thanks a lot. Then I will probably start over with a new style and color combination.

[P1raten]

[QUOTE=MuffinZerg;40572401]Thanks a lot. Then I will probably start over with a new style and color combination.[/QUOTE]
Whenever I'm not satisfied with a design I make a few minor tweaks.

And if I'm not satisfied I start all over with it and - like I mentioned before - try to preserve the core of the original design.

[SweFox*]

I wanted to have a site only for images and not for files like [url]http://boxfox.se[/url].

[url]http://imgfox.se/[/url]

[Map in a box]

[QUOTE=Proffrink;40568472]I know I'm probably not going to get a great deal of agreement on this, but I've found that Bootstrap makes it very hard to change anything beyond colours - try to do anything special with layout and elements, and you'll find yourself with a fair bit of work on your hands.

Just stick to the way Bootstrap handles things; it does it fairly well. I'm not saying that you're thinking of going above and beyond with this, but if you do, then yeh, it'll be a fair bit of work.

This is by no means a perfect example of what can be done with Bootstrap, but I guess it's a good illustration of the fact that is handles very shallow edits quite well and is fairly adaptable. I know this is all kind of obvious, but I must stress that the few times I've tried anything beyond colour changes, it's rapidly become more efficient to build something from scratch.

[t]http://i.imgur.com/cwL036L.png[/t]

Grab yourself a [url="http://subtlepatterns.com/"]subtle background texture[/url] find [url="http://www.colourlovers.com/"]a nice colour palette[/url], then add it to Bootstrap: [url="http://www.lavishbootstrap.com/?utf8=%E2%9C%93&image_url=http%3A%2F%2Fi.imgur.com%2FeDy8Gf5.png&commit=Go+Lavish"][1][/url] [url="http://paintstrap.com/"][2][/url] - keep the column layout nice and simple.

Bootstrap does control panel stuff pretty well a lot of the time.[/QUOTE]

Bootstrap has a page that lets you customize all the details: [url]http://twitter.github.io/bootstrap/customize.html[/url]

I also plan to add a sidebar, the current layout is pretty silly and inefficient.

[Killervalon]

[QUOTE=SweFox*;40574260]I wanted to have a site only for images and not for files like [URL]http://boxfox.se[/URL].

[URL]http://imgfox.se/[/URL][/QUOTE]

imgfox looks a bit confusing to me. I can't figure out where to focus.

Try keeping it minimalistic and clean.

[SweFox*]

[QUOTE=Killervalon;40575003]imgfox looks a bit confusing to me. I can't figure out where to focus.

Try keeping it minimalistic and clean.[/QUOTE]

What is the confusing part?

[Killervalon]

[QUOTE=SweFox*;40575039]What is the confusing part?[/QUOTE]

Everything. I can't figure out where to focus my eyes. I just keep looking around. Is it the Add to Album? Or do I need to login? Featured is that the ones if I'm logged in or is it something that's going to be filled later?

It's not as straight to the point as I would like it to be.
Also, you messed up the footer.
[img_thumb]http://i.imgur.com/qRJeGLE.png[/img_thumb]

[buhbang]

[t]http://i.imgur.com/nUqIhSy.jpg[/t]

I don't know if any of you guys remember this, but I'm working with friends to start this web app where students can add their schedules and see who's in their class. We're making it in to a business and we're already getting funding from people!
So excited :v:

I'm also considered a co-founder :eng101:

[Datzy]

[T]http://puu.sh/2PG3z.jpg[/T]

Starting a project for my Information Technology class. Any ideas? I need motivation and suggestions, [i]badly[/i].

[a7y]

[QUOTE=Datzy;40577700][T]http://puu.sh/2PG3z.jpg[/T]

Starting a project for my Information Technology class. Any ideas? I need motivation and suggestions, [i]badly[/i].[/QUOTE]

Has potential. Make the light grey darker and the text on the dark grey lighter.

[CBastard]

[QUOTE=Datzy;40577700][T]http://puu.sh/2PG3z.jpg[/T]

Starting a project for my Information Technology class. Any ideas? I need motivation and suggestions, [i]badly[/i].[/QUOTE]

A few quick suggestions: Colour, maybe on the navigation bar. Padding on the sides of the text. Left align the text including the heading. Black text on dark grey doesn't work very well. Bump the text boxes over to a side and add a sidebar.

Edit: Sloppy mockup

[thumb]http://i.imgur.com/GMpAjAz.png[/thumb]

[Proffrink]

[QUOTE=Map in a box;40574760]Bootstrap has a page that lets you customize all the details: [url]http://twitter.github.io/bootstrap/customize.html[/url]

I also plan to add a sidebar, the current layout is pretty silly and inefficient.[/QUOTE]
Yeh, I know, but I've found the results vary from decent to less-than-impressive.

It's totally fine for a control panel - looks better than most stuff.

[Datzy]

[QUOTE=CBastard;40577767]A few quick suggestions: Colour, maybe on the navigation bar. Padding on the sides of the text. Left align the text including the heading. Black text on dark grey doesn't work very well. Bump the text boxes over to a side and add a sidebar.

Edit: Sloppy mockup

[thumb]http://i.imgur.com/GMpAjAz.png[/thumb][/QUOTE]

Took your advice, here's my quick mashup.

[T]http://puu.sh/2PMcz.png[/T]
[T]http://puu.sh/2PMet.jpg[/T]
[T]http://puu.sh/2PMdW.jpg[/T]

(Didn't want to adjust the navigation bar since it'd be so much more of a pain in the ass, I can always do that later too.)

[b]EDIT[/b]: Anything else I should change?
[b]EDIT[SUP]2[/SUP][/b]: I'm writing a PHP script that'll send the form submission to my E-mail tomorrow.

[Kaido]

Working on my portfolio kind site.
[url]http://raisum.co.nf/[/url]

[xmariusx]

This idea come to my head, so I created it. What do you guys think?
[url]http://dl.dropboxusercontent.com/u/52732348/shared_development/dropdown/index.html[/url]

[Killervalon]

[QUOTE=xmariusx;40580968]This idea come to my head, so I created it. What do you guys think?
[url]http://dl.dropboxusercontent.com/u/52732348/shared_development/dropdown/index.html[/url][/QUOTE]

Err, I don't like what happens if you go out of the edge.

[CBastard]

[QUOTE=xmariusx;40580968]This idea come to my head, so I created it. What do you guys think?
[url]http://dl.dropboxusercontent.com/u/52732348/shared_development/dropdown/index.html[/url][/QUOTE]

Maybe a little arrow pointing down on the right to indicate what it is.

[xmariusx]

[QUOTE=Killervalon;40580998]Err, I don't like what happens if you go out of the edge.[/QUOTE]

Suggestions for what to do? :)

[editline]9th May 2013[/editline]

[QUOTE=CBastard;40581013]Maybe a little arrow pointing down on the right to indicate what it is.[/QUOTE]

That can be fixed :)

[Flashcat]

[QUOTE=xmariusx;40580968]This idea come to my head, so I created it. What do you guys think?
[url]http://dl.dropboxusercontent.com/u/52732348/shared_development/dropdown/index.html[/url][/QUOTE]

I don't really like how the dropdown menu moves upwards when your mouse pointer goes downwards, I have to be really careful to select the last item without making it close.

[xmariusx]

I should properly mention I didn't check for compatibility in other browsers, and testing now I can defiantly say you should try it in chrome to get the full effect.

I will of course make it cross browser compatible if it ends up in a design

[editline]9th May 2013[/editline]

[QUOTE=MrFlashcat;40581274]I don't really like how the dropdown menu moves upwards when your mouse pointer goes downwards, I have to be really careful to select the last item without making it close.[/QUOTE]

That's what the whole idea is based on :v:
It's something you have to adjust too, but I got a little idea which may fix that :)

[editline]9th May 2013[/editline]

The main idea was to lock the mouse Y position, but that isn't possible with javascript

[editline]9th May 2013[/editline]

UPDATED:

- Possible fix for "too fast" problem
- Icon form [url="http://icomoon.io/app/"]http://icomoon.io/app/[/url]

[editline]9th May 2013[/editline]

Thinking of it, that icon looks more like "download" than "dropdown"
It's just a placeholder anyways

[Darkwater]

[QUOTE=xmariusx;40580968]This idea come to my head, so I created it. What do you guys think?
[url]http://dl.dropboxusercontent.com/u/52732348/shared_development/dropdown/index.html[/url][/QUOTE]

Looks like something that can be useful with an Oculus Rift or so.

[Flashcat]

[QUOTE=xmariusx;40581283]
That's what the whole idea is based on :v:
It's something you have to adjust too, but I got a little idea which may fix that :)
[/QUOTE]

By adding more items to the list you get more response time to see whats happening before you get to the last item, but what if you only need a list with 3-4 items?

Also, if I move my mouse a bit upwards, the menu scrolls further down
[IMG]http://puu.sh/2PU41.png[/IMG]

[xmariusx]

[QUOTE=MrFlashcat;40581444]By adding more items to the list you get more response time to see whats happening before you get to the last item, but what if you only need a list with 3-4 items?

Also, if I move my mouse a bit upwards, the menu scrolls further down
[IMG]http://puu.sh/2PU41.png[/IMG][/QUOTE]

I added that last part so you don't accedently mouse out of the box. It's a 100px invisible border in the top and bottom

[xmariusx]

Updated with one short and one list :)

[TerabyteS_]

We haven't been doing much at school in the last few days so in the spare time I've written a simple brainfuck interpreter:

[IMG]http://gabrielecirulli.com/p/Brainfuck_interpreter-20130509-185947.png[/IMG]

It also has error reporting:

[t]http://gabrielecirulli.com/p/Centro_Notifiche-20130509-190352.png[/t] [t]http://gabrielecirulli.com/p/Brainfuck_interpreter-20130509-190528.png[/t]