Jump to content

Website Feature & UI Suggestions Needed

So I've basically done what I can think of in terms of fixing up these websites but I feel like there is room for improvement.

I've been adding random cliche things but I'm kinda at a loss for what to do now

This site is basically me reverse engineering and cobbling together a bunch of code I've come across

I've the same base for all these but I'll fork them off based on what each need

 

http://seireiju.net/

personal site, anime, manga, etc

I'm trying to use this for a colorscheme http://colorschemedesigner.com/#4s51TuOsPw0w0

would also like suggestions for wordpress themes that would match well with this page

(I would use squarespace but I don't feel like paying for that right now)

Newest code changes will be found here

 

http://skandharaj.com/

personal site, tech, daily life, etc

I'm trying to use this for a colorscheme http://colorschemedesigner.com/#4s51TuOsPw0w0

would also like suggestions for wordpress themes that would match well with this page

 

http://test.technotundra.com/

originally our "Forums are down" site, which I decided to eventually make into our main page, 

kinda want to have the main page to be where we can have all the important info readily accessible for people

I'm trying to use this for a colorscheme  http://colorschemedesigner.com/#3A21T----w0w0

I will replace those memes with images related to our content once I have the rest of this stuff ready

Link to comment
Share on other sites

Link to post
Share on other sites

Here are my suggestions/Things I noticed:

  • I can't select text or see any right-click menu for some reason.
  • Too glossy - try flat design!
  • Bland design - try using different shades of the same colors and in more places

I would give you some suggestions for your code but I can't see it because I can't right-click. There's really a sweet spot that makes a website feel content driven, something I used to (and still do) have trouble finding today. It's hard to describe it, but sometimes designs just feel 'off', and I'm getting that feeling with this. Have you thought about using a CSS framework? My favorite is Foundation 5, but Bootstrap is also an option.

Link to comment
Share on other sites

Link to post
Share on other sites

Here are my suggestions/Things I noticed:

  • I can't select text or see any right-click menu for some reason.
  • Too glossy - try flat design!
  • Bland design - try using different shades of the same colors and in more places

I would give you some suggestions for your code but I can't see it because I can't right-click. There's really a sweet spot that makes a website feel content driven, something I used to (and still do) have trouble finding today. It's hard to describe it, but sometimes designs just feel 'off', and I'm getting that feeling with this. Have you thought about using a CSS framework? My favorite is Foundation 5, but Bootstrap is also an option.

Yes I agree with you! Disabling the right-click button with Javascript is awful! It's quiet easy to reenable, but for normal users it is just a mess!

I would Highly recommend you to undo this! You don't get anything from it. 

Business Management Student @ University St. Gallen (Switzerland)

HomeServer: i7 4930k - GTX 1070ti - ASUS Rampage IV Gene - 32Gb Ram

Laptop: MacBook Pro Retina 15" 2018

Operating Systems (Virtualised using VMware): Windows Pro 10, Cent OS 7

Occupation: Software Engineer

Link to comment
Share on other sites

Link to post
Share on other sites

Ya I just wanted to see if it was possible for me to disable right click, and select text, wasn't planning on keeping it.

I've gotten rid of that code now.

I'm not entirely sure how to do the coloring with these sites, I have the colors that I want to use, just can't figure out the best way to implement them.

I'll look into those CSS frameworks!

Link to comment
Share on other sites

Link to post
Share on other sites

Ya I just wanted to see if it was possible for me to disable right click, and select text, wasn't planning on keeping it.

I've gotten rid of that code now.

I'm not entirely sure how to do the coloring with these sites, I have the colors that I want to use, just can't figure out the best way to implement them.

I'll look into those CSS frameworks!

 

Okey thats good to hear.

Also I would use SVG for all kind of Logos and stuff, they are always sharp on every device! ;)

 

Personally I think you have too much information on your 1. page, I mean, why not just having a twitter (fb...) icon without all that text. Most people know what they mean. (you can checkout how I use them on my site http://nitrosoft.ch or http://bio-regional.ch )

Also the table on your first site looks really generic. Just change it a bit ;)

