Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


Designing as a Coder - A Nightmare
New on LowEndTalk? Please Register and read our Community Rules.

All new Registrations are manually reviewed and approved, so a short delay after registration may occur before your account becomes active.

Designing as a Coder - A Nightmare

BigBlueBigBlue Member
edited August 2012 in General

Hello, dear LET-fellows,
I am pretty sure that at least some of you will know misery I am currently in. (sounding dramatic is kewl)
Well, I don't got too much problems setting up the server, the CMS, the whole back-end actually.
But when it came to the front-end, I can sit hours trying just to completely throw everything into the trash at the end.
As a budget-limited "one-man-army" I can't "just hire" a designer to do the work, heck, I don't even have a solid concept after a week.
Currently I don't know how to continue. I got the tools, I got the basic idea, I got the will. I even got a tiny bit of skill. But it just won't work...
Can anyone - preferrably someone who has been in a similar situation - recommend me any kind of help?
Please, no 600 page Photoshop mastering eBooks, but also no 2 page "just-do-what-I-do" tutorials, something... agh, I don't know, something that might help. ^^"
Thanks in advance. :)

Comments

  • AlexBarakovAlexBarakov Patron Provider, Veteran

    Yup, been on your place.

    Going to kill all your dreams now :D - either you are a designer or a coder. Me - I'm a coder and every time I try to design something... Well it looks like it came from the 90's. A bunch of my friends around me (coders) are the same as me.

    I asume you could always start reading and following different tutorials and after weeks of effort, something might (or might not) pop out.

  • telephonetelephone Member
    edited August 2012

    Best advice I can give you is to learn Bootstrap, Foundation, and Kickstarter:

    Bootstrap
    Foundation
    HTML Kickstarter

    Yes I'm well aware of all the cynics complaining that "you can always tell it's a Bootstrap site", but it's better than making a design from the 90s.
    At least with Bootstrap I can create a decent platform to showoff my code without investing extra money into design.

    Thanked by 2Xeoncross Indic
  • @Zen: Well, I'm glad I'm not alone, but hiring a designer is just not possible for me, as I want to do a private project, and as a student I'm already kinda limited in terms of funds. ^^

    @Alex_LiquidHost: Yup, you completely shattered my confidence, no, my whole inner existence, now I am depressed ._.

    @telephone Aaand there it is again, the confidence, the existence... Those 3 projects all look promising, I'll give them a shot in the next days and I am pretty

  • AlexBarakovAlexBarakov Patron Provider, Veteran

    I have used Kickstart and Bootstrap, both really easy to use.

  • telephonetelephone Member
    edited August 2012

    @BigBlue said: Those 3 projects all look promising, I'll give them a shot in the next days and I am pretty

    For Bootstrap, checkout the following:

    Font Awesome
    Bootswatch
    WrapBootstrap

    1) Font Awesome provides a great set of icons that elevates your design, that much further.
    2) Bootswatch is a great site that provides simple pre-made color schemes for Bootstrap. I tend to use their themes as a base for designing. (If you're using the themes with Font Awesome, you'll have to edit the css and remove all .icon entries).
    3) WrapBootstrap is a marketplace for Bootstrap themes, but majority of the sites have live previews... I found them to be very helpful when learning how to transform the top navbar into a normal menu :) (getting rid of the ugly top navbar)

    Thanked by 1jcaleb
  • joepie91joepie91 Member, Patron Provider

    A good way to set up a non-framework layout as a developer: learn basic CSS (colors, fonts), use Google Webfonts, learn to work with CSS border-radius, and carefully pick colors. Keep your page design simple. A gradient here and there may be useful, but only if it's subtle. Photos combined with semi-transparent elements often work well as well.

    Don't bother with using Photoshop or anything else image-based - CSS is incredibly powerful already, and adding images will only make it more complicated to get a proper looking design. Preferably, avoid the use of images altogether (icon fonts are often useful for icons).

    Thanked by 1telephone
  • XeoncrossXeoncross Member
    edited August 2012

    @joepie91 said: Don't bother with using Photoshop or anything else image-based - CSS is incredibly powerful already, and adding images will only make it more complicated to get a proper looking design. Preferably, avoid the use of images altogether (icon fonts are often useful for icons).

    This.

    First you need to design for your content. What are you showcasing, how can you arrange and highlight it so it's easy to read and navigate?

    After all that is done you can, possibly, if you're good, add a couple images to give it that final finished feel.

    In addition, most people just use the bootstrap templates as-is and then complain it looks like a bootstrap site. Bootstrap is a great baseline of styles that you can completely tweak to match your own style. I just finished a site built with it and I doubt anyone knows I secretly used bootstrap.

    Join sites like http://forrst.com/ and http://dribbble.com, then start watching CSS galleries or browse http://themeforest.com and learning how to dissemble and rebuilt the layout (not the design).

    A great way to start is to work on minimalistic designs which are just simplified versions of many other layouts.

    You might also want to download and work on https://github.com/Xeoncross/microtheme/ to see the 3 common layout styles almost every site uses.

    EDIT: here is an site I just ran across today built with bootstrap: https://kippt.com/. Notice how easy and joyful it is to navigate the site because they designed it for the content first.

    Thanked by 1Soylent
  • i prefer to work with frameworks, favorite bootsstrap and foundation :)

    Im not a pro about desugn but i always try to domy best. i recomend you look around themeforest or woothenes in order to get some ideas ;)

    Thanked by 1Taz
  • Instead of photoshop, you can use pen and paper to draw your layout as guide. Then straight html+css.

  • Never heard of bootstrap, thanks for the share!

  • IntcsIntcs Member
    edited August 2012

    Many years ago I used to feel horror whenever I need anything "design", then I've learned design over time, and even after that it's sometimes (for me) a large time consuming thing to do an original design (could be like coding time or more/less), of course I'm not talking about how much time it takes a professional in design to do the same design I do, it's just me and people not so professional.

    So you might consider getting the help of a freelance designer or a company for a small amount, as it might help save some effort for other things if your project is really big. If it's small or you feel like handling it then in that case I guess the best is doing it by yourself, as sometimes that makes the finished thing look better.

  • Tried bootstrap and I'm still not pleased with the look >.>

  • @Corey said: Tried bootstrap and I'm still not pleased with the look >.>

    Did you try different themes/versions?

  • I guess you really need that top navbar in bootstrap to make it look good huh?

  • I'm using it for a project I'm working on. I dropped the navbar below a more traditional header, and it works great. I have a bit of js to fix it to the page as the user scrolls, but I'm not sure I love the fixed header look.

    The real reason to use Bootstrap is for the grid system that dramatically simplifies designing for multiple resolutions. All the rest is just gravy, and of course if you don't edit those styles then it's going to look like every other Bootstrap site out there. I doubt anyone would know my site was using Bootstrap if they didn't check the source.

  • CoreyCorey Member
    edited August 2012

    @Soylent if you knew some basic css like floating then the grid system isn't that awesome and you have more flexibility without it. Although I do agree it is very quick to place elements on the site with the bootstrap grid system.

  • krokro Member

    As a coder who cannot design. CSS.

  • rev3rserev3rse Member
    edited August 2012

    Same problem here, I'd prefer working on any server-side code for a month instead of designing a usable and eye catching homepage.

    Anyway, I improved a little bit by reading some articles about web design and color theory and ofcource the great(and 200 pages) usability book (Don't make me think).

    By the way, thanks @joepie91 for Google web fonts. And thanks guys for the information about CSS frameworks which I just heard about.

    Good luck.

  • I'm really bad to matching colour, even using color scheme

Sign In or Register to comment.