chenggiant
V2EX  ›  设计

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

  •  1
     
  •   chenggiant · Jun 26, 2014 · 11300 views
    This topic created in 4512 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
    GitFree
    Jun 26, 2014❤️1
    1
    这还算新手?掩面飘过
    mikj
    mikj
    Jun 26, 2014❤️1
    2
    很不错 求 lz联系方式
    ddzz
    ddzz
    Jun 26, 2014❤️1
    3
    后生可畏
    chenggiant
    chenggiant
    OP
    Jun 26, 2014
    4
    @GitFree
    @mikj
    看源代码就可以看出是新手了...
    83f420984
    83f420984
    Jun 26, 2014❤️1
    5
    导航栏没有做成响应式
    Phariel
    Phariel
    Jun 26, 2014❤️1
    6
    不错了,这还新手。。。。
    westup
    westup
    Jun 26, 2014❤️4
    7
    使用成熟框架的好处就是,粗看几乎完美了
    davepkxxx
    davepkxxx
    Jun 26, 2014❤️1
    8
    配色不错
    9hills
    9hills
    Jun 26, 2014❤️1
    9
    掩面路过,lz这个配色很好
    Keinez
    Keinez
    Jun 26, 2014❤️1
    10
    - 看上去有两个footer,没有意义。重复内容过多。
    - 为什么不用fullscreen而用这种小气的版式?
    - 重选一套图标吧,fontawesome很丑。
    - 最严重的问题:第一印象我不知道这个网站是干啥的
    jimmy2010
    jimmy2010
    Jun 26, 2014❤️1
    11
    @ 2013 Picture Perfect. All rights reserved

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

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

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






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

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

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

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

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

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

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


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

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

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

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

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