And I would go with a more flat webpage, with that I mean, get rid of your actual hover effects. 

 

But anyway, thats my opinion.

 

 

Here some really good links about design! Great stuff, check them out.

 

https://medium.com/d...ux/799d16952a56 (130+ design resource link!!!)

 

http://freebiesbug.com/ (A lot of good looking free stuff, just always check licensing)

http://kreativeshowcase.com/ (inspiration & resources...)

http://www.dollarphotoclub.com/ (Amazing royalty free stuff for 1$ each, saves sooooo much time)

http://www.cssauthor.com/ (a must in my opinion)

Business Management Student @ University St. Gallen (Switzerland)

HomeServer: i7 4930k - GTX 1070ti - ASUS Rampage IV Gene - 32Gb Ram

Laptop: MacBook Pro Retina 15" 2018

Operating Systems (Virtualised using VMware): Windows Pro 10, Cent OS 7

Occupation: Software Engineer

Link to comment
Share on other sites

Link to post
Share on other sites

I think you should try Bootstrap! It's easy to use and have a grid system. I think you should try a different design style, i prefer flat design!

"THE RED ARMY"

| INTEL i5 4690K | GIGABYTE Z97X GAMING 3 | XFX R9 390X | CORSAIR VENGEANCE PRO 4x2 8GB 1600Mhz | CORSAIR H80i | XFX XTR 650W | 1TB WESTERN DIGITAL CAVIAR BLUE | ADATA SP600 256GB | LOGITECH G502 | CORSAIR VENGEANCE 1400 | CORSAIR K70 MECHANICAL RED | NZXT S340 |

Link to comment
Share on other sites

Link to post
Share on other sites

Oww! one more thing! If you are searching for UI Kits, background and mockup dbfreebies.co is a good site for it!

"THE RED ARMY"

| INTEL i5 4690K | GIGABYTE Z97X GAMING 3 | XFX R9 390X | CORSAIR VENGEANCE PRO 4x2 8GB 1600Mhz | CORSAIR H80i | XFX XTR 650W | 1TB WESTERN DIGITAL CAVIAR BLUE | ADATA SP600 256GB | LOGITECH G502 | CORSAIR VENGEANCE 1400 | CORSAIR K70 MECHANICAL RED | NZXT S340 |

Link to comment
Share on other sites

Link to post
Share on other sites

Alright so I've ditched the whole glossy theme, still in the process of replacing the Twitter, youtube, etc. icons with something simpler. Suggestions on what to replace them with would be appreciated.

 

I'm completely at a loss as to what specifically to do next.

I like flat designs too but I'm not sure how to go about it, getting rid of the glossy stuff helped.

 

 

I think once I have an idea of what I want to do with these sites, I'll be able to put these sites you all suggested to good use.

Link to comment
Share on other sites

Link to post
Share on other sites

SO MUCH BETTER!

 

I took a quick look at your code and I noticed some things:

  • DO NOT use <center> tags. Instead, you can create a CSS centered CSS class like this:
.center{    display: block;    margin: 0 auto;}
  • For usability, don't give the navigation and footer their own classes. Instead, use the new <nav> and <footer> tags. (Note that older browsers such as IE 8 don't support <nav> tags)
  • I noticed you're creating empty divs with the class "divider-2" to space things out instead of using padding and margins. It's perfectly OK to put padding and margins for elements inside of the style attribute (bad habit with everything else) as long as that is just a special case.
  • Chrome caught 258 errors in your JS, might want to look into that :)

I know most of what I am saying about this website is negative, but this is far better than my first website and you're doing an excellent job. Keep it up!

Link to comment
Share on other sites

Link to post
Share on other sites

I suggest that you use frameworks to reduce the coding time because I can see that you are building a website without the final design and final placement of components.

Frameworks such as:
- Bootstrap

- Gumby

