chenggiant
V2EX  ›  设计

用 Bootstrap 帮别人做的一个站,大家来批判下?

  •  1
     
  •   chenggiant · Jun 26, 2014 · 10878 views
    This topic created in 4381 days ago, the information mentioned may be changed or developed.
    前端新手,排版几乎是一步步试出来的...

    还是得系统学习下CSS才行,现在代码一团糟。求轻批。

    网站目的就是介绍这个公司的Video Production Services,地址: http://pictureperfectproductions.asia/
    83 replies    2014-09-14 11:46:47 +08:00
    GitFree
        1
    GitFree  
       Jun 26, 2014   ❤️ 1
    这还算新手?掩面飘过
    mikj
        2
    mikj  
       Jun 26, 2014   ❤️ 1
    很不错 求 lz联系方式
    ddzz
        3
    ddzz  
       Jun 26, 2014   ❤️ 1
    后生可畏
    chenggiant
        4
    chenggiant  
    OP
       Jun 26, 2014
    @GitFree
    @mikj
    看源代码就可以看出是新手了...
    83f420984
        5
    83f420984  
       Jun 26, 2014   ❤️ 1
    导航栏没有做成响应式
    Phariel
        6
    Phariel  
       Jun 26, 2014   ❤️ 1
    不错了,这还新手。。。。
    westup
        7
    westup  
       Jun 26, 2014   ❤️ 4
    使用成熟框架的好处就是,粗看几乎完美了
    davepkxxx
        8
    davepkxxx  
       Jun 26, 2014   ❤️ 1
    配色不错
    9hills
        9
    9hills  
       Jun 26, 2014   ❤️ 1
    掩面路过,lz这个配色很好
    Keinez
        10
    Keinez  
       Jun 26, 2014   ❤️ 1
    - 看上去有两个footer,没有意义。重复内容过多。
    - 为什么不用fullscreen而用这种小气的版式?
    - 重选一套图标吧,fontawesome很丑。
    - 最严重的问题:第一印象我不知道这个网站是干啥的
    jimmy2010
        11
    jimmy2010  
       Jun 26, 2014   ❤️ 1
    @ 2013 Picture Perfect. All rights reserved

    copyright的图标貌似用错了
    chenggiant
        12
    chenggiant  
    OP
       Jun 26, 2014
    @83f420984 对的...导航栏还没弄太清楚,只是暴力调整的在iPhone上能看而已。找机会再学习下了。
    airbob
        13
    airbob  
       Jun 26, 2014   ❤️ 1
    不错,顶一个。
    chenggiant
        14
    chenggiant  
    OP
       Jun 26, 2014
    @jimmy2010 谢指出。看的好仔细呀。时间还应该改成2014呀...
    chenggiant
        15
    chenggiant  
    OP
       Jun 26, 2014
    @westup 『粗』字用的很对呀,哈哈。
    Seita
        16
    Seita  
       Jun 26, 2014 via Android   ❤️ 1
    批判。。我是来纠正语文错误的。
    chenggiant
        17
    chenggiant  
    OP
       Jun 26, 2014
    @Keinez
    - 也想用fullscreen来着,但是网站拥有者不喜欢...用fullscreen的话,网上有好多例子可以学习,但是我自己决定不了呀。
    - Font Awesome以外有推荐的么?
    - 首页介绍确实有点少...看来应该加点文字在图片上。
    tremblingblue
        18
    tremblingblue  
       Jun 26, 2014   ❤️ 2
    掩面而过,为嘛人家的网站看起来总是那么高大上的呢
    yangff
        19
    yangff  
       Jun 26, 2014   ❤️ 1
    Home
    About Us
    Services
    Work
    Crew Hires
    Contact
    这里的圆角有点奇怪。。
    xiaoai
        20
    xiaoai  
       Jun 26, 2014   ❤️ 1
    好挤丫
    mikj
        21
    mikj  
       Jun 26, 2014   ❤️ 1
    @chenggiant 求联系 求交往
    chenggiant
        22
    chenggiant  
    OP
       Jun 26, 2014
    @mikj 哦?什么联系方式?
    yangg
        23
    yangg  
       Jun 26, 2014   ❤️ 1
    中间那个 We specialize in 下面的几个东东字没居中哦
    no13bus
        24
    no13bus  
       Jun 26, 2014   ❤️ 1
    @chenggiant 同求,也在学习bt,但是就是不知道怎么改成像楼主这样高大上的感觉
    chenggiant
        25
    chenggiant  
    OP
       Jun 26, 2014
    @yangff 嗯,貌似Bootstrap好多地方都是默认圆角呀。有点地方强行去掉了,有的地方忘了...晚上找时间修改下。
    beingbin
        26
    beingbin  
       Jun 26, 2014   ❤️ 2

    整体看上去色调蛮舒服的,就是排版布局还要优化一下,比如文字的对其方式
    1、图标与文字水平居中
    2、中间这一块排的不好看,这个联系方式不应该居中对齐,且没有重点,一个email单独标红是闹哪样
    3、下方这一块缺乏紧密性,松松散散没有主次,标题与下方内容应该区分开来,比如字体的大小、粗细、颜色等

    可以参考下下面这个简历,人家的排版,没有多少图片、颜色,但是字体、排版很不错,用的很到位
    refear99
        27
    refear99  
       Jun 26, 2014   ❤️ 1
    这还算新手? 不管代码写的怎么样,页面设计的很好哦~
    chenggiant
        28
    chenggiant  
    OP
       Jun 26, 2014   ❤️ 1
    @mikj
    @no13bus
    QQ:121320087 邮箱:chengchibt#gmail 够么。
    no13bus
        29
    no13bus  
       Jun 26, 2014   ❤️ 1
    @chenggiant 够了。找个一起学习的朋友 挺好。
    chenggiant
        30
    chenggiant  
    OP
       Jun 26, 2014
    @beingbin
    谢谢你的建议,感谢为什么不能发多次!
    继续看『Non-designer's Design Book』去...
    littlewey
        31
    littlewey  
       Jun 26, 2014
    Singapore~
    lu18887
        32
    lu18887  
       Jun 26, 2014   ❤️ 1
    域名敢再长点吗!?
    puyo
        33
    puyo  
       Jun 26, 2014   ❤️ 1
    @beingbin 简历很不错,能递个链接看一看吗?
    chenggiant
        34
    chenggiant  
    OP
       Jun 26, 2014
    @lu18887 哈,其实可以的,比如 http://pictureperfectproductions.com.sg/
    mikj
        35
    mikj  
       Jun 26, 2014   ❤️ 1
    @chenggiant QQ已加
    Tonni
        36
    Tonni  
       Jun 26, 2014   ❤️ 1
    骚年,你需要一个产品经理给你指点江山
    est
        37
    est  
       Jun 26, 2014   ❤️ 1
    那么多人都掩面,看来我必须挖地洞逃走了。
    windirt
        38
    windirt  
       Jun 26, 2014   ❤️ 1
    现在看到不支持retina的网站就不能忍啊 LZ把所有图资都弄个 [email protected] 版本放在同一个目录。然后植入retina.js吧。 毕竟你这是面向设计的网站。
    kukat
        39
    kukat  
       Jun 26, 2014   ❤️ 1
    @chenggiant 混坡县的?
    WildCat
        40
    WildCat  
       Jun 26, 2014   ❤️ 1
    70000电脑的壕
    flfruit
        41
    flfruit  
       Jun 26, 2014   ❤️ 1
    很好看诶,楼主加你了。
    RyuZheng
        42
    RyuZheng  
       Jun 26, 2014 via Android   ❤️ 1
    支持楼主一个
    hahastudio
        43
    hahastudio  
       Jun 26, 2014   ❤️ 2
    现在是流行菊苣装新手么= =
    chenggiant
        44
    chenggiant  
    OP
       Jun 26, 2014
    @WildCat 那是做实验用的,和我没半点关系呀...还在用着09年的13寸MBP了...
    xiaowangge
        45
    xiaowangge  
       Jun 26, 2014   ❤️ 1
    FireFox 30.0下看得的效果:






    chenggiant
        46
    chenggiant  
    OP
       Jun 26, 2014
    @xiaowangge OMG...浏览器兼容的这么差么。之前用Firefox看还好来着...
    chenggiant
        47
    chenggiant  
    OP
       Jun 26, 2014
    @kukat 嗯。
    superbear
        48
    superbear  
       Jun 26, 2014   ❤️ 1
    @chenggiant 很不错,新手太谦虚了
    asca
        49
    asca  
       Jun 26, 2014   ❤️ 1
    @chenggiant Firefox 31 beta 表示没有任何问题,30不至于这么差吧。
    precisi0nux
        50
    precisi0nux  
       Jun 26, 2014   ❤️ 1
    @xiaowangge
    @chenggiant
    我在Firefox 30 for Mac下排版很正常,效果很不错。但总感觉logo很山寨= =#(跑题了)。
    shuson
        51
    shuson  
       Jun 26, 2014   ❤️ 1
    @chenggiant
    @kukat 同混坡县么
    GPU
        52
    GPU  
       Jun 26, 2014   ❤️ 1
    chrome 35 感觉很厉害 。各种特效好喜欢 。楼主能带我做一个吗?
    konakona
        53
    konakona  
       Jun 26, 2014   ❤️ 1
    如果沒有參考和山寨任何網站的話,這個設計可以說看得出個人思維。
    很多細節(間距)有稍微調整過,但調得不是很到位,這說明還有提升得空間。

    我自己弄的公司網站:
    www------kingweixin-----.com

    一开始也很丑,都是bootstrap。后面慢慢跟磨皮一样,大框架出来了,调字体、细节、间距、边框等等……
    当然首页就别看了,我现在在想怎么改掉。
    lijun20020229
        54
    lijun20020229  
       Jun 26, 2014   ❤️ 1
    比我弄的好看多了。。
    MarioLuisGarcia
        55
    MarioLuisGarcia  
       Jun 26, 2014   ❤️ 2
    "Our clients are all different
    Some big some small, but all trust us with their brand"

    Singapinglish?
    chenggiant
        56
    chenggiant  
    OP
       Jun 26, 2014
    @shuson
    @kukat
    V2上感觉坡县的同学很多呀,应该搞个坡县V2群哦...
    chenggiant
        57
    chenggiant  
    OP
       Jun 26, 2014
    @MarioLuisGarcia 像Singlish?这tagline也不是我想的哦...
    chenggiant
        58
    chenggiant  
    OP
       Jun 26, 2014
    @konakona 嗯,现在已经收集到了好多要修改的细节呀。得慢慢的磨皮。
    chenggiant
        59
    chenggiant  
    OP
       Jun 26, 2014
    @precisi0nux 是的,有人指出来像Beats的logo倒了过来...
    kukat
        60
    kukat  
       Jun 26, 2014
    @chenggiant
    @shuson

    坡县码农qq群倒是加了两个,都没人发言。。。

    在想 @Livid 能不能开个新加坡节点,方便交(gao)流(ji)
    shuson
        61
    shuson  
       Jun 26, 2014
    Livid
        62
    Livid  
    MOD
    PRO
       Jun 26, 2014
    @kukat 嗯,必须有的。

    /go/sg/go/singapore 都可以到达。
    Delbert
        63
    Delbert  
       Jun 26, 2014


    不对齐,不能忍……
    4263Ad06Awk3b1Do
        64
    4263Ad06Awk3b1Do  
       Jun 26, 2014
    Chrome导航条有问题
    jaylong
        65
    jaylong  
       Jun 26, 2014
    右下角的“@ 2013 Picture Perfect. All rights reserved”里的@是不是应该是©啊
    lvwzhen
        66
    lvwzhen  
       Jun 26, 2014
    @xiaowangge 和浏览器没关系,是你 CSS 没正确加载。
    lvwzhen
        67
    lvwzhen  
       Jun 26, 2014
    速度有点慢,建议开启 gzip
    qwe542398
        68
    qwe542398  
       Jun 26, 2014
    @chenggiant logo基本是侵权。。
    然后加载不是一般的慢。。将近一分钟都还没加载完。。差评。。
    排版方式有待改进。。尾部看久了会有种参差不齐的不舒服感
    不太能理解
    Get social with us
    Find us
    这两个的排版。。
    MarioLuisGarcia
        69
    MarioLuisGarcia  
       Jun 26, 2014   ❤️ 1
    @chenggiant 那就是Singlish无疑了
    Tankpt
        70
    Tankpt  
       Jun 26, 2014
    好厉害。。。
    ffffwh
        71
    ffffwh  
       Jun 26, 2014
    我觉得Helvetica字距太小,Arial更是灾难..
    no13bus
        72
    no13bus  
       Jun 26, 2014
    @chenggiant 已加。
    WindSays
        73
    WindSays  
       Jun 26, 2014
    @konakona 那个图片悬停放大效果是特意弄成宽度也同时变大的么?
    konakona
        74
    konakona  
       Jun 27, 2014
    @WindSays 鼠标放上去图片变大只是动画效果,没有编写js控制。
    图片放大了肯定会宽度和高度放大啊!!!!!!!!!!!

    但如果不希望超出的话,上层div display none把
    jalen
        75
    jalen  
       Jun 27, 2014
    领导也让你这么花时间慢慢弄出来啊,好领导啊。。
    hslx111
        76
    hslx111  
       Jun 27, 2014
    既然是搞图像的,在Retina屏下很多logo都是看着模糊不好吧。。。
    timothyye
        77
    timothyye  
       Jun 27, 2014
    已经很不错了
    bibizhang
        78
    bibizhang  
       Jun 28, 2014
    logo还是更像pinterest
    zomfg
        79
    zomfg  
       Jun 30, 2014
    我觉得做的很好,希望能认识卤煮,帮我做个类似的网站。。。
    nolanlee
        80
    nolanlee  
       Jul 1, 2014
    nav-pills把logo遮住了,导致logo link右半部分无法点击,建议去掉nav-pills相对定位改用右浮动。不过屏幕变窄会导致nav-pills换行,需要进一步处理。
    julio867
        81
    julio867  
       Jul 2, 2014
    感觉还可以,兼容性问题没有测试,本身BS就对IE8及以下不兼容了~~
    zsz
        82
    zsz  
       Jul 4, 2014
    从程序员角度看,布局简洁,式样可以自适应,有内容区域的明确的划分。

    从设计角度来说,觉得还有些需要调整的地方

    1. 布局,有的是右对齐,有的是中间对齐,感觉有些混乱。
    2. 字体,每个区域标题的字体不够突出,还有些内容应该选择较小的字体,在引导用户视线方面作用不够。
    3. 颜色,什么地方应该是红色,什么地方应该是灰色,第一眼看上去没有规律,会给用户造成疑惑。

    从站内 SEO 角度看,在字体的选择,内容的设置上,也有部分需要调整。
    Zhang
        83
    Zhang  
       Sep 14, 2014
    我也用bootstrap撸一个企业官网好了。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5726 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 193ms · UTC 02:06 · PVG 10:06 · LAX 19:06 · JFK 22:06
    ♥ Do have faith in what you're doing.