tag:blogger.com,1999:blog-84758182602932603102024-03-05T07:56:28.499+00:00Grace KanGraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.comBlogger31125tag:blogger.com,1999:blog-8475818260293260310.post-41598954929496745262011-05-17T23:33:00.000+01:002011-05-17T23:33:15.325+01:00Some idea of feedback about scrolling barSome idea of feedback about scrolling bar came up yesterday.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw96ra0QTZm6F2jSvegOgSy8DeZLYQss07VDjMePMIABkdwv2SLDDtlnnG6sCVfgT4yFk8U3MAp8B_4ZgsPETAxyeZ4VakzdM138cVIA8IusoPmKKUPJA4LhJsJ8JFEmM8h-y_tfU7lKn-/s1600/IMG.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw96ra0QTZm6F2jSvegOgSy8DeZLYQss07VDjMePMIABkdwv2SLDDtlnnG6sCVfgT4yFk8U3MAp8B_4ZgsPETAxyeZ4VakzdM138cVIA8IusoPmKKUPJA4LhJsJ8JFEmM8h-y_tfU7lKn-/s320/IMG.jpg" width="219" /></a></div>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com2tag:blogger.com,1999:blog-8475818260293260310.post-2694705140019349482011-05-14T00:38:00.000+01:002011-05-14T00:38:53.887+01:00VGCFM website treatment WORK EXAMPLES<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdkwqwpHV28Hh0ZbXD2UPPnn66KZfNqvb8ejOQ2m0DY0upZCliTaz7DfIk7s6tTlRZRPszdZqS8S5P4iBkVLFvVb4JuFaRxvGPg5EzYNkAlaOkcSO_ti-yAH8TcIighuQJznZFWmZvoVjc/s1600/fianal+vfcwt+artistt.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdkwqwpHV28Hh0ZbXD2UPPnn66KZfNqvb8ejOQ2m0DY0upZCliTaz7DfIk7s6tTlRZRPszdZqS8S5P4iBkVLFvVb4JuFaRxvGPg5EzYNkAlaOkcSO_ti-yAH8TcIighuQJznZFWmZvoVjc/s320/fianal+vfcwt+artistt.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxoC5pDqcgRRlF3TTENrbs2Cfe_2fZpiJY-7mxxVWpn7DLfjtMcZzHV1LISwcOOXTvOoFyw7dr2oYsPz-79qkGs2-gwHm4wEDj02IEfGE4jqiTMgtCbbI8HKr0tqKwL7OcKlyab1qS4FJn/s1600/fianal+vfcwt+artistt1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxoC5pDqcgRRlF3TTENrbs2Cfe_2fZpiJY-7mxxVWpn7DLfjtMcZzHV1LISwcOOXTvOoFyw7dr2oYsPz-79qkGs2-gwHm4wEDj02IEfGE4jqiTMgtCbbI8HKr0tqKwL7OcKlyab1qS4FJn/s320/fianal+vfcwt+artistt1.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-MIr0YIDrC3M/Tc3A4X_clCI/AAAAAAAAAKc/OHpBXwXbnro/s1600/fianal+vfcwt+copy+copy3.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="209" src="http://2.bp.blogspot.com/-MIr0YIDrC3M/Tc3A4X_clCI/AAAAAAAAAKc/OHpBXwXbnro/s320/fianal+vfcwt+copy+copy3.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-FSR7f6jNdXk/Tc3A5wLIAPI/AAAAAAAAAKg/3bfb6oJvOVg/s1600/fianal+vfcwt+single+imagee.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="209" src="http://3.bp.blogspot.com/-FSR7f6jNdXk/Tc3A5wLIAPI/AAAAAAAAAKg/3bfb6oJvOVg/s320/fianal+vfcwt+single+imagee.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-tJizQe-Zccs/Tc3A7HVln5I/AAAAAAAAAKk/lzhOegwZxyE/s1600/fianal+vfcwt+single+imagee2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="209" src="http://1.bp.blogspot.com/-tJizQe-Zccs/Tc3A7HVln5I/AAAAAAAAAKk/lzhOegwZxyE/s320/fianal+vfcwt+single+imagee2.jpg" width="320" /></a></div>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-47770128847951099542011-05-14T00:32:00.008+01:002011-05-14T00:41:23.129+01:00VGCFM website treatment mockup<span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;">I had been comparing about keeping missed data or deleting missed data.</span><br />
<span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgDgEQPjnNqhVqqPek9uEdXuUoVHMjVcOiAzcRygRoVfIkIzVEDZ5KgwlxfGRQbFAgtKyjtTfzjfuJE4d_yvH1WnwYuHRJfGlUlUpxin4pK-MMTpzE0nmdnu45FQKiOebtj3RCIClnfGrV/s1600/delete+missing+data1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgDgEQPjnNqhVqqPek9uEdXuUoVHMjVcOiAzcRygRoVfIkIzVEDZ5KgwlxfGRQbFAgtKyjtTfzjfuJE4d_yvH1WnwYuHRJfGlUlUpxin4pK-MMTpzE0nmdnu45FQKiOebtj3RCIClnfGrV/s320/delete+missing+data1.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitUuPGPdIwUGR_rvQ0Yvgoaj0TLSiJy_ii88gygUIUjnzNa6j2pob0agGWG_mwyNQM2cBKrApUne10BkLCXpxgH7fJbvEWnIP4uxo0aRgv4RktjjItMaWSgGrljHGs_X-9Ph7dfKTv6-dJ/s1600/delete+missing+data2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="89" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitUuPGPdIwUGR_rvQ0Yvgoaj0TLSiJy_ii88gygUIUjnzNa6j2pob0agGWG_mwyNQM2cBKrApUne10BkLCXpxgH7fJbvEWnIP4uxo0aRgv4RktjjItMaWSgGrljHGs_X-9Ph7dfKTv6-dJ/s320/delete+missing+data2.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVWlQZPR-Lxt-RMKJZOU14y2tc-axrOiiRMvhNZOYZRdsZNeJxpQTewqQZ9RzoEumb0diJ-52wbfXvNxPbm_twFIVYf-nV5JofW-sgPe4qZoJd_HVtSsH2mEPllh1kwS-CVXstUuCAyshE/s1600/keep+missing+data.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVWlQZPR-Lxt-RMKJZOU14y2tc-axrOiiRMvhNZOYZRdsZNeJxpQTewqQZ9RzoEumb0diJ-52wbfXvNxPbm_twFIVYf-nV5JofW-sgPe4qZoJd_HVtSsH2mEPllh1kwS-CVXstUuCAyshE/s320/keep+missing+data.jpg" width="320" /></a></div><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><br />
</span><br />
<span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><br />
</span><br />
<span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: 'Times New Roman';"><br />
</span><br />
<span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"></span><br />
<div class="MsoNormal"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;"><br />
</span></span><br />
<span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;"><br />
</span></span><br />
<span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;"><br />
</span></span><br />
<span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;"><br />
</span></span><br />
<span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;"><br />
</span></span><br />
<span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;"><br />
</span></span><br />
<span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;"><br />
</span></span><br />
<span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;">Here are the criteria and evaluation about these two approaches:<o:p></o:p></span></span></div><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"> </span><br />
<div class="MsoNormal"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;"><b>1. Creative:</b><o:p></o:p></span></span></div><div class="MsoNormal"><span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: 16px;">Keep missed data: Create a new way to present data and read data. New design element such as data completeness bar has get involved.</span></div><div class="MsoNormal"><span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: 16px;">Delete missed data:</span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;">People would not know the exist of missed data. The design would be a usual way to present data.<o:p></o:p></span></span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;"><b><br />
</b></span></span><br />
<span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;"><b>2. Safety, Interface stability:</b><o:p></o:p></span></span></div><div class="MsoNormal"><span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: 16px;">Keep missed data:</span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;">Might take a bit risky. <o:p></o:p></span></span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;">Inevitably one would get a feeling that the information are not completed, unfinished, unreliable.<o:p></o:p></span></span></div><div class="MsoNormal"><span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: 16px;">Delete missed data:</span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black;">Works look finished, connected, logically, without questions.<o:p></o:p></span></span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><br />
</span></div><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;">Evaluation: will take approach 2: delete the missed data. It will not sacrifice the usability to achieve creativity.</span> </span>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-21181320539828302422011-05-11T21:18:00.000+01:002011-05-13T21:26:43.086+01:00Color contrast on website series3<div class="MsoNormal"></div><div class="MsoNormal"><span lang="EN-GB" style="color: black;">Grid-base design<o:p></o:p></span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black;"><br />
</span></div><br />
<div class="MsoNormal">Have taken a bit more time to figure out what is grid-based design and had known a basic. For all I have researched, the screen resolution takes a important part to develop a grid. Usually we design a website for the 1024×768px resolution, then you will settle 960px (because it’s divisible by 3, 4, 5, 6, 8, 10, 12, 15, 16). Here is <a href="http://www.tutorial9.net/tutorials/photoshop-tutorials/design-a-clean-web-layout-with-the-960-grid/">a good tutorial</a> show a web layout with 960 Grid setting with 12 columns. <a href="http://www.designified.com/blog/article/41/960px-grid">Another article</a> also talks about 960 Grid but I think he mixes the meaning of columns and guideline. </div><div class="MsoNormal"><span lang="EN-GB" style="color: black;">There is another </span><span style="color: black; font-family: 宋体;">“</span><span lang="EN-GB" style="color: black;">noun”: Baseline <o:p></o:p></span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black;">How do you set a baseline grid? Why they set 24px? Should adjust fonts size with baseline matching? <o:p></o:p></span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black;">Teehan+lax: “The traditional sizes to go with this baseline (9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 48, 60, 72 points): these sizes prove to be extremely useful when combined with leading derived from 3. <o:p></o:p></span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black;">Coming up with a grid for print requires multiple calculations based on page format, font choice, font size, leading, etc. Hopefully these calculations are not necessary for digital design, and web design in particular: on screen, the baseline grid is essentially determined by leading.”<o:p></o:p></span></div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><span lang="EN-GB" style="color: black;">Related reading:<o:p></o:p></span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black;"><a href="http://www.teehanlax.com/blog/2011/03/09/designing-faster-with-a-baseline-grid/">http://www.teehanlax.com/blog/2011/03/09/designing-faster-with-a-baseline-grid/</a><o:p></o:p></span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black;"><a href="http://webdesignerwall.com/trends/grid-and-column-designs">http://webdesignerwall.com/trends/grid-and-column-designs</a><o:p></o:p></span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black;"><a href="http://dev.opera.com/articles/view/setting-web-type-to-a-baseline-grid/">http://dev.opera.com/articles/view/setting-web-type-to-a-baseline-grid/</a><o:p></o:p></span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black;"><a href="http://www.alistapart.com/articles/settingtypeontheweb/">http://www.alistapart.com/articles/settingtypeontheweb/</a><o:p></o:p></span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black;"><a href="http://www.designified.com/blog/article/41/960px-grid">http://www.designified.com/blog/article/41/960px-grid</a><o:p></o:p></span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black;"><a href="http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/">http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/</a><o:p></o:p></span></div><div class="MsoNormal"><span lang="EN-GB" style="color: black;"><a href="http://www.cameronmoll.com/archives/001220.html">http://www.cameronmoll.com/archives/001220.html</a><o:p></o:p></span></div><span lang="EN-GB" style="color: black; font-family: 'Times New Roman';"><a href="http://www.tutorial9.net/tutorials/photoshop-tutorials/design-a-clean-web-layout-with-the-960-grid/">http://www.tutorial9.net/tutorials/photoshop-tutorials/design-a-clean-web-layout-with-the-960-grid/</a></span>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-31475414851804005142011-05-10T00:10:00.004+01:002011-05-10T00:14:00.128+01:00Color contrast on website series2<div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US">Color type choosing:<o:p></o:p></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US"></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;">Some important theories:<o:p></o:p></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;">RNIB:<o:p></o:p></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;">“People with cognitive or sight problems may have difficulty reading and distinguishing text from a background colour. This is generally caused by poor choice of colour and contrast in the design of the page. Background images and patterns may also cause problems of legibility.<o:p></o:p></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;">Creative use of colour and contrast can dramatically enhance the accessibility of a website. It can be as important for people with sight problems as it is to people who have dyslexia or whose first language is not the main language of the site.<o:p></o:p></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;">Everyone benefits from text which is both easy on the eye and that is easy to follow. For example, people with dyslexia benefit from good contrast as this can help make the structure of words and sentences easier to understand.”<o:p></o:p></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;">Attention:<o:p></o:p></span></div></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;">“Colour blindness affects the way that certain colours differ from others. Red and green, for instance, can appear to be virtually the same to some users. Ensure that you choose colours that have a good differentiation for people with colour deficiency. You can find out more on the <a href="http://www.vischeck.com/vischeck/vischeckURL.php" style="color: blue; text-decoration: underline;">Vischeck website</a>."</span></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"></span></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;">So there is no one “best” combination of text and background colours. Background does not have to be coloured, and texts do not have to be coloured. Pages should be designed flexible that could allow users to change the colour scheme.<o:p></o:p></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;">I predict my work has not to be visual divided into the content areas but should good at using color contrasts.<o:p></o:p></span></div></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US"></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;">Color choose for vision impaired principles:<o:p></o:p></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;">1. Exaggerate lightness differences between foreground and background colors, and avoid using colors of similar lightness adjacent to one another, even if they differ in saturation or hue.<o:p></o:p></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;">2. Choose dark colors with hues from the bottom half of this hue circle against light colors from the top half of the circle. Avoid contrasting light colors from the bottom half against dark colors from the top half. The orientation of this hue circle was chosen to illustrate this point.<o:p></o:p></span></div></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;">3. Avoid contrasting hues from adjacent parts of the hue circle, especially if the colors do not contrast sharply in lightness.</span></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;">Color theme choose:<o:p></o:p></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;">Charity / school / college / education / student:<o:p></o:p></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;"><a href="http://kuler.adobe.com/#themes/search?term=school" style="color: blue; text-decoration: underline;">http://kuler.adobe.com/#themes/search?term=school</a> no (ugly)<o:p></o:p></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;"><a href="http://kuler.adobe.com/#themes/search?term=college" style="color: blue; text-decoration: underline;">http://kuler.adobe.com/#themes/search?term=college</a> no (the rate ones are belong to some other college)<o:p></o:p></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;"><a href="http://kuler.adobe.com/#themes/search?term=student" style="color: blue; text-decoration: underline;">http://kuler.adobe.com/#themes/search?term=student</a> no (no rate ones)<o:p></o:p></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;"><a href="http://kuler.adobe.com/#themes/search?term=charity" style="color: blue; text-decoration: underline;">http://kuler.adobe.com/#themes/search?term=charity</a> no (too much colors that have to use as light color)<o:p></o:p></span></div></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><a href="http://kuler.adobe.com/#themes/search?term=education" style="color: blue; text-decoration: underline;">http://kuler.adobe.com/#themes/search?term=education</a> yeh</span><br />
<span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><br />
</span></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjePLakHffOHPeAZvS0wPtl7Z2RFD3orHGwvSgj6l173VOTfMQVpQOLDvwHQrP7m3TZGHycS7GvP81-omMs-QchDqBVteqTCIOAqWcP-jTPTj20ca0H1K0VEmZqPe9qKZd2VILH-94at6AZ/s1600/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-05-09+%25E4%25B8%258B%25E5%258D%258811.37.17.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="56" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjePLakHffOHPeAZvS0wPtl7Z2RFD3orHGwvSgj6l173VOTfMQVpQOLDvwHQrP7m3TZGHycS7GvP81-omMs-QchDqBVteqTCIOAqWcP-jTPTj20ca0H1K0VEmZqPe9qKZd2VILH-94at6AZ/s320/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-05-09+%25E4%25B8%258B%25E5%258D%258811.37.17.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Education theme</td></tr>
</tbody></table><br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPyEyh7_LpwzQgCWnvqQxASIN0BUKMcOkwDH8O4HJgA2FPIEOO7skiDpfPOVxk_kwatHiF3WY41hHfxqbK1-J7xpdy4jiOIcR0e_FX5vCoCKxJP94KHN-DH7QdL9i6Q8LQhbWrMxYlmazm/s1600/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-05-09+%25E4%25B8%258B%25E5%258D%258811.37.26.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="56" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPyEyh7_LpwzQgCWnvqQxASIN0BUKMcOkwDH8O4HJgA2FPIEOO7skiDpfPOVxk_kwatHiF3WY41hHfxqbK1-J7xpdy4jiOIcR0e_FX5vCoCKxJP94KHN-DH7QdL9i6Q8LQhbWrMxYlmazm/s320/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-05-09+%25E4%25B8%258B%25E5%258D%258811.37.26.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Charity theme</td></tr>
</tbody></table><span lang="EN-US"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><br />
</span></span></span><br />
<span lang="EN-US"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><span lang="EN-GB" style="color: black; font-family: 'Times New Roman'; font-size: 12pt;"><br />
</span></span></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Relative reading:</div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB" style="color: black;"><a href="http://www.rnib.org.uk/professionals/webaccessibility/designbuild/colour/Pages/colour_contrast.aspx" style="color: blue; text-decoration: underline;">http://www.rnib.org.uk/professionals/webaccessibility/designbuild/colour/Pages/colour_contrast.aspx</a></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-GB"><span class="Apple-style-span" style="color: black;"><a href="http://www.rnib.org.uk/professionals/webaccessibility/webaccessfaqs/Pages/faqs.aspx" style="color: blue; text-decoration: underline;">http://www.rnib.org.uk/professionals/webaccessibility/webaccessfaqs/Pages/faqs.aspx</a></span><span class="Apple-style-span" style="color: grey;"><o:p></o:p></span></span></div></div><div class="MsoNormal" style="font-family: 'Times New Roman'; font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><a href="http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast" style="color: blue; text-decoration: underline;">http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast</a></div></div>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-5679600460433725872011-05-09T09:10:00.002+01:002011-05-09T09:15:42.645+01:00Compare RNIB and QAC: Analyze color use on RNIB<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLgQLs0hEH7uPJYjfntIqiH85s6JuLe5XFDwEmaJ0PH5pISKf9rdKyXEHc84ui9SSQOd8DqwGPq2SWNWD0MCIRuNRNuKzV5aoyTsN9D1xBbt-U4Du2bWx5rQ26V12ml_ZZ6L8dJBkkEQuH/s1600/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-05-08+%25E4%25B8%258B%25E5%258D%258806.52.30.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLgQLs0hEH7uPJYjfntIqiH85s6JuLe5XFDwEmaJ0PH5pISKf9rdKyXEHc84ui9SSQOd8DqwGPq2SWNWD0MCIRuNRNuKzV5aoyTsN9D1xBbt-U4Du2bWx5rQ26V12ml_ZZ6L8dJBkkEQuH/s200/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-05-08+%25E4%25B8%258B%25E5%258D%258806.52.30.png" width="200" /> <span class="Apple-style-span" style="-webkit-text-decorations-in-effect: none; color: black;"></span></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDiH5wFzjR_vV6fCfyLNnVvZzIfKjO6c8hsZ9b97K6DcOWNC_9FoRX3AZvDdeSCGOTdZgfbKYHnQoLTCEXgU9MmbI57uZ2raE38Rv_paAf_UrvndMW-zSJupn0dz85XPXj2ssyaO2VqEy/s1600/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-05-08+%25E4%25B8%258B%25E5%258D%258806.52.22.png" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDiH5wFzjR_vV6fCfyLNnVvZzIfKjO6c8hsZ9b97K6DcOWNC_9FoRX3AZvDdeSCGOTdZgfbKYHnQoLTCEXgU9MmbI57uZ2raE38Rv_paAf_UrvndMW-zSJupn0dz85XPXj2ssyaO2VqEy/s200/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-05-08+%25E4%25B8%258B%25E5%258D%258806.52.22.png" width="200" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"> </div><div class="MsoNormal"><span lang="EN-US">5 steps approach:<o:p></o:p></span></div><div class="MsoNormal"><span lang="EN-US"><b>Describe: </b><o:p></o:p></span></div><div class="MsoNormal"></div><ul><li>Use larger scale of color</li>
<li>The choose of color are similar (a bit of difference)</li>
<li>The order to arrange colors is different</li>
<li>Different visual appeal result</li>
</ul><br />
<div class="MsoNormal"><span lang="EN-US"><b>Identify:</b><o:p></o:p></span></div><div class="MsoNormal"></div><ul><li>How do you choose the color type based on the vision ability of vision impaired people?</li>
<li>What the design style is suitable for those people?</li>
<li>What is the relationship between text and color?</li>
</ul><br />
<div class="MsoNormal"><span lang="EN-US"><b>Interpret:</b><o:p></o:p></span></div><div class="MsoNormal"></div><ul><li>Use color contrast to strongly divide different contents area to help the capability of reading.</li>
</ul><br />
<div class="MsoNormal"><span lang="EN-US"><b>Evaluate:</b><o:p></o:p></span></div><div class="MsoNormal"></div><ul><li>The visual impaired are easier to read on the site</li>
</ul><br />
<div class="MsoNormal"><span lang="EN-US"><b>Reflect: </b><o:p></o:p></span></div><span lang="EN-US" style="font-family: 'Times New Roman';"></span><br />
<ul><li><span lang="EN-US" style="font-family: 'Times New Roman';">Large background of color filling is definitely a good way to distinguish different type of information.</span></li>
<span lang="EN-US" style="font-family: 'Times New Roman'; font-size: 12pt;"> </span></ul>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-40259530449742804982011-05-08T21:49:00.004+01:002011-05-09T09:17:44.155+01:00Color contrast on website series1Question:<br />
How do you use color contrast on website to strength and exaggerate color effection? Presume it is for people with visual impairment.<br />
<br />
Analyze:<br />
Color contrast on web is no more than color text against uncolored background, uncolored text against color background and color against each other.<br />
A good example uncolored text against color background which <a href="http://www.rnib.org.uk/donate/Pages/donate.aspx">RNIB</a> has done to show the large scale color background strength the contents discrimination.<br />
I would like taking a try on color text against uncolored background to achieve the same effection,though <a href="http://www.qac.ac.uk/3-stu/index.html">QAC</a> has done in a bad result :(GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-16868757147533902382011-05-08T00:52:00.002+01:002011-05-14T00:10:46.496+01:00Brief: VGCFM website treatment<span lang="EN-GB" style="font-family: Arial; font-size: 12pt;">To use data and images from the Virtual Gallery of Contemporary Fine Metalwork DVD-ROM to create an interface and design suitable for a website version of the same. This should take into account the specific nature of the web, web page design and interactivity, in relation to this dataset and its presentation.</span> <br />
<span lang="EN-GB" style="font-family: Arial; font-size: 12pt;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Arial;">Challenge: some data of each image or the artist are m</span><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">issed. How do you present that data in order to minimize or hide the fact that the data is not 100% complete.</span><br />
<span class="Apple-style-span" style="font-family: Arial;"><br />
</span>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-32609182229316962492011-05-02T16:18:00.005+01:002011-05-02T21:59:32.568+01:00Reading on 3D desktop design<b>Principle used:</b><br />
<br />
<ul><li>Feedback & communication:</li>
</ul><br />
Feedback involves keeping users informed about what's happening by providing appropriate feedback & enabling communication with your app.<br />
Two examples using in the work:<br />
1. When a user clicks to the book, it shows visually that tell user the book has selected.<br />
2. When a user clicks page by page on the right side, the book will response as thin to thick (left pages to right one)<br />
<br />
<ul><li>Perceived stability:</li>
</ul><br />
To provide an understandable, familiar, and predictable environment. To give users a visual sense of stability, the interface defines many standard graphical elements.<br />
Some examples using in the work:<br />
menu bar, search box, book outlook<br />
<br />
<ul><li>Metaphors:</li>
</ul><br />
Use metaphors that represent concrete, familiar ideas, and make the metaphors obvious, so that users can apply a set of expectations to the computer environment.<br />
Examples using in the work:<br />
the book design, the way to note/tag<br />
<br />
<b>Criteria & Evaluation:</b><br />
<br />
<ul><li>Suit for the 3D desktop environment</li>
<li>Bring enjoyment</li>
<li>Easy to use</li>
<li>Clear / simple of all functions</li>
<li>Visual appeal</li>
</ul><div><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFy8NuKt9dbHOB1YKqynTn8KZsvUEfAq7W5vM902CmTsaZBoM0XCZgIHGyJxsqb4KePX9ZpZfWmENXcPiAn5L6wBKJL9Ck0AF2MB4o6wYimKgTKxH6eLH240qhfJNr-bDYc100Pp7kTB5u/s1600/bookreadingye.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFy8NuKt9dbHOB1YKqynTn8KZsvUEfAq7W5vM902CmTsaZBoM0XCZgIHGyJxsqb4KePX9ZpZfWmENXcPiAn5L6wBKJL9Ck0AF2MB4o6wYimKgTKxH6eLH240qhfJNr-bDYc100Pp7kTB5u/s320/bookreadingye.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-mgljHbhFpxQ/Tb7LajhTTVI/AAAAAAAAAIE/vQyFQaTQFqY/s1600/bookreadingye2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="http://1.bp.blogspot.com/-mgljHbhFpxQ/Tb7LajhTTVI/AAAAAAAAAIE/vQyFQaTQFqY/s320/bookreadingye2.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTVYKOnCKoKheCL_pF5k_LEQFzxCgRZjKOVk6MaABXqegqww_X1yGUw3rvMQJcswf2xrgu_3PRavaEc2NSh0tv_cweJLn-4FgmLDlWIw2yjm39u2zMj2I_Almqw-kqkNAQZ69-kvRb7O4i/s1600/bookreadingye3.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTVYKOnCKoKheCL_pF5k_LEQFzxCgRZjKOVk6MaABXqegqww_X1yGUw3rvMQJcswf2xrgu_3PRavaEc2NSh0tv_cweJLn-4FgmLDlWIw2yjm39u2zMj2I_Almqw-kqkNAQZ69-kvRb7O4i/s320/bookreadingye3.jpg" width="320" /></a></div><div><br />
</div>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-81180508496297108992011-05-02T14:51:00.002+01:002011-05-02T14:52:47.004+01:00Design a pop-up windowIt's transparent. why?<br />
<div>The size?</div><div>The way of layout?</div><div><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3zA92GNzZ0NDWOk4aDQKuUABrp3QjufJm190pj4D3LjpZi6vxTMOkeedydY6bMQOAAd18CgY9XShALI98EVEBXxD-sn7qEHDaLlQd0Z7vGEmuTbc9QrYS8m2p4NV3wcdYtVj9lx73-CW2/s1600/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-05-02+%25E4%25B8%258B%25E5%258D%258802.36.13.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3zA92GNzZ0NDWOk4aDQKuUABrp3QjufJm190pj4D3LjpZi6vxTMOkeedydY6bMQOAAd18CgY9XShALI98EVEBXxD-sn7qEHDaLlQd0Z7vGEmuTbc9QrYS8m2p4NV3wcdYtVj9lx73-CW2/s320/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-05-02+%25E4%25B8%258B%25E5%258D%258802.36.13.png" width="320" /></a></div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div><div><br />
</div><div>Principles:</div><div><ul><li>Make the pop-up window transparent so the visitor can still view the text on the page behind it.</li>
<li>Text on the pop-up window should be readable and legible.</li>
<li>Help the window stand out from the background, but different from formal access.</li>
<li>Flexible size setting, but the window size is never more than 1460*740 px set to 1600*900 resolution.</li>
<li>Layout: arrange text & graphic in logical order / where you place that element depends on it's relationship to the other pieces.</li>
<li>Grid-based design</li>
<li>Simplicity: only show the necessary information.</li>
</ul>Criteria & Evaluation:</div><div><ul><li>Achieve the communication task: Quickly have a glance and get the mainly infos and decide if read or not.</li>
<li>Text & background: achieve readability and legibility.</li>
<li>Simplified: only show the useful infos</li>
</ul></div><div><br />
</div>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-60859817241765166612011-05-02T14:17:00.004+01:002011-05-02T21:11:35.099+01:00Book preview on 3D desktop<div class="MsoNormal"><span lang="EN-US">On 2D desktop, documents placed in the way that parallel with the desktop, while on 3D desktop they placed random and mostly will in a slanted status.<o:p></o:p></span></div><div class="MsoNormal"><span lang="EN-US">What would the slanted document display when click it to preview?<o:p></o:p></span><br />
<span lang="EN-US"></span><br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US"><br />
</span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US"><b>Principles:</b></span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div><ul><li><span lang="EN-US">Put the user in control:</span></li>
</ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US">A user should not always feel in control, able to do what they want when they want. (the process of desktop status changed should not be noticed)</span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div><ul><li><span lang="EN-US">Keep the user in informed</span></li>
</ul><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US">(A user would understand the change)</span></div><br />
<span lang="EN-US"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-69HNrxvY4PI/Tb6vCIayvdI/AAAAAAAAAHs/YpHj2avAKBI/s1600/bookpreview3.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="178" src="http://4.bp.blogspot.com/-69HNrxvY4PI/Tb6vCIayvdI/AAAAAAAAAHs/YpHj2avAKBI/s320/bookpreview3.jpg" width="320" /></a></div><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh048ANvPnaLry1NcFzdDIYh_2Fzb94JMYLSh2cgrcTUBX5VDSWGpyXYPiBstG1zgAmD0ml6hwJQGd0XmBA4NEzVzJD27BjVMpRh3RbIWOdse9O5H07hcy39ipF13i0y-4aUi5IHHEOG6W1/s1600/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-04-30+%25E4%25B8%258A%25E5%258D%258801.24.41.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh048ANvPnaLry1NcFzdDIYh_2Fzb94JMYLSh2cgrcTUBX5VDSWGpyXYPiBstG1zgAmD0ml6hwJQGd0XmBA4NEzVzJD27BjVMpRh3RbIWOdse9O5H07hcy39ipF13i0y-4aUi5IHHEOG6W1/s320/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-04-30+%25E4%25B8%258A%25E5%258D%258801.24.41.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">tech: keep the right way to the target document</td></tr>
</tbody></table><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NAFfegnM5HwgLgIZw36KJpT-SVBgLHk1oRuJmNYyM8bShmCl5_Vx7ts7wRIehE7f0s38kBv_Z86BtYtX0xCy9t1TLgRQ5yq7DbMmKJlkYD-cZ1g-dSluKAnFwJrmerIo6p6mwtM6Kk8k/s1600/bookpreview.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NAFfegnM5HwgLgIZw36KJpT-SVBgLHk1oRuJmNYyM8bShmCl5_Vx7ts7wRIehE7f0s38kBv_Z86BtYtX0xCy9t1TLgRQ5yq7DbMmKJlkYD-cZ1g-dSluKAnFwJrmerIo6p6mwtM6Kk8k/s320/bookpreview.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">normal display</td></tr>
</tbody></table><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-L6mt8QQcKk8/Tb6wCwmU9CI/AAAAAAAAAH4/AfYrx3T0kE8/s1600/bookpreview2.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="178" src="http://3.bp.blogspot.com/-L6mt8QQcKk8/Tb6wCwmU9CI/AAAAAAAAAH4/AfYrx3T0kE8/s320/bookpreview2.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">on the basis of the way book's placement, <br />
the desktop would in a rotation status.<br />
<br />
<br />
</td></tr>
</tbody></table><span lang="EN-US"><br />
</span></div>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-25207088682776515102011-05-02T00:06:00.010+01:002011-05-02T11:40:16.791+01:00Book manipulate on 3D desktop<span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: 16px;"></span><br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">As my earlier article BumpTop 3D desktop showed the video about BumpTop for Mac. It introduced some tech about desktop items manipulation.</span></div><div class="MsoNormal" style="font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span lang="EN-US" style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">I presumed if it goes to use in books, what the result will be.</span></div></div></div><div class="MsoNormal" style="font-size: 12pt; margin-bottom: 0.0001pt; margin-left: 0cm; margin-right: 0cm; margin-top: 0cm;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><span lang="EN-US">Possibly they will be in this way</span><span lang="EN-US">:</span></span><br />
<div style="font-family: 'Times New Roman';"><span lang="EN-US" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div class="separator" style="clear: both; font-family: 'Times New Roman'; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJzfy2Rm82sdC8FU3bgccf3pY55a1PnLKLe62NmTmDbRmYHABxA4hq_IpWH2IIzvRsUmpMuLqdN6DZRfGrFs0Y3uiJ4oCQeeew_qbQz-HOJNVyPg5lwLNlxNbKvC-dWO3I6LK-oAXJfbaz/s1600/bookmanipulate1-1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJzfy2Rm82sdC8FU3bgccf3pY55a1PnLKLe62NmTmDbRmYHABxA4hq_IpWH2IIzvRsUmpMuLqdN6DZRfGrFs0Y3uiJ4oCQeeew_qbQz-HOJNVyPg5lwLNlxNbKvC-dWO3I6LK-oAXJfbaz/s320/bookmanipulate1-1.jpg" width="320" /></a></div><div style="font-family: 'Times New Roman';"><br />
</div><div class="separator" style="clear: both; font-family: 'Times New Roman'; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgla-hHgbAWZ2PE8CPkuguX0Pb8v83mRkCS63Au-d7O3UxVZQ8-h2TzR_NKeRSb974rPuc-M1Qm72zwt3X0u3GQbJdCOvO23H0xWLwOlzeoTcK7pdN3_siwcTVoDziW7lxk2XXTty_OdY7c/s1600/bookmanipulate1-2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgla-hHgbAWZ2PE8CPkuguX0Pb8v83mRkCS63Au-d7O3UxVZQ8-h2TzR_NKeRSb974rPuc-M1Qm72zwt3X0u3GQbJdCOvO23H0xWLwOlzeoTcK7pdN3_siwcTVoDziW7lxk2XXTty_OdY7c/s320/bookmanipulate1-2.jpg" width="320" /></a></div><div class="separator" style="clear: both; font-family: 'Times New Roman'; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiflrPIXDAfG73snRcx7dOYqqbSJ_zAGoc9KHL7s2M0Gx7h_HU-jwpyKajESTjwgrvvPoEsVyQUmX6E9Bc7oAQj1AOnNjJA8FMsk7tsiyh1FUB_PuwSexH-QX2M2uE5cxgF48GtO7DcPygK/s1600/bookcleanup1-1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiflrPIXDAfG73snRcx7dOYqqbSJ_zAGoc9KHL7s2M0Gx7h_HU-jwpyKajESTjwgrvvPoEsVyQUmX6E9Bc7oAQj1AOnNjJA8FMsk7tsiyh1FUB_PuwSexH-QX2M2uE5cxgF48GtO7DcPygK/s320/bookcleanup1-1.jpg" width="320" /></a></div><div style="font-family: 'Times New Roman';"><br />
</div><div class="separator" style="clear: both; font-family: 'Times New Roman'; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQjxypSqpJFa2n6VEt7smEdGbUdNdzpz5Mzvg79xM99rwOKrU0q0BEUOIev54Be8HPLC9rgbnsOfbdur0UBlI9gaP-j9981g1dZjCSOLGHHkIrwL7AWxh8Cg34xdCGzFJYjp4NcdUg4v1/s1600/bookcleanup1-2%25EF%25BC%258D1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQjxypSqpJFa2n6VEt7smEdGbUdNdzpz5Mzvg79xM99rwOKrU0q0BEUOIev54Be8HPLC9rgbnsOfbdur0UBlI9gaP-j9981g1dZjCSOLGHHkIrwL7AWxh8Cg34xdCGzFJYjp4NcdUg4v1/s320/bookcleanup1-2%25EF%25BC%258D1.jpg" width="320" /></a></div><div class="separator" style="clear: both; font-family: 'Times New Roman'; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAXWDEpiRNbjUtYrOHFSfw4pUG8p8TBZ7mmJlMkvpPjN2u6SWKkT1V-40UU4JmwW-Cr7LVYdQtrXrnMdIMbN86IUTT0ek6HdeM85yzdlxVDTSxDsFWRyHAOMHOzJfe6d1R5v4VYoYx-prn/s1600/bookcleanup1-2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAXWDEpiRNbjUtYrOHFSfw4pUG8p8TBZ7mmJlMkvpPjN2u6SWKkT1V-40UU4JmwW-Cr7LVYdQtrXrnMdIMbN86IUTT0ek6HdeM85yzdlxVDTSxDsFWRyHAOMHOzJfe6d1R5v4VYoYx-prn/s320/bookcleanup1-2.jpg" width="320" /></a></div><div style="font-family: 'Times New Roman';"><br />
</div><div class="separator" style="clear: both; font-family: 'Times New Roman'; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOOqAwSEpT2cLwKm4ltALJVcdPiaCvMCbOvqqn6guRQ2J3NfYhJjWIxjteIY6bfE6UjZg954V05cEbPSXrVVPaEqaHEna8_TbAP7vI2LJrtMXK4rj2Qeu_9swwh2KX_WAAIttsvzJkcV7L/s1600/bookmanipulate1-2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOOqAwSEpT2cLwKm4ltALJVcdPiaCvMCbOvqqn6guRQ2J3NfYhJjWIxjteIY6bfE6UjZg954V05cEbPSXrVVPaEqaHEna8_TbAP7vI2LJrtMXK4rj2Qeu_9swwh2KX_WAAIttsvzJkcV7L/s320/bookmanipulate1-2.jpg" width="320" /></a></div><div style="font-family: 'Times New Roman';"><br />
</div><div class="separator" style="clear: both; font-family: 'Times New Roman'; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXRMQxqYAOuCJ3UMWnq9VZ5ybfiSdDwFa5jZT0HylOwdjJJR1MAw5qui12bJYbowny1hFXpzD6iauPfE59WPV9xe59_Uc5eL3uSl2_dWeBmZAfU4qL4qaDTYcvvvF6sJiaqMjj4822yrS/s1600/growandshrik1-1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXRMQxqYAOuCJ3UMWnq9VZ5ybfiSdDwFa5jZT0HylOwdjJJR1MAw5qui12bJYbowny1hFXpzD6iauPfE59WPV9xe59_Uc5eL3uSl2_dWeBmZAfU4qL4qaDTYcvvvF6sJiaqMjj4822yrS/s320/growandshrik1-1.jpg" width="320" /></a></div><div style="font-family: 'Times New Roman';"><br />
</div><div class="separator" style="clear: both; font-family: 'Times New Roman'; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8b-psZ93x3hFH26gANsUPS6-njs64oRqcg3el6i-egjpkkplJQ3yW0g2s8-U5DqFz_NVLgmdrMnn4pWBC2P3GMixCJtL28BqO3E6KNkXGqLV0lWQVWrgJA3YgeiTdJ45c8IyTk6sN48Wg/s1600/growandshrik1-2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8b-psZ93x3hFH26gANsUPS6-njs64oRqcg3el6i-egjpkkplJQ3yW0g2s8-U5DqFz_NVLgmdrMnn4pWBC2P3GMixCJtL28BqO3E6KNkXGqLV0lWQVWrgJA3YgeiTdJ45c8IyTk6sN48Wg/s320/growandshrik1-2.jpg" width="320" /></a></div><div style="font-family: 'Times New Roman';"><span lang="EN-US" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div></div></div>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-3253456897430616862011-05-01T22:13:00.011+01:002011-05-02T21:13:58.997+01:00Design a search box for online book readingAccording to my work, I need a search box that allow people search on both the book contents and the note they had made. It seems an advanced search box may be more suitable. That was my oringinal thought.<br />
I changed my mind when I got the principle said “A search box should be simple”, which mean advanced search is advanced, and users gel confused tring to use it. It is more user-friendly to have no advanced search options displayed by default.<br />
Therefore, how do you use the simple search box to tackle this issue. My way is make the title of the search box as clear as possible, just show what they can do, and leave others to the computer. Like type “Keywords and sentence” to get the book page or note where show the related words.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc6BJvObZaqaJMwqfJc8zYLh6bDxgyoHXmZTUnEUBb-epgKEVj9r-TT1R81FVB5GGmQRzToX_teXbGV1DW1B2NmGvFsD-s2vef4OYcdsYVwSBc9GbSu7CnOVd3QykvcsQx2-babhRqygPg/s1600/10.05.33.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc6BJvObZaqaJMwqfJc8zYLh6bDxgyoHXmZTUnEUBb-epgKEVj9r-TT1R81FVB5GGmQRzToX_teXbGV1DW1B2NmGvFsD-s2vef4OYcdsYVwSBc9GbSu7CnOVd3QykvcsQx2-babhRqygPg/s400/10.05.33.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">idea/sketch/analyze/develop</td></tr>
</tbody></table><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="text-align: left;"><br />
</div><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi25mlywvPkfWl5fskxzJzSCVXxUxCQRngOGwPpGaV4pczUPpimy6SXGAsqRJn8XOLHNgoQnF0jZKebZQ9OfvG_UnoI5IQLK3T8PHbPVtSkIBZN4MV77gO9u0vBowtsTzuHkDuTW0F3nHTH/s1600/10.46.54.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi25mlywvPkfWl5fskxzJzSCVXxUxCQRngOGwPpGaV4pczUPpimy6SXGAsqRJn8XOLHNgoQnF0jZKebZQ9OfvG_UnoI5IQLK3T8PHbPVtSkIBZN4MV77gO9u0vBowtsTzuHkDuTW0F3nHTH/s320/10.46.54.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">principles check</td></tr>
</tbody></table><div style="text-align: left;"><br />
</div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Take the principles to check the temporarily result:<br />
•Name on submit button can be capital letter or search icon or an arrow.<br />
"search" is better than "find", "go'.<br />
•The optimal position for section titles is the upper-left area above the search box.<br />
•Text displayed in the input field should easy to read.<br />
•Input fied length should be appropriate.<br />
•The search fit the website's overall design perfectly yet manage to stand out slightly when users need it.<br />
•The submit button is a button, it should be designed like on, and look different than input field.GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-10379650673265103142011-05-01T21:38:00.000+01:002011-05-01T21:38:03.253+01:00Who knows the size of preview window for mac?<span class="Apple-style-span" style="border-collapse: collapse; color: #333333; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 18px;">It seems that the size of preview window are fixed, though the window for WORD documents look bigger. And they are always horizontal square boxes that seem to make a consistence with the screen appearance. Is there any principles to design the shape? What would happen if make a vertical window's shape?</span>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-77564700250136595492011-05-01T21:36:00.001+01:002011-05-01T21:37:08.162+01:00How do you choose sharing buttons on web app design?<span class="Apple-style-span" style="border-collapse: collapse; color: #333333; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 18px;">Are there as many sharing buttons as good on web app? How about design for a online book reading app. What matters on choosing sharing tools? My feeling is to know the function of sharing widgets and know the audience who might use those. Then determine some. What your opinion?</span><br />
<span class="Apple-style-span" style="color: #333333; font-family: 'Helvetica Neue', Arial, sans-serif;"><span class="Apple-style-span" style="border-collapse: collapse; font-size: 14px; line-height: 18px;"><a href="http://ux.stackexchange.com/questions/6291/how-do-you-choose-sharing-buttons-on-web-app-design">Join conversation in User Experience</a></span></span>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-87711815420624571542011-04-28T00:09:00.004+01:002011-04-28T15:32:01.693+01:00Which book display version do you like more?<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNiYJ-fN3_l7xqtxj2v0KBQDtrkDbvHhpunSHGfBXsxqdcouoor-muP1X4bS8FMU3L0876SKVr8Uarlt8w71_xCDcvHPxM8LqZW6TcN3yGQ6xnjLbKZaXwGU_qOrRRB_w4G1FFeWOqn2f/s1600/displayinmess.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNiYJ-fN3_l7xqtxj2v0KBQDtrkDbvHhpunSHGfBXsxqdcouoor-muP1X4bS8FMU3L0876SKVr8Uarlt8w71_xCDcvHPxM8LqZW6TcN3yGQ6xnjLbKZaXwGU_qOrRRB_w4G1FFeWOqn2f/s320/displayinmess.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"> Option1</td></tr>
</tbody></table><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8RoUJRRFD6wEdwjf7mqnpZ5aFq_tQljoqwPoU1aaeWNmTO3z7G5KPO5RvtVyqo8vYAEd2wJL3OmERfhOU7kYBLJWXS93Cs6jrLFMWarlbyyIfTR7w-47vk2bY0N4C_DHN_jXZAxr2_0uc/s1600/ibookiconondesktop.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8RoUJRRFD6wEdwjf7mqnpZ5aFq_tQljoqwPoU1aaeWNmTO3z7G5KPO5RvtVyqo8vYAEd2wJL3OmERfhOU7kYBLJWXS93Cs6jrLFMWarlbyyIfTR7w-47vk2bY0N4C_DHN_jXZAxr2_0uc/s320/ibookiconondesktop.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Option2</td></tr>
</tbody></table><div class="separator" style="clear: both; text-align: left;">Criteria & Evaluation:</div><div class="separator" style="clear: both; text-align: left;"></div><ul><li>Easy to distinguish (choose1)</li>
<li>Identification (2>1, book cover is an icon as itself)</li>
<li>Distinguish it from other document such as PDF, WORD. It is a specific app. (choose 1)</li>
</ul>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-39758623068241727292011-04-27T23:51:00.001+01:002011-04-27T23:51:45.722+01:00New media and technology briefWill 3-dimensional desktop be a trend? BumpTop had brought lots fun for users though it is not available for the moment. Imaging what if the 3D desktop lead the trend again, what would it affect reading experience? Is it change the way we read on line? what need to be reconsidered? What could we do more when reading a book and what features would remain?GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-67483884982941543002011-03-27T23:12:00.005+01:002011-04-26T18:48:08.378+01:00BumpTop 3D desktop<div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/M0ODskdEPnQ?feature=player_embedded' frameborder='0'></iframe></div><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/GcbymyM3dWo?feature=player_embedded' frameborder='0'></iframe></div><br />
<a href="http://bumptop.com/">BumpTop</a> has been acquired by Google. It will no longer be available fore sale. It is still unknown what Google has planned for the software.GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-14942220053775783552011-03-24T17:55:00.004+00:002011-03-24T17:59:01.184+00:00I have to stop working to blame about this<a href="http://www.dokimos.org/ajff/"><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHwZSun9CRJgGj41qlFet45PUsvolg_Izmozn2-7QVoHR_pbVoWY-ELdjdofOJFSD1TvsADWJR-jMI3eNuvAGaFkK4JCO4IVHB4Ykv9yEujhMHfs29qDZXAMnfI6weoy9BmVABqaQv9HuX/s1600/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-03-24+%25E4%25B8%258B%25E5%258D%258805.35.38.png" imageanchor="1" style=""><img border="0" height="262" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHwZSun9CRJgGj41qlFet45PUsvolg_Izmozn2-7QVoHR_pbVoWY-ELdjdofOJFSD1TvsADWJR-jMI3eNuvAGaFkK4JCO4IVHB4Ykv9yEujhMHfs29qDZXAMnfI6weoy9BmVABqaQv9HuX/s400/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-03-24+%25E4%25B8%258B%25E5%258D%258805.35.38.png" /></a></div></a><br />
<br />
I am doing some kind of work now, and seeing this web source <a href="http://www.dokimos.org/ajff/">Accept Jesus, Forever Forgiven</a> from <a href="http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html">web page that suck</a>. That shocked me, couldn't understand how does it challenge your tolerance.<br />
<a href="http://acapella.harmony-central.com/showthread.php?2259365-Why-Do-Web-Designers-use-Light-Gray-Type-on-a-White-Background">An earlier discuss</a> talk about Why Do Web Designers use Light Gray Type on a White Background? That problem might be hard for reading text by light the contrast of background and text. And it also cause the readability problem. For this dazzling, rich colorful, flashing background make your feeling like lightning a bomb, and want shut the window off as soon as possible. Have you ever noticed what the text on the website yet?GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-81872391199314651122011-03-23T01:48:00.003+00:002011-03-23T01:53:34.213+00:00The highest color contrast = The most legible solution on screen?As my <a href="http://4gracekan.blogspot.com/2011/03/how-would-you-choose-colour-if-you-want.html">earlier article</a> said, black and white provide the highest contrast, and similar color paris such as white and yellow on black and blue background could produce the highest color contrast as well.<br />
<br />
Is that mean it will determine the best choice for screen text reading? <br />
<br />
Some public cases shows when a message or instruction involves a more complicated explanation, black and white provide the highest contrast this does not always provide the most legible solution. The book <a href="http://www.amazon.co.uk/About-Face-Reviving-Rules-Typography/dp/2880466776/ref=sr_1_9?ie=UTF8&qid=1300844728&sr=8-9">“about face”</a> gives a obvious example to support this idea: British road signs using white (sans serif) lettering on a dark-green background; “hazard warning” signs where black letters are used on a yellow background.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbxtAsB9XvNrWXA5thpuJAVC8bCSIi1d-BZLezvWsoyEZAW9Ga1X6DnwH9dsIkjyw53Z-0VkWa0iGc8hpN4Zaz8J_5eIw9EXhGT8Kcun6RRg7ohH0a45fzZ5AhZUKsaX-ZIqjs46C4uxW/s1600/3774191899_cd60ceef49_z.jpeg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="361" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbxtAsB9XvNrWXA5thpuJAVC8bCSIi1d-BZLezvWsoyEZAW9Ga1X6DnwH9dsIkjyw53Z-0VkWa0iGc8hpN4Zaz8J_5eIw9EXhGT8Kcun6RRg7ohH0a45fzZ5AhZUKsaX-ZIqjs46C4uxW/s400/3774191899_cd60ceef49_z.jpeg" /></a></div><br />
<div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHasObdibBHJ3PFTfQOEkpMHFKJHyH-EuGZ7-8L_O9ZfGezE86-_heuR-tlmDUO-MG83RdBf8wOcjZmFDqslx3kjCJe4vh78tT3Ieo3ekki6rz23IX3XqbzSbvIlca4zPfHtc1R7TzCGUM/s1600/Safety+%2526+Hazard+Warning+Signsthumbnail.jpeg" imageanchor="1" style=""><img border="0" height="220" width="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHasObdibBHJ3PFTfQOEkpMHFKJHyH-EuGZ7-8L_O9ZfGezE86-_heuR-tlmDUO-MG83RdBf8wOcjZmFDqslx3kjCJe4vh78tT3Ieo3ekki6rz23IX3XqbzSbvIlca4zPfHtc1R7TzCGUM/s400/Safety+%2526+Hazard+Warning+Signsthumbnail.jpeg" /></a></div><br />
Is it possible that the message or instruction on web involves a more complicated explanation?…<br />
Therefore why do you believe it is safe to choose a black color type?GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-89921102884661354122011-03-17T23:31:00.001+00:002011-03-17T23:31:21.557+00:00Does x-height really matter when choosing fonts in using for readability and legibility?If using a typeface with a low x-height at a large point size, wouldn't it has the same result as using a medium or large x-height smaller point size. So does it means x-height only useful when setting very small like 6 point size fonts?<br />
<br />
<a href="http://graphicdesign.stackexchange.com/questions/1359/does-x-height-really-matter-when-choosing-fonts-in-using-for-readability-and-legi">more answer in StackExchange</a>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-56173819895817239652011-03-15T17:03:00.004+00:002011-03-15T17:30:10.372+00:00Resolution setting to achieve readability series 1: Different media—fonts size on screen and print<b>How do you remove fonts size on print to screen to achieve readability?</b><br />
<br />
Fonts size is different between screen and paper. Why? <br />
How do you measure both sizes?<br />
How do you exchange them?<br />
What are the standard resolution/fonts size for them to achieve good readability?<br />
<br />
The computer screen is not a piece of paper and is not read at the same distance or orientation as print on paper. We do not notice that fonts size is different setting on both of them because they all designed by people-oriented considering.<br />
<br />
Font sizes in inches are fine on a piece of paper but meaningless on a PC screen where the size of anything is measured in pixels.<br />
Inches on a piece of paper are physical inches which using point when output on print, and Inches on a screen are logical inches that the unit is pixels. <a href="http://www.emdpi.com/screendpi.html#logicalinch">See the explanation of logical inch. </a><br />
A formula given by the <a href="http://www.emdpi.com/screendpi.html">emdpi.com</a> make a connection of inches and pixels<br />
<br />
font size in pixels = font size in inches × screen dpi<br />
<br />
For example: <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO3hP_Z8KmmBznS2O3eoqIT9yYEc-5ctgjPJI1mmZdtLxxVJJGsUihlxf2YYjzaq5QTdI3m2CsIQQN0BCzls8ZK8dR3mA90r2EE4gBo917Z7Jt47M-WpkNE99EKbdKEMPn86Xzmv7L6F0Y/s1600/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-03-15+%25E4%25B8%258B%25E5%258D%258803.11.50.png" imageanchor="1" style=""><img border="0" height="55" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO3hP_Z8KmmBznS2O3eoqIT9yYEc-5ctgjPJI1mmZdtLxxVJJGsUihlxf2YYjzaq5QTdI3m2CsIQQN0BCzls8ZK8dR3mA90r2EE4gBo917Z7Jt47M-WpkNE99EKbdKEMPn86Xzmv7L6F0Y/s400/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-03-15+%25E4%25B8%258B%25E5%258D%258803.11.50.png" /></a></div><br />
Screen dpi and image or scanner dpi are different concepts. <br />
<br />
The common term of DPI is a fixed number for a given printer. It is a phisical characteristic of a printer, and also known as the maximum resolution that a printer is capable of. Low-end printers have lower DPI while high-end printers have higher DPI.<br />
When printing it is important to make sure that the DPI is higher or equal to the PPI. If the DPI is lower than the PPI the printer will not be able to fully display the high resolution of the photo.<br />
300 dpi is going to look fine, 600 dpi will look great, 1,200 dpi is excellent, and once you get above 1,200 dpi, it’s going to be nearly impossible to see any difference in whatever you’ve printed.<br />
You might got question about “Is it same DPI requirement for both pics and text on print?” I don’t know, but from <a href="http://www.vsellis.com/multimedia/understanding-dpi-resolution-and-print-vs-web-images/comment-page-1/#comment-2765">Scott Elli</a>'s answer it would be the same for text. <br />
<br />
Screen dpi would be more sense if we called “screen ppi”( pixels per inch). It has one purpose, and one purpose only, and that is to transform screen inches into screen pixels. It has nothing to do with physical inch measurements or screen images. The dots in screen dots per inch are pixels, but the inches are logical inches and not physical inches. <a href="http://www.emdpi.com/definitions.html ">see here</a><br />
There is some relationship between Text Size and Screen Resolution. A survey of Browser Text Size settings from <a href="http://www.clickdensity.com/Text-Sizes-Study.htm ">clickdensity</a> shows:<br />
1. The vast majority of visitors (99.7%) use default (Medium) text size settings.<br />
2. Approximately twice as many visitors (0.2%) increase their text size than decrease their text size (0.1%).<br />
3. Users with very low (640 x 480) or very high (larger than 1600 x 1200) screen resolutions are at least twice as likely to change their text size settings (compared to users with resolutions from 800 x 600 to 1280 x 1024).GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-43564052995099746392011-03-14T00:05:00.001+00:002011-03-14T00:12:50.965+00:00How would you choose colour if you want to produce the most readable text?Colours can contrast in hue, value and saturation. Hue and saturation are not important for legibility, but value does. Black and white create the highest contrast possible. That’s because white has a 100% brightness value, whereas black has a brightness value of 0%. <b>It is common to use a combination of them to avoid a dull page. </b><br />
Reason:<br />
Text readability depends on the ease of distinguishing letter and word shapes which in turn depends on the discrimination of fine detail. High achromatic contrast maximizes this aspect of perception. Since the chromatic system has 1/5 the spatial resolution of the achromatic system, color cannot produce fine detail.<br />
<br />
<b>Contrast of value:</b><br />
Common example:<br />
Black text on white paper/white text on black paper.<br />
Color of print and background:<br />
1. Black print on white background is more legible than white print on blackground, due to the smaller number of fixation pauses. Three fourths of readers prefer black type on a white background.<br />
2. The legibility of black print on tinted paper varies, according to the reflectance of the tinted paper. If the reflectance is over 70%, there is no notceable loss in legibility for type over 10 points in size.<br />
3. The great the brightness contrast between print and background, the higher the legibility.<br />
4. Dark ink on a light shade of colour ink or coloured paper results in the most legible combinitions of colored ink on a colored background.<br />
<br />
<b>Contrast of value and hue combination:</b><br />
The further way on the colour wheel of two colors are, the higher hue contrast.<br />
The larger differences in lightness of two colors are, the higher value contrast.<br />
Example:<br />
A bright warm color and a dark cold color. (cold colours appear to be more distant, while warm colour appear to be closer)<br />
Such as: bright red for text and dark blue for background<br />
<br />
<b>Contrast of value and saturation combination:</b><br />
The further distance of two colours in saturation, the higher saturation contrast.<br />
And The larger differences in lightness of two colors are, the higher value contrast.<br />
Example:<br />
A interesting effect of saturation contrast is that a setting of colour with different saturations set against a grey background.<br />
Such as:<br />
Rich red for text on light grey background.<br />
<br />
<b>Colour contrast does not achieve legibility:</b><br />
Contrast only hue or saturation<br />
Examples:<br />
red-blue, green-yellow, green-white, green-gray ("button gray", the Windows standard gray) etc. (high hue contrast, they have small value contrast)<br />
<br />
Summarize:<br />
The best combinations have the two brightest colors, white and yellow, contrasted with the two darkest colors, black and blue: black-white, blue-white, blue-yellow, and black-yellow. Red has a dark intermediate brightness and works reasonably well against all backgrounds but blue.GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-92127859546385211452011-03-10T16:04:00.000+00:002011-03-10T16:04:13.073+00:00Why not use san-serif fonts on print design?It's better to use san-serif than serif fonts on web, as their simpler letter form remain readable at low resolution. serif fonts need more pixels to display their extra details. I was wondering why I seldom see any san-serif fonts for body text on print design?<br />
<a href="http://ui.stackexchange.com/questions/4013/why-not-use-san-serif-fonts-on-print-design">Join the conversation. go.</a>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0tag:blogger.com,1999:blog-8475818260293260310.post-53809369642572828272011-02-23T19:10:00.001+00:002011-02-23T19:11:21.600+00:00What do you find the common mistake on this website<a href="http://www.angelfire.com/super/badwebs/"><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIZiSH3wnnnUTw9ivWQQzHpBkgTAlR0isvesewedmDGZfxazZ4HI-9bDotdPXDEJn_Pidq8oYZoR2qSXcX-_nc1hG-0a7ph5B7mOwGne5sCsz36Vuh9dweKu53Z8uc0sRXsu-kLfkPU__z/s1600/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-02-23+%25E4%25B8%258B%25E5%258D%258807.07.53.png" imageanchor="1" style=""><img border="0" height="209" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIZiSH3wnnnUTw9ivWQQzHpBkgTAlR0isvesewedmDGZfxazZ4HI-9bDotdPXDEJn_Pidq8oYZoR2qSXcX-_nc1hG-0a7ph5B7mOwGne5sCsz36Vuh9dweKu53Z8uc0sRXsu-kLfkPU__z/s400/%25E5%25B1%258F%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2011-02-23+%25E4%25B8%258B%25E5%258D%258807.07.53.png" /></a></div></a><br />
<br />
<a href="http://www.angelfire.com/super/badwebs/">click to the website</a>GraceKanhttp://www.blogger.com/profile/17459156444038863739noreply@blogger.com0