PC and Touch Device Optimization

Discussion in 'Large Artwork' started by Clash, Oct 4, 2010.

  1. Clash

    Clash The Go-To Guy

    Age:
    34
    Posts:
    2,620
    Likes Received:
    0
    Joined:
    Jan 24, 2005
    The web is moving in all sorts of crazy directions. More and more websites are being crammed into tiny devices, and user experiences are changing to accommodate the popular touch devices on the market. Making a selection on a mobile device and doing the same task on a personal computer are different methods, so designers should be keeping that in mind.

    I've been experimenting with a hybrid usability template lately, and this is the product of months of research:
    [​IMG]

    The site offers two means of navigation, which actually was a design faux pa in the late 90s, but has resurfaced as a useful way to give users versatility in navigating the page. The live text menu on top is optimized for use with a computer mouse while the button menu is sized and configured to touch screens on both tablet computers and mobile devices. Also, the large space at the top can be utilized as a definitive brand mark as well as a place for touch users to scroll without hitting any links by accident.

    The page is still in the works on the back end, being coded completely in HTML 5 since most mobile devices today use web-kit and people are FINALLY moving to newer browsers. As of now this page only contains 4 graphics, and the rest is coded CSS.
     
  2. Nexus

    Nexus Active Member

    Age:
    32
    Posts:
    32
    Likes Received:
    0
    Joined:
    Oct 3, 2010
    I like it, slick, professional design.
    pretty cool how you thought about touch screens and other mobile devices,
    i tend to forget when thinking about web templates. haha:slow:

    the gray granite kinda throws off, but i think your intending on those areas popping out?
     
  3. .entropy

    .entropy Senior Member

    Age:
    33
    Posts:
    3,318
    Likes Received:
    0
    Joined:
    Oct 9, 2005
    .....meh
     
  4. Clash

    Clash The Go-To Guy

    Age:
    34
    Posts:
    2,620
    Likes Received:
    0
    Joined:
    Jan 24, 2005
    The darker area is intended to be the main scrolling area for both touch and mice. The web needs to start moving away from the traditional side scroll. The space on the left and right of the nav are intended to serve as a "click/touch and drag" since that bar will always be visible.
     
  5. Clash

    Clash The Go-To Guy

    Age:
    34
    Posts:
    2,620
    Likes Received:
    0
    Joined:
    Jan 24, 2005
    care to elaborate?
     
  6. Nexus

    Nexus Active Member

    Age:
    32
    Posts:
    32
    Likes Received:
    0
    Joined:
    Oct 3, 2010
    sorta understand.

    I'm just throwing out that I'm not feeling the big arrows all over, if this is a design site show off some nice design on main page. Make it fun to check out.
     
  7. inverse

    inverse Banned from GR

    Age:
    33
    Posts:
    3,445
    Likes Received:
    0
    Joined:
    Apr 8, 2007
    Location:
    New Zealand
    I'm feelin' the .....meh.

    The layout makes no fucking sense whatsoever. I know you have a pathological need to try and reinvent the wheel while everyone else is using hovercraft, but this is a pathetic idea. There is no difference whatsoever between this and a regular, pooly designed web template. You even used the shitty pseudo-tech fonts and nav that you see on crappy forum designs.
     
  8. Clash

    Clash The Go-To Guy

    Age:
    34
    Posts:
    2,620
    Likes Received:
    0
    Joined:
    Jan 24, 2005
    I'd point out where you just contradicted yourself, but I don't have the space or time to.

    You use words like, 'poor' and 'crappy' ... but those are not design terms making your comments useless.

    As for not making sense, it's doing very well in trials.

    Smartphone, Tablet, and PC users in the worst case group (ages 40+ who describe themselves as ) find it very easy to navigate and rate it a better experience than some of the top, award-winning mobile optimized sites.

    The other groups consisting of heavy social network users, gamers, techies, and casual users are giving positive feedback on this project as well as similar variations.

    This is an unofficial testing ground, and I can't give access to the live staging sites (yet) but all constructive comments are welcome and will go towards developing what may be a groundbreaking standard.
     
  9. Clash

    Clash The Go-To Guy

    Age:
    34
    Posts:
    2,620
    Likes Received:
    0
    Joined:
    Jan 24, 2005

    Also... I just want to point out... nowhere on Earth is Verdana listed as a "pseudo-tech" font.
     
  10. Elpida

    Elpida Well-Known Member

    Posts:
    204
    Likes Received:
    0
    Joined:
    Mar 29, 2010
    Location:
    P.R.
    Couldn't you use the multi quote?

    Anyway, I don't care what laws, physics, credentials etc. you use. The design looks, "Mature" Like for adult people. I can understand the trouble and time this must've taking you. Coming with something new is not easy, and when it's out, even when recycled, is unappreciated. Ignorance maybe...

    The job so far is good, smoothing and easy on the eyes. I have little experience, since I just graduated from an associates and have no experience whatsoever in the field or customers, but I think this design could work mostly with adult and serious people.

    Do you have a specific public on the market? Or is this a multi-crowed, by that I mean, everyone in mass, all ages?

    Good luck and keep up with the research.
     
  11. Clash

    Clash The Go-To Guy

    Age:
    34
    Posts:
    2,620
    Likes Received:
    0
    Joined:
    Jan 24, 2005
    The design elements as of now are just place-holders for testing purposes. The real design here is how users interact with the page across different platforms.

    The market for something like this would be both avid web users and new users. A lot of issues are springing up in converting websites into "mobile" websites, such as buttons not being big enough for those with larger fingers, graphic text not being legible, long load times over mobile networks, and confusing navigation.

    The solution off the bat was to simplify pre-existing sites, which is great for sites with already minimal content, or a lot of text. The issue with this is that mobile devices were designed to scroll vertically and horizontally...so, while shrinking a website down to fit a screen was seen as an obvious solution to squeeze content into a page, my design utilizes the multi-axis scrolling function instead of ignoring it.

    Also, buttons are designed for people with large fingers and also offers an option for mouse users on a PC.
     
  12. Elpida

    Elpida Well-Known Member

    Posts:
    204
    Likes Received:
    0
    Joined:
    Mar 29, 2010
    Location:
    P.R.
    So if it works for touch screen, I guess I can stroke the page like with an iphone?
     
  13. Clash

    Clash The Go-To Guy

    Age:
    34
    Posts:
    2,620
    Likes Received:
    0
    Joined:
    Jan 24, 2005
    All pages work on an iPhone, android, blackberry, ipad or w/e you choose... but these pages are specifically designed to perform the best.
     
  14. Elpida

    Elpida Well-Known Member

    Posts:
    204
    Likes Received:
    0
    Joined:
    Mar 29, 2010
    Location:
    P.R.
    Okay, I see. So what site is that gonna be about?
     
  15. Clash

    Clash The Go-To Guy

    Age:
    34
    Posts:
    2,620
    Likes Received:
    0
    Joined:
    Jan 24, 2005
    This template was created for a design resource site which will be up for a few awards. After that, the concepts and research with be patented and licensed.
     

Share This Page