1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Website Building Process - What's yours?

Discussion in 'Web Design' started by SYAWEDIS, Jul 12, 2012.

Thread Status:
Not open for further replies.
  1. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    Hi,

    I've been designing websites for like 3 or 4 months now, and I always make them from scratch. I look around for inspiration and what not, but it's always from the ground up.

    I was just wondering what most web designers do -do you usually start with a template or draw out a frame first? Do you get them online or make your own?


    I tried searching for a thread like this but I had no luck, so if this is somehow a duplicate thread I apologize and feel free to delete / lock it (but please redirect me first! :cool:)


    Thanks,
     
  2. agente808

    agente808 Regular Member

    Joined:
    Aug 23, 2009
    Messages:
    458
    Likes Received:
    196
    Location:
    on Vacation
    I start with 960.gs for the layout or "frame" (http://960.gs)
    It helps with alignment of elements.

    from there I design in photoshop from scratch

    for converting into a usable template, I have a framework for the coding already set up to make conversion faster
     
    • Thanks Thanks x 1
  3. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    Thanks for the link. At first I was like huh? o.0 but after reading a bit and looking through their slideshow it makes a lot of sense to use the grid system. I normally just do the math myself, which isn't so bad because I like the numbers, but when it comes to efficiency and speed I can see how the grid system can be a valuable tool.

    I'm gonna look into this some more :)
     
  4. kralcx

    kralcx Junior Member

    Joined:
    May 25, 2010
    Messages:
    164
    Likes Received:
    49
    I second the 960 grid system. I sometimes use a template; either way I hand draw a wireframe to start. Get my ideas on paper. I then make a Style Guide Documentation http://www.alistapart.com/articles/writingainterfacestyleguide/ so I know about fonts, colors, background images, accessibility, etc.. I use http://colorschemedesigner.com/ to keep me from messing up my colors. I then gather illustrations and pictures that I will use (sometimes I pay for these). Then mockup in Adobe Fireworks; which makes sending editable pdf files (for feedback) to a client a breeze. Then I hand code in Dreamweaver. Lastly I'm sure to do cross browser testing.

    I make sure my css and javascript is external as much as possible; it makes it easier for future edits (for example if I want to make the site responsive). And I also make sure to keep all original files such as text files, MS Word files, psd, firework png files, etc. Never know when you might need these in the future.:cool:
     
  5. Zapdos

    Zapdos Power Member

    Joined:
    Oct 22, 2011
    Messages:
    597
    Likes Received:
    708
    Location:
    Eastern North Carolina
    The 960 grid system is becoming a standard quickly. I see so many themes based off of it.

    As for how I do it, I do it from scratch or a template. Depends on how lazy or how inspirational I'm feeling. Also depends on if I can find a good template and if not, I go from scratch. Normally I first determine what I'm trying to accomplish and all the ways to do it. Will a front page rotation be beneficial or detrimental? Do I need to keep an user bar in the view or no? What colors will make them convert better? Will it fit with the logo? Then I go into photoshop and start doing basic design. Get the boxes where they should be, give some color and add text. Does it look good? If so, continue and refine it with a typography layout. If not, redo.

    Unfortunately I'm hitting brick walls on ideas for my latest project and not finding any suitable themes. Sucks to be me lol.


    Edit:
    To the previous poster who recommended colorschemedesigner, that's a good idea. Done it before, but with a different website. Infact, its adobe and people share some nice contrasting and complimentary colors. http://kuler.adobe.com
     
    • Thanks Thanks x 1
    Last edited: Jul 13, 2012
  6. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    Thanks for contributing.

    The grid system seems like a logical way to design websites for sure, still trying to wrap my head around it though.

    Colorschemedesigner confuses me a little, though. Maybe I just need to practice with it, but the color combinations it suggests don't seem that tasteful, or at all common, imo.
     
  7. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    I like the adobe link much better for color combinations, thanks for the share!


    Is there a good source somewhere with a number of different layout templates?
     
  8. Irukichan

    Irukichan Registered Member

    Joined:
    Jan 19, 2010
    Messages:
    75
    Likes Received:
    40
    I disagree and believe the 960 grid system is quickly becoming outdated in today's web design.

    Sure, you still see a lot of people on Themeforest touting their 960 grid perfection, but let's face it--they are usually the last people to adapt to new web trends. The new design trend is moving towards wider layouts to match the growing screen real estate and especially towards responsive design.

    I never touch Dreamweaver, I think it's a design crutch in a lot of ways. I also think that it's better to have a typography boilerplate and design text in-browser as it's quicker, easier, and more true-to-form than doing it in Photoshop. I used to design using Thesis as a starting point for Wordpress (and I sill often have requests for it), but now I much prefer using my own code base. It's not a framework because I don't want uselessly bulky code--just a good boilerplate for a fresh design. I try to keep my designs as clean and image-free as possible for loading time so I do progressive enhancement for all browsers.

    For color schemes, http://www.colourlovers.com/ is totally awesome and crowd sourced, and most of my textures come from http://subtlepatterns.com/.

    I TRY to use responsive design everywhere that I can, but there are some situations where it just becomes very difficult and mobile sites or apps are the more logical solution.
     
    • Thanks Thanks x 2
  9. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    Thanks for the input, your replies are always very informative. I agree on dreamweaver, I was always told it's a bad habbit to stay away from which is why I jumped into hand-writing all my html from the get-go. I haven't touched WP yet, but I've been meaning to look into it, I just have a lot on my plate right now. I don't know what a typography boilerplate is but I've heard you mention it before, gonna look into it. I tried looking into google fonts but had a hard time finding a narrow + tall font, and kind of gave up. What's your thoughts on google fonts? You said you try to use as few images as possible (me too) , but do you ever use PNGs or do you color match the background to your image and save it as a jpg for faster load time? TY TY for the color link and especially those patterns, been looking for something like that. :)
     
  10. DeskCoder

    DeskCoder Regular Member

    Joined:
    Feb 20, 2008
    Messages:
    376
    Likes Received:
    55
    Occupation:
    Coder
    Location:
    Kentuckiana
    I usually start with something like bootstrap - http://twitter.github.com/bootstrap/ - to get a responsive web design. There are other frameworks out there, but I like this one the best. It also comes with a grid system, which is nice.

    I always start building the HTML only to start. I don't worry about CSS or colors or anything like that. I stub out the HTML ... layout all the sections I want (header, main content, sidebar, footer). After I get everything in place with the HTML, I finish the layout with CSS.

    Another cool thing about Bootstrap is that it comes with LESS - http://twitter.github.com/bootstrap/less.html - this saves me from having to choose colors because I can name variables for the colors (like @mainColor, @secondaryColor), and I can change these at anytime. After I get the layout done ... which means floating and positioning everything where I want it.

    Finally I work on color. I second Kuler, I really like that site. I also look for inspiration from CSS galleries and places like that. But somehow I also go to my fallback - blue and orange (Detroit Tiger colors).

    NOTE: I don't do a lot of PHP, but I am getting into it, so I may have to tweak this style to compensate.
     
    • Thanks Thanks x 2
  11. Zapdos

    Zapdos Power Member

    Joined:
    Oct 22, 2011
    Messages:
    597
    Likes Received:
    708
    Location:
    Eastern North Carolina
    I love google fonts. Open Sans is my default for now, with Muli as a close second. http://designshack.net/articles/css/10-great-google-font-combinations-you-can-copy/ Some great combinations there
    Will likely start using @font-face though and see what works better.

    Never use PNGs unless you need lossless quality (running a HDRI image site) or transparency. PNG is just a waste of space and bandwith unless you need it to look 100% original or transparent. They also sometimes help when working with grain in patterns since JPG alters colors a little and can throw it off.
     
    • Thanks Thanks x 1
  12. FunkyWaltz

    FunkyWaltz Junior Member

    Joined:
    Aug 22, 2011
    Messages:
    112
    Likes Received:
    82
    960 grid is the only way to go.

    Open up the photoshop template, and the possibilities are endless. Makes for a very quick process at that.
     
  13. Bazinga

    Bazinga Newbie

    Joined:
    Apr 24, 2010
    Messages:
    16
    Likes Received:
    3
    Occupation:
    Bazinga People
    Location:
    6 Feet Under
    PSD > Slicing > Templating using getskeleton > WP Themeing using Toolbox/TwentyEleven
     
  14. blackhatdamo

    blackhatdamo Registered Member

    Joined:
    Apr 6, 2012
    Messages:
    86
    Likes Received:
    27
    Location:
    A dark place
    Hi there I have been making websites for a few years now and usually start with a rough mock-up / wireframe of the layout and sizes. Then I code the basic layout, do graphics, put it all together, Unless its for wordpress then I do the wp integration after the code.

    The 960 grid system is good, you cant really go wrong if you use this. Also for responsive layouts there is one out called bones which is HTML5.

    Also for making WP themes there is a blank theme called starkers, although I found it easier disecting the twenty ten theme.
     
  15. Zapdos

    Zapdos Power Member

    Joined:
    Oct 22, 2011
    Messages:
    597
    Likes Received:
    708
    Location:
    Eastern North Carolina
    I've been reading up on bootstrap and LESS (have heard of it before, didn't look into it much back then) and it seems to be a great way to start out. Definitely look to speed up the process and make it more consistent on both the layout and css part. Always hated copy+pasting colors from a secondary text file describing all the colors.

    Thanks for the links!
     
  16. Irukichan

    Irukichan Registered Member

    Joined:
    Jan 19, 2010
    Messages:
    75
    Likes Received:
    40
    A boilerplate is just something that can be used and reused in different contexts--a general starting point for a design. One pretty cool typography boilerplate can be found here: http://type-a-file.com/#seafarer. I used it as a basis for creating my own boilerplate that I use to start every project. Also, I can never really find fonts I want to use from Google's API so I usually use font-squirrel's @font-face generator. The only bad thing I can think of for Google fonts is that you can have a flash of unstyled content when users view your website. Some visitors will see your website styled in default system fonts for a second before the actual fonts load.

    As already mentioned, PNGs should only be used in circumstances where they are needed. I have several transparent "texture" PNGs that I use to overlay background colors and of course it's much easier than colormatching everything. It does require the workaround for IE6, but that's not too bad.

    If you're looking to get into WP in the future, I'd like to reinforce that it's not difficult at all. It only takes a few days if you've already got the HTML/CSS thing down. I can be impressively bad at PHP and still do fine :D
     
    Last edited: Jul 15, 2012
  17. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    Thank you for these useful links! I haven't heard of bootstrap but you make it sound pretty useful, especially the LESS color thing.

    I'm kind of confused about boilerplate still, and that link didn't really explain it for me, but it was a good read nonetheless. I really don't like the sounds of the flash of unstyled content with google fonts. You use a font generator you said?

    I know that you only should use PNGs where you have to, but I was wondering if people go a step beyond that and just color match the background to your logo for example, and save it as a jpg instead of a transparent png.

    BTW, is IE6 still part of standard cross-browser testing?
     
  18. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    I forgot to mention thanks for that link, btw! There are some great combinations for sure. :)
     
  19. WPRipper

    WPRipper Supreme Member

    Joined:
    Mar 24, 2010
    Messages:
    1,377
    Likes Received:
    1,493
    Location:
    Proudly romanian
    Complete nonsense.
     
  20. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    what part is nonsense?
     
Thread Status:
Not open for further replies.