Results 1 to 10 of 10

Thread: [RESOLVED] graphic designer needs your CODING POWER help.:)

  1. #1
    Join Date
    Jun 2014

    resolved [RESOLVED] graphic designer needs your CODING POWER help.:)


    Thank you for your time and that you're reading my message here.
    I really hope for your help.

    I'm a graphic designer (logos/identity) and don't know almost anything about HTML5/CSS3.
    But I want a website to be a more serious designer and have no $ right now.:|
    I have been dreaming about my own website for the past 6 years...

    Yesterday I found a free "responsive" template and now I'm TRYING to turn it into want I want.
    Considering that I'm not a developer/coder/programmer it's a try-and-see-if-it-works "customization".

    I realized that it's almost impossible for me to turn that template into what I would LOVE, at least not in the next 3 months of guessing+analyzing what is where in its code
    And it will not be clean/simple/proper/smooth code at all after MY CUSTOMIZATION)))

    I dream about a 1-page, scrollable "perfect" grid of images and a contact form at the bottom.
    Think about tiles.
    They're all 262x262 squares in that template, probably different sizes would pose a threat for "responsiveness" thing.:|
    I want images of 7 different sizes in the grid: 1x1, 1x2, 1x3, 1x4, 2x2, 2x3 and 2x4 squares.
    Images of standard sizes, non-clickable/tappable, non-zoomable, just showing info on 80% cover when mouse is over them.
    Don't know if it is possible to make it easy to add new images("works") to it, choosing one of those 7 standard sizes.^^
    Simple and clean.

    This is OneDrive link to my Illustrator mockup of my dream website. http://1drv.ms/1oadRPT

    Maybe somebody can help me with my website. Maybe I can be useful for you too.
    Excuse me, if I ask too much or something weird!!!
    Thank you for your time.


  2. #2
    Well, you're not going to like my opinion of this.

    Grids? Garbage design! multiple perfect width perfect height elements? Garbage design! Designing in pixels? Garbage design! Header logo larger than some netbook and ultrabook screens? Garbage design! Design that's more than 2600 pixels tall? Garbage design and too much **** on one page. (hence why that whole parallax thing that's trendy right now is accessibility and usability rubbish) Playing around with layout before you have content or a reasonable facsimile of future content marked up semantically? Do I have to say it?

    What you have done isn't web design. You've drawn a picture in Illustrator that begs a number of questions:

    How is it going to expand on wide screens?

    How is it going to re-arrange itself on small screens?

    How is it going to elastically expand or contract to fit the users default font preferences?

    What you have is what happens when a print designer or graphic artist decides they want a website, without learning about web design first. There are a whole slew of accessibility rules (called the WCAG, web content accessibility guidelines), as well as rules about HTML and CSS you should know BEFORE you even THINK about what the page is going to happen to look like on the screen in front of you.

    ... and with a well written website, what it happens to look like on your display may have Jack to do with what it looks like for someone else; that's what "responsive layout" is supposed to be about.

    My advice, learn what websites are and what they are supposed to do BEFORE you start playing around in some goofy paint program. That means HTML, CSS, accessibility, semantic markup, separation of presentation from content, progressive enhancement, and a whole slew of other things that are required if you want to build a website that is actually useful to visitors.

    ... as opposed to something flashy looking on your display, that's ultimately useless on anything else. Again as I often say, people visit websites for the content, NOT the goofy crap you hang around the content. That's a bitter pill for artsy folks to swallow (I was there myself a decade ago) but at the end of the day the BEST layouts and designs are the ones you don't notice as a visitor! Why? Designs are NOT what you are there to see on a website. CONTENT IS! If you notice the design, there's probably something wrong with it!

    Basically, a website should be like Bruce Lee's bit about water. You pour it into a cup, it becomes the cup. You pour it into a bottle, it becomes a bottle. You pour it into a kettle, it becomes the kettle.

    You load it onto a desktop, it becomes the desktop. You load it onto a tablet, it becomes the tablet. You load it onto a phone, it becomes the phone.

    That's basically what elastic semi-fuild responsive design built with progressive enhancement -- the PROPER way of building a website -- is about.

    No matter how many sleazy scam artists in the industry fill "houses of ill repute" like ThemeForest and TemplateMonster with their bloated, slow loading and ultimately useless crap to bilk people who don't know any better out of their money.

    Be like water my friend...

  3. #3
    Join Date
    Jun 2014

    Thank you for your reply)))

    I'm not a web designer and DON'T WANT to become one, it's too engineering/math to me.
    I haven't called my Illustrator picture-illustration a "web design", it's my DESIRED picture-"mockup".

    Big logo-header is not just useless for logo, I want to add there text, because I have no other place to add it.

    Q: How is it going to expand on wide screens?
    A: I don't want it to expand on wide screens.

    Q: How is it going to re-arrange itself on small screens?
    A: Honestly, I don't know how I want my website to look on small screens at all. Maybe RESIZED as a whole? I don't know.

    Q: How is it going to elastically expand or contract to fit the users default font preferences?
    A: I don't know.

    Definitely I want my website to look great on DESKTOP computers + look not awful on small screens.
    And it should be almost only IMAGES, website-images.

    That's why I need help.

  4. #4
    Join Date
    Jun 2014
    Cairns - Australia
    You dont want to be a web designer.. Ok Cool!...

    In that case what you need is a CMS (Content Management System)...

    Basically you put a program in the page and it does 90% of the work.. You just put things where you want!

    - Wordpress templates
    - Joomla templates

    to get a quick idea.. Over 100 million websites use this style.. makes the job easy for newbies and there free....

    Your looking at 1 week learn and play.. 1 week to make your project... On-line and easy in 2 weeks sounds more like your plan... Luck!

    Shadow: "Like Water"... Pure gold brother!

  5. #5
    Join Date
    Jun 2014
    Thank you a lot!

    I've heard about CMS, but wrongly thought that it is for more "standard" websites, I mean with buttons, pages, columns, other elements like comments/blogs...
    I'm going to Google WordPress/Joomla templates right now.

    I clearly understand that DIFFERENT sizes of images in the grid would hurt "responsiveness" of my website,
    but I'd LOVE to be able to make some images/works BIGGER in the grid, "HIGHLIGHT" them, have more space for them.

    If my original attached "concept"/picture/image/illustration can work and look great on desktops and can resize itself SOMEHOW on small screens and you can make it work for me, contact me ASAP Please, help me to launch my semi-responsive miracle.)))


  6. #6
    Join Date
    Mar 2012
    I don't see the page, as described, being at all responsive. Given that:

    a) The content is primarily graphical, not text.

    b) The largest images are four units wide.

    c) The whole layout is four units wide.

    The layout cannot be less than four units wide (unless you omit or scale down the larger images). It seems that you do not want the layout to be more than four units wide (however large the screen is). So it is fixed at four units wide, which is o.k. Not every site has to be responsive. As for smartphones/small screen devices, the layout can be scaled to fit the device width.

  7. #7
    Join Date
    Jun 2014
    Thank you for your answer!

    I would like to add
    that the picture/illustration/"mockup" I have attached consists of 7 different IMAGE SIZES I just want to be able to add.
    that picture is not the final arrangement of images/works and there will be MORE 1x1 squares-fillers, if this can help resizability and arrange-abilty of that website.

    I would be 100% happy if:
    it can be done that way
    it will work on desktops
    it will work on small screens somehow

    "Gridster" looks nice for me ( http://gridster.net ), but I have no idea HOW it displays images and WHAT happens to them when a user resizes them manually.

  8. #8
    Join Date
    Oct 2013
    3rd planet from the sun
    Look for a template close to what you want. Then change text, images, color, etc. to your liking. Make sure the template you choose is responsive.


  9. #9
    Join Date
    Jun 2014
    thank you too

  10. #10
    Join Date
    Jun 2014
    Thank you for your answers!
    No more help needed, I've achieved what I want.

    Good luck.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.21275 seconds
  • Memory Usage 2,943KB
  • Queries Executed 13 (?)
More Information
Template Usage (32):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (10)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (10)postbit
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates