www.webdeveloper.com
Results 1 to 5 of 5

Thread: Not Very Good

  1. #1
    Join Date
    Feb 2018
    Posts
    3

    Not Very Good

    Hi,

    I'm desinging my first proper website. After spending not very long on it and a few concepts later I realised I'm not as design inclined as I thought! What should I be reading to learn to make my website pop?

  2. #2
    Join Date
    Feb 2018
    Posts
    3
    Specifically, I'm interested in the visual design aspect.

  3. #3
    Join Date
    Jan 2017
    Location
    Madison, Wisconsin state
    Posts
    111
    Hi Lovely Jubbly,
    Beauty is always in the eye(s) of the beholder ... 'pop' I find comes from the imagery used (however manipulated, folded, and spindled) combined with the 'coded' results that make up the end-product (the web page as it is viewed in a browser (not all browsers render the same visual - rather a conventional visual)) ... no matter what, the 'pop' will be derived from the 'coded' layout of a 'design'. Many ways (as there are so many unique elements) that can comprise a web page.
    Are you writing from scratch or using a content management system (CMS - wordpress, joomla, etc.) or template(s)?

    Doug

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,868
    design phase has nothing to do with any code at that point. As the term itself describes, "Design" is the process of taking that idea out your head and then putting it on paper, ironing out the wrinkles, dotting the T's and crossing the I's as you go...

    Your post indicates that you want to design a site, then for that you only need a standard A4 tablet of paper and some pencils and a sharpener and eraser and it helps if you bring your ideas along with you. A proper design process does not see a computer in its initial stages. Many an idea I have had whilst down the pub and jotted something down on a beer mat or serviette.

    When you have a firm idea of what you want, you should at this stage be using a computer to "LOOK AT" things... No coding yet. You need to be looking at things you like, this is things like images, colours, shapes, texts (fonts), motion and so on. No just because you like it does not mean it is suitable for your website.

    Filtering, this is the stage where you look at the things you like and make hard choices based on a number of things, mainly too little in the site and people will not be retained as well as too much in the site and peoplr will not be retained. So what you want is a balance of interest and space.

    GOLDEN RULE : THREE CLICK RULE is a simple rule, if a visitor can not get to the information that they seek or to perform an activity to interact with you, it should not take more than three click from landing on your front page. I have complained to my mobile phone provider about their online services, an average of 8 clicks to get to do simple things like put in a complaint, change the tarrif you are on and so on... Remember THREE CLICKS. (Does not include clicking in to a search box!) a click is a link followed or button pressed.

    Software, you will require an editor of some sorts regardless of the path you choose to follow because you will either be editing code or writing code.

    If you have never coded, then editing code is going to be tough on you because you have to learn all the technologies simultaniously to fully understand whats happening... So I will say that you would be better off starting out with writing your own and build your site as you go and secure it properly and for this you would be needing to learn HTML (use HTML5 easily recognised as the <!DOCTYPE html> tag is the lates, any other variant is HTML4 or lower.

    Then CSS (IMHO) learn to manipulate elements on the page with CSS to position, size and place the element and also JavaScript but don't use javascript to change elements if CSS has that ability, saves lots of code that way.

    Then you may want to consider PHP and MySQL database at some point... and with that comes the use of AJAX (not to be confused with JQuery)

    Then learn a framework if you are so inclined, not a fan boy of these tools. Google guys may push JQuery as JavaScript (which it is written in but won run in) but it isn't, if it was JavaScript then you wouldn't need to include a library file, You may find if you work in an office for a big company, then you would need to learn a few frameworks, these span different technologies from server-side to client-side.

    But before you can do a Linford (Christie a fast runner in the UK, maybe because of the performance enhancing drugs, who knows), you have to learn to walk. So start with the basics of
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
      <title>The page title</title>
    <style>
    body {
      background-color: yellow; 
      color: red;
    }
    h1{
      font-size: 1.8em;
    }
    p{
      font-size: 0.9em;
      color: blue;
    }
    div#somediv p {
      height:300px;
      background-color: green; 
      color: white;
      inherit:parent;
    }
    </style>
    </head>
    <body>
    <h1>Your first web page</h1>
    <p>Hello, this is your first web page.</p>
    <div id="somediv">
    Here we have some text and problems with CSS rules..!
    <p>Question is, why is the text in different colours?</p>
    Clearly the text is contained within the DIV element but here we are...
    <p>different colours? Can you guess why?</p>
    </div>
    </body>
    </html>
    Bit of a simple example, you can obtain much more finer control over your web page look with the use of CSS, however, rules is rules and CSS is only following what it has been told. Shows you that you have to be careful with your rules, how to size, etc... that CSS has same power in fewer lines of instruction and with newer CSS you have ability to animate elements on a page with CSS.

    You can also follow threads on here to pick up how script and HTML fit together and how PHP (server-side) elements contribute to a web page functionality.

    With any design process, its got to be logical to the user, don't get them doing things because its some feature you want people to use, seen those sites before and utterly pointless, be practical, don't waste peoples time and get to grips with the `nettiquette` rules, in a nutshell you never redirect, resize, alter, change or modify a users browser, interfere with existing processes, by that I mean start video or audio playback automatically, that is the quickest way to get a high bounce rate and low ranking that you are not likely to recover from, you have no idea what the user is currently doing, the situation they are in and many a time I have landed on a site that just blasted out music which wasn't welcomed at 3am in the morning when others were sleeping, so based on experience.

    So you should get a better idea of the process of getting a web design from paper to web server. Good Luck.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Feb 2018
    Posts
    3
    Quote Originally Posted by Douglas_William View Post
    Hi Lovely Jubbly,
    Beauty is always in the eye(s) of the beholder ... 'pop' I find comes from the imagery used (however manipulated, folded, and spindled) combined with the 'coded' results that make up the end-product (the web page as it is viewed in a browser (not all browsers render the same visual - rather a conventional visual)) ... no matter what, the 'pop' will be derived from the 'coded' layout of a 'design'. Many ways (as there are so many unique elements) that can comprise a web page.
    Are you writing from scratch or using a content management system (CMS - wordpress, joomla, etc.) or template(s)?

    Doug
    I'm working from scratch and pretty much doing everything in html/css/java and not using any of the wix style web development tools.

    Quote Originally Posted by \\.\ View Post
    design phase has nothing to do with any code at that point. As the term itself describes, "Design" is the process of taking that idea out your head and then putting it on paper, ironing out the wrinkles, dotting the T's and crossing the I's as you go...

    Your post indicates that you want to design a site, then for that you only need a standard A4 tablet of paper and some pencils and a sharpener and eraser and it helps if you bring your ideas along with you. A proper design process does not see a computer in its initial stages. Many an idea I have had whilst down the pub and jotted something down on a beer mat or serviette.

    When you have a firm idea of what you want, you should at this stage be using a computer to "LOOK AT" things... No coding yet. You need to be looking at things you like, this is things like images, colours, shapes, texts (fonts), motion and so on. No just because you like it does not mean it is suitable for your website.

    Filtering, this is the stage where you look at the things you like and make hard choices based on a number of things, mainly too little in the site and people will not be retained as well as too much in the site and peoplr will not be retained. So what you want is a balance of interest and space.

    GOLDEN RULE : THREE CLICK RULE is a simple rule, if a visitor can not get to the information that they seek or to perform an activity to interact with you, it should not take more than three click from landing on your front page. I have complained to my mobile phone provider about their online services, an average of 8 clicks to get to do simple things like put in a complaint, change the tarrif you are on and so on... Remember THREE CLICKS. (Does not include clicking in to a search box!) a click is a link followed or button pressed.

    Software, you will require an editor of some sorts regardless of the path you choose to follow because you will either be editing code or writing code.

    If you have never coded, then editing code is going to be tough on you because you have to learn all the technologies simultaniously to fully understand whats happening... So I will say that you would be better off starting out with writing your own and build your site as you go and secure it properly and for this you would be needing to learn HTML (use HTML5 easily recognised as the <!DOCTYPE html> tag is the lates, any other variant is HTML4 or lower.

    Then CSS (IMHO) learn to manipulate elements on the page with CSS to position, size and place the element and also JavaScript but don't use javascript to change elements if CSS has that ability, saves lots of code that way.

    Then you may want to consider PHP and MySQL database at some point... and with that comes the use of AJAX (not to be confused with JQuery)

    Then learn a framework if you are so inclined, not a fan boy of these tools. Google guys may push JQuery as JavaScript (which it is written in but won run in) but it isn't, if it was JavaScript then you wouldn't need to include a library file, You may find if you work in an office for a big company, then you would need to learn a few frameworks, these span different technologies from server-side to client-side.

    But before you can do a Linford (Christie a fast runner in the UK, maybe because of the performance enhancing drugs, who knows), you have to learn to walk. So start with the basics of
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
      <title>The page title</title>
    <style>
    body {
      background-color: yellow; 
      color: red;
    }
    h1{
      font-size: 1.8em;
    }
    p{
      font-size: 0.9em;
      color: blue;
    }
    div#somediv p {
      height:300px;
      background-color: green; 
      color: white;
      inherit:parent;
    }
    </style>
    </head>
    <body>
    <h1>Your first web page</h1>
    <p>Hello, this is your first web page.</p>
    <div id="somediv">
    Here we have some text and problems with CSS rules..!
    <p>Question is, why is the text in different colours?</p>
    Clearly the text is contained within the DIV element but here we are...
    <p>different colours? Can you guess why?</p>
    </div>
    </body>
    </html>
    Bit of a simple example, you can obtain much more finer control over your web page look with the use of CSS, however, rules is rules and CSS is only following what it has been told. Shows you that you have to be careful with your rules, how to size, etc... that CSS has same power in fewer lines of instruction and with newer CSS you have ability to animate elements on a page with CSS.

    You can also follow threads on here to pick up how script and HTML fit together and how PHP (server-side) elements contribute to a web page functionality.

    With any design process, its got to be logical to the user, don't get them doing things because its some feature you want people to use, seen those sites before and utterly pointless, be practical, don't waste peoples time and get to grips with the `nettiquette` rules, in a nutshell you never redirect, resize, alter, change or modify a users browser, interfere with existing processes, by that I mean start video or audio playback automatically, that is the quickest way to get a high bounce rate and low ranking that you are not likely to recover from, you have no idea what the user is currently doing, the situation they are in and many a time I have landed on a site that just blasted out music which wasn't welcomed at 3am in the morning when others were sleeping, so based on experience.

    So you should get a better idea of the process of getting a web design from paper to web server. Good Luck.
    Thanks, some good pointers. Some stuff that you talked about was a bit more advanced than what I've faced in the past e.g. MySQL, I never thought of that kind of thing as being part of a website before. Not sure what that would be used for at this stage. Anyway, for now, I'm just trying to walk. I think I'm on the right track by making concepts. I think I just gave up too soon. Should be trying a lot more of this and that and piecing something presentable together. But makes sense, break down the design phase form the coding phase. I tend to try to finalise everything too soon. I think that was a mistake I was making. Things are a bit clearer now.

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.11006 seconds
  • Memory Usage 2,932KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (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
  • (2)bbcode_html
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (5)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (5)postbit
  • (5)postbit_onlinestatus
  • (5)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 (72):
  • 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_postinfo_query
  • fetch_postinfo
  • 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