- Foundation 3
- Skeleton
- Groundwork
- YAML 4
- Kube
- Tuktuk
 
If you are using PHP try using Codeigniter which is an agile open-source framework for building dynamic websites.

------------------------------------

     ~ Live Love Code ~

------------------------------------

Link to comment
Share on other sites

Link to post
Share on other sites

 

I suggest that you use frameworks to reduce the coding time because I can see that you are building a website without the final design and final placement of components.

Frameworks such as:

- Bootstrap

- Gumby

- Foundation 3
- Skeleton
- Groundwork
- YAML 4
- Kube
- Tuktuk
 
If you are using PHP try using Codeigniter which is an agile open-source framework for building dynamic websites.

 

 

Foundation 3? You know we're on version 5 now right?

Link to comment
Share on other sites

Link to post
Share on other sites

 

I suggest that you use frameworks to reduce the coding time because I can see that you are building a website without the final design and final placement of components.

Frameworks such as:

- Bootstrap

- Gumby

- Foundation 3
- Skeleton
- Groundwork
- YAML 4
- Kube
- Tuktuk
 
If you are using PHP try using Codeigniter which is an agile open-source framework for building dynamic websites.

 

Considering his age, he maybe just wants to get experience with website building (javascrpt/html 5/css 3). So if thats his case, he should not use any Framworks in my opinion. So he  learns a lot more ;)

Business Management Student @ University St. Gallen (Switzerland)

HomeServer: i7 4930k - GTX 1070ti - ASUS Rampage IV Gene - 32Gb Ram

Laptop: MacBook Pro Retina 15" 2018

Operating Systems (Virtualised using VMware): Windows Pro 10, Cent OS 7

Occupation: Software Engineer

Link to comment
Share on other sites

Link to post
Share on other sites

Foundation 3? You know we're on version 5 now right?

Yea my bad, i only used it once when it was @ foundation 2 lol

 

Considering his age, he maybe just wants to get experience with website building (javascrpt/html 5/css 3). So if thats his case, he should not use any Framworks in my opinion. So he  learns a lot more ;)

 

I considered that he might want to learn from scratch and I agree that he should, but given the circumstance that he has his page live, it would turn away potential viewers the longer it stays under construction. So to speed up the build he can use frameworks. So whatever floats his boat lol

------------------------------------

     ~ Live Love Code ~

------------------------------------

Link to comment
Share on other sites

Link to post
Share on other sites

I considered that he might want to learn from scratch and I agree that he should, but given the circumstance that he has his page live, it would turn away potential viewers the longer it stays under construction. So to speed up the build he can use frameworks. So whatever floats his boat lol

Well the important page is http://test.technotundra.com/, and as you can tell by the test, that page isn't the main page at the moment, the others are just personal projects that don't matter if they're live.

 

And I'm not too pressed for time on these so I'd rather take my time and learn

Link to comment
Share on other sites

Link to post
Share on other sites

Well the important page is http://test.technotundra.com/, and as you can tell by the test, that page isn't the main page at the moment, the others are just personal projects that don't matter if they're live.

 

And I'm not too pressed for time on these so I'd rather take my time and learn

Np. Check this site using slicing to separate items, makes stuff easier to follow: http://ashley-bootstrap3-website-template.little-neko.com/main/files/index.html

------------------------------------

     ~ Live Love Code ~

------------------------------------

Link to comment
Share on other sites

Link to post
Share on other sites

So I just rechecked your website and I like the changes you actually did. 

Also one more suggestion, maybe put the link to your social Pages over the hole Logo and Text?!?

 

 

Just saw quiet a lot of error messages in the developer tool. --> Image

post-25270-0-22088200-1397507360.png

Business Management Student @ University St. Gallen (Switzerland)

HomeServer: i7 4930k - GTX 1070ti - ASUS Rampage IV Gene - 32Gb Ram

Laptop: MacBook Pro Retina 15" 2018

Operating Systems (Virtualised using VMware): Windows Pro 10, Cent OS 7

Occupation: Software Engineer

